Add button "fluent theme" on selection page (#191)

* Add "fluent theme" on selection page + fix styles
DevExpress · Oct 23, 2023 · 5b1a92c · 5b1a92c
1 parent 1d3c0ac
commit 5b1a92c
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 1 deletion.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -36,6 +36,7 @@ import { AppComponent } from './app.component';
 import { IconBootstrapComponent } from './icons/icon-bootstrap/icon-bootstrap.component';
 import { IconExportComponent } from './icons/icon-export/icon-export.component';
 import { IconGenericComponent } from './icons/icon-generic/icon-generic.component';
+import { IconFluentComponent } from './icons/icon-fluent/icon-fluent.component';
 import { IconMaterialComponent } from './icons/icon-material/icon-material.component';
 import { IconMetadataComponent } from './icons/icon-metadata/icon-metadata.component';
 import { IconThemeCircleComponent } from './icons/icon-theme-circle/icon-theme-circle.component';
@@ -83,6 +84,7 @@ import { HelpTooltipComponent } from './layouts/header/export-popup/help-tooltip
         IconThemesComponent,
         IconGenericComponent,
         IconMaterialComponent,
+        IconFluentComponent,
         IconMetadataComponent,
         IconExportComponent,
         IconBootstrapComponent,

diff --git a/src/app/icons/icon-fluent/icon-fluent.component.css b/src/app/icons/icon-fluent/icon-fluent.component.css
@@ -0,0 +1,7 @@
+.st0 {
+    fill: #2190F7;
+}
+
+.st1 {
+    fill: #ffffff;
+}
diff --git a/src/app/icons/icon-fluent/icon-fluent.component.html b/src/app/icons/icon-fluent/icon-fluent.component.html
@@ -0,0 +1,6 @@
+<svg width="64" height="64" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle class="st0" cx="40" cy="40" r="40"/>
+    <path class="st1" fill-rule="evenodd" clip-rule="evenodd"
+          d="M40.6911 16.1584C40.2561 15.9472 39.7439 15.9472 39.3088 16.1584L23.8543 23.6584C23.3307 23.9124 23 24.4318 23 25V53.5C23 54.0269 23.2848 54.5152 23.7503 54.7862L39.2049 63.7862C39.6823 64.0643 40.2769 64.0716 40.7614 63.8053C40.7797 63.7952 40.7978 63.7849 40.8155 63.7742L56.2495 54.7861C56.715 54.5151 56.9998 54.0266 56.9998 53.5V40.0219C56.9999 40.0146 57 40.0073 57 40C57 39.9927 56.9999 39.9854 56.9998 39.9781V25.0219C56.9999 25.0146 57 25.0073 57 25C57 24.4318 56.6693 23.9124 56.1457 23.6584L40.6911 16.1584ZM26.0909 52.6507V25.9271L40 19.1771L51.9988 25L39.3088 31.1584C38.7853 31.4124 38.4545 31.9318 38.4545 32.5C38.4545 33.0682 38.7853 33.5876 39.3088 33.8416L51.9988 40L40.1632 45.7438C39.116 46.2519 38.4545 47.2907 38.4545 48.4271V59.8507L26.0909 52.6507Z"
+    />
+</svg>
diff --git a/src/app/icons/icon-fluent/icon-fluent.component.ts b/src/app/icons/icon-fluent/icon-fluent.component.ts
@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-icon-fluent',
+    templateUrl: './icon-fluent.component.html',
+    styleUrls: ['./icon-fluent.component.css']
+})
+export class IconFluentComponent { }
diff --git a/src/app/index/index.component.html b/src/app/index/index.component.html
@@ -68,6 +68,12 @@
                         </div>
                         <div class="block-title">Material</div>
                     </div>
+                    <div class="block" [routerLink]="['/master/fluent/blue-light']">
+                        <div class="block-image">
+                            <app-icon-fluent></app-icon-fluent>
+                        </div>
+                        <div class="block-title">Fluent</div>
+                    </div>
                 </div>
             </div>
         </ng-container>

diff --git a/src/index.html b/src/index.html
@@ -19,7 +19,7 @@
         }
 
         if(isIframe()) {
-            var themeMarker = "dx." + /generic|material/.exec(window.location.pathname)[0];
+            var themeMarker = "dx." + /generic|material|fluent/.exec(window.location.pathname)[0];
             document.write('<style>.dx-theme-marker { font-family: "' + themeMarker + '"; }</style>');
         } else {
             document.write('<link rel="stylesheet" type="text/css" href="content/css/dx.material.blue.light.compact.css" />');