Merge dev to master (#215)

* Fix styles issues (#203) * Add mode selections (#204) * Add mode swithers * Add some new fixes * Fix editors * Fix labels * Fix lint * Fix wizard color (#205) * Fix toolbar color * Fix error if value of border-radius is number (#209) * add 'px' if border radius value is number * chore: deploy with devextreme-internal (#208) * deploy with devextreme-internal * bump DevExtreme + remove tarballs * uncomment back deployment * plain install instead of substitution + package-lock * Fix display tooltip on overlay block (#206) * Redesign header, footer, favicon (#196) * fix tooltip in overlay block + alignment * Add TM info tooltio for fluent theme in header theme selectbox (#210) * add tm info tooltio for fluent theme in header theme selectbox * refactor * Revert "remove fluent theme" This reverts commit 785b734. * refactor deployment workflow (#216) --------- Co-authored-by: volvl <[email protected]> Co-authored-by: Aliullov Vlad <[email protected]>
DevExpress · Dec 15, 2023 · 5c1956d · 5c1956d
1 parent 7c2c397
commit 5c1956d
Show file tree

Hide file tree

Showing 32 changed files with 2,422 additions and 1,325 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -26,6 +26,9 @@ jobs:
     - name: Run npm install
       run: npm install --no-package-lock --no-audit --no-fund
 
+    - name: Install Internal Package
+      uses: DevExpress/github-actions/install-internal-package@main
+
     - name: Build
       run: npm run build
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -27,7 +27,7 @@ import {
 } from 'devextreme-angular';
 
 import { AppLayoutComponent } from './layouts/app-layout/app-layout.component';
-import { HeaderComponent } from './layouts/header/header.component';
+import { HeaderComponent, IncludesPipe } from './layouts/header/header.component';
 import { FooterComponent } from './layouts/footer/footer.component';
 import { PreviewLayoutComponent } from './layouts/preview-layout/preview-layout.component';
 
@@ -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';
@@ -73,6 +74,7 @@ import { PreviewModule } from './preview/preview.module';
 import { ButtonIconComponent } from './icons/button-icon/button-icon.component';
 import { IconLoadingComponent } from './icons/icon-loading/icon-loading.component';
 import { HelpTooltipComponent } from './layouts/header/export-popup/help-tooltip/help-tooltip.component';
+import { IconTmInfoComponent } from './icons/icon-tm-info/icon-tm-info.component';
 
 @NgModule({
     declarations: [
@@ -83,8 +85,10 @@ import { HelpTooltipComponent } from './layouts/header/export-popup/help-tooltip
         IconThemesComponent,
         IconGenericComponent,
         IconMaterialComponent,
+        IconFluentComponent,
         IconMetadataComponent,
         IconExportComponent,
+        IconTmInfoComponent,
         IconBootstrapComponent,
         AdvancedComponent,
         LeftMenuComponent,
@@ -112,7 +116,8 @@ import { HelpTooltipComponent } from './layouts/header/export-popup/help-tooltip
         ButtonIconComponent,
         IconLoadingComponent,
         HelpTooltipComponent,
-        NotifyErrorComponent
+        NotifyErrorComponent,
+        IncludesPipe
     ],
     imports: [
         BrowserModule,

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/icons/icon-tm-info/icon-tm-info.component.css b/src/app/icons/icon-tm-info/icon-tm-info.component.css
@@ -0,0 +1,3 @@
+svg {
+    display: block;
+}
diff --git a/src/app/icons/icon-tm-info/icon-tm-info.component.html b/src/app/icons/icon-tm-info/icon-tm-info.component.html
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M9 16C12.866 16 16 12.866 16 9C16 5.13401 12.866 2 9 2C5.13401 2 2 5.13401 2 9C2 12.866 5.13401 16 9 16ZM9 14.6875C12.1411 14.6875 14.6875 12.1411 14.6875 9C14.6875 5.85888 12.1411 3.3125 9 3.3125C5.85888 3.3125 3.3125 5.85888 3.3125 9C3.3125 12.1411 5.85888 14.6875 9 14.6875ZM10 6C10 6.55228 9.55228 7 9 7C8.44772 7 8 6.55228 8 6C8 5.44772 8.44772 5 9 5C9.55228 5 10 5.44772 10 6ZM9 8C8.58579 8 8.25 8.33579 8.25 8.75V12.25C8.25 12.6642 8.58579 13 9 13C9.41421 13 9.75 12.6642 9.75 12.25V8.75C9.75 8.33579 9.41421 8 9 8Z" fill="currentColor"/>
+</svg>
diff --git a/src/app/icons/icon-tm-info/icon-tm-info.component.ts b/src/app/icons/icon-tm-info/icon-tm-info.component.ts
@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+    selector: 'app-icon-tm-info',
+    templateUrl: './icon-tm-info.component.html',
+    styleUrls: ['./icon-tm-info.component.css']
+})
+export class IconTmInfoComponent {
+    @Input('name') name: string;
+}
diff --git a/src/app/import/import-bootstrap/import-bootstrap.component.css b/src/app/import/import-bootstrap/import-bootstrap.component.css
@@ -25,34 +25,7 @@
     height: 56px;
 }
 
-:host ::ng-deep .tabs.dx-tabpanel.dx-state-focused .dx-tab-selected:after {
-    border-color: #d4d8da;
-    border-width: 2px;
-    border-bottom: 0;
-}
-
-:host ::ng-deep .tabs .dx-tab-selected {
-    background-color: #f0f2f3;
-    color: #158BFF;
-}
-
-:host ::ng-deep .tabs.dx-tabpanel .dx-tab-selected:before {
-    border-bottom: 0;
-}
 
-:host ::ng-deep .tabs .dx-tab.dx-state-focused:after {
-    border-color: transparent;
-}
 
-:host ::ng-deep .tabs .dx-tab-selected:after {
-    border-color: #d4d8da;
-    border-width: 2px;
-    border-top-style: solid;
-    height: 51px;
-}
 
-:host ::ng-deep .tabs.dx-tabpanel .dx-multiview-wrapper,
-:host ::ng-deep .tabs.dx-tabpanel.dx-state-focused .dx-multiview-wrapper {
-    border: none;
-}
 
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/app/layouts/header/header.component.css b/src/app/layouts/header/header.component.css
@@ -5,13 +5,13 @@
 
 .header {
     height: 70px;
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
     display: flex;
 }
 
 .header.filled {
     background-color: #fff;
-    box-shadow: 0px -8px 9px 4px #000;
+    box-shadow: 0 -8px 9px 4px #000;
     z-index: 3;
     position: relative;
 }
@@ -20,6 +20,22 @@
     align-self: center;
 }
 
+.theme-group-header {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+    gap: 8px;
+}
+
+.fluent-tm-info {
+    cursor: pointer;
+    height: 18px;
+}
+
+.theme-tm-tooltip {
+    padding: 8px;
+}
+
 .logo {
     display: flex;
     gap: 6px;
@@ -61,6 +77,7 @@
 
 .switcher-editor {
     border: none;
+    min-width:200px;
 }
 
 .switcher-editor.dx-dropdowneditor-active {

diff --git a/src/app/layouts/header/header.component.html b/src/app/layouts/header/header.component.html
@@ -7,7 +7,6 @@
             Theme Builder
         </div>
     </div>
-
     <div *ngIf="switchEnabled; then switcherBlock;"></div>
 
     <ng-template #switcherBlock>
@@ -18,12 +17,31 @@
                 [dataSource]="switcherData"
                 stylingMode="filled"
                 [grouped]="true"
+                groupTemplate="group"
                 displayExpr="text"
                 valueExpr="themeId"
                 fieldTemplate="field"
                 [(value)]="currentThemeId"
                 (onValueChanged)="themeChanged($event)"
             >
+                <div *dxTemplate="let data of 'group'; index as i;">
+                    <div class="theme-group-header">
+                        {{ data.key }}
+                        <app-icon-tm-info *ngIf="data.key | includes: 'fluent'"
+                                          id="fluent-tm-info-{{i}}" class="fluent-tm-info info-color"
+                    ></app-icon-tm-info>
+                        <dx-tooltip
+                            target="#fluent-tm-info-{{i}}"
+                            showEvent="dxhoverstart"
+                            hideEvent="dxhoverend">
+                            <div *dxTemplate="let data of 'content'">
+                                <div class="theme-tm-tooltip">
+                                    All trademarks or registered trademarks are property of their respective owners.
+                                </div>
+                            </div>
+                        </dx-tooltip>
+                    </div>
+                </div>
                 <div *dxTemplate="let data of 'field'">
                     <div class="switcher-template">
                         <app-icon-theme-circle [theme]="data.text | lowercase" [small]="true" class="switcher-icon editor"></app-icon-theme-circle>

diff --git a/src/app/layouts/header/header.component.ts b/src/app/layouts/header/header.component.ts
@@ -1,14 +1,24 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, Pipe, PipeTransform } from '@angular/core';
 import { Router } from '@angular/router';
 import DataSource from 'devextreme/data/data_source';
 import { confirm } from 'devextreme/ui/dialog';
 import { Subscription } from 'rxjs';
 import { MetadataRepositoryService } from '../../meta-repository.service';
 
+@Pipe({
+    name: 'includes'
+})
+export class IncludesPipe implements PipeTransform {
+    transform(value: string, str: string): boolean {
+        return value.toLowerCase().includes(str.toLowerCase());
+    }
+}
+
 @Component({
     selector: 'app-header',
     templateUrl: './header.component.html',
-    styleUrls: ['./header.component.css']
+    styleUrls: ['./header.component.css'],
+    providers: [IncludesPipe]
 })
 export class HeaderComponent implements OnInit, OnDestroy {
     @Input() switchEnabled: boolean;

diff --git a/src/app/left-menu/editor/editor.component.html b/src/app/left-menu/editor/editor.component.html
@@ -10,7 +10,7 @@
     <dx-text-box *ngIf="item.Type === 'text'"
         stylingMode="filled"
         [value]="item.Value"
-        (onValueChanged)="valueChanged($event, item.Key)"
+        (onValueChanged)="valueTextChanged($event, item.Key)"
     ></dx-text-box>
 
     <dx-color-box *ngIf="item.Type === 'color'"

diff --git a/src/app/left-menu/editor/editor.component.ts b/src/app/left-menu/editor/editor.component.ts
@@ -19,10 +19,26 @@ export class EditorComponent {
     constructor(private names: NamesService,
         private metaRepository: MetadataRepositoryService) { }
 
+    private isValueCanBePixels() {
+        return this.item.Key.endsWith('border-radius');
+    }
+
+    private isPositiveNumber(value) {
+        return /^[1-9]\d*$/.test(value);
+    }
+
     highlight(text: string): SafeHtml {
         return this.names.getHighlightedForLeftMenuName(text, this.searchText);
     }
 
+    valueTextChanged(e: { value: string }, key: string): void {
+        if(this.isValueCanBePixels() && this.isPositiveNumber(e.value)) {
+            e.value = e.value + 'px';
+        }
+
+        this.metaRepository.updateSingleVariable(e, key);
+    }
+
     valueChanged(e: any, key: string): void {
         this.metaRepository.updateSingleVariable(e, key);
     }

diff --git a/src/app/master/master.component.css b/src/app/master/master.component.css
@@ -43,7 +43,7 @@
     flex-shrink: 1;
     margin-top: 56px;
     margin-bottom: 118px;
-    height: 800px;
+    height: 820px;
     min-width: 1160px;
     background-color: #fff;
     box-shadow: 0 4px 12px #0000004d;
@@ -98,6 +98,7 @@
     text-align: left;
     color: #505050;
     cursor: pointer;
+    margin-bottom: 2px;
 }
 
 .schemes li:hover {

diff --git a/src/app/preview/button-group/button-group.component.html b/src/app/preview/button-group/button-group.component.html
@@ -24,7 +24,19 @@
     </div>
 </ng-template>
 <ng-template  #expandedBlock>
-    <div class="component-options">
+    <div class="options-block">
+        <div class="option">
+            <span>Buttons Style</span>
+            <div>
+                <dx-select-box
+                    width="200px"
+                    [(value)]="typeValue"
+                    [items]="['default', 'normal', 'success', 'danger']"
+                    (onValueChanged)="changeType($event)"
+                    stylingMode="outlined">
+                </dx-select-box>
+            </div>
+        </div>
         <dx-check-box
             text="Show icons"
             [value]="true"
@@ -36,7 +48,6 @@
             (onValueChanged)="toogleText($event)"
         ></dx-check-box>
     </div>
-
     <div class="btn-container">
         <div class="btn-row">
             <div class="btn-cell btn-cell--empty"></div>

diff --git a/src/app/preview/button-group/button-group.component.ts b/src/app/preview/button-group/button-group.component.ts
@@ -3,6 +3,7 @@ import { BehaviorSubject } from 'rxjs';
 import { DxButtonTypes } from 'devextreme-angular/ui/button';
 import { DxButtonGroupTypes } from 'devextreme-angular/ui/button-group';
 import { DxCheckBoxTypes } from 'devextreme-angular/ui/check-box';
+import { DxSelectBoxTypes } from 'devextreme-angular/ui/select-box';
 import dxButtonGroup from 'devextreme/ui/button_group';
 
 type CustomButtonGroupItem = DxButtonGroupTypes.Item & {
@@ -17,6 +18,8 @@ type CustomButtonGroupItem = DxButtonGroupTypes.Item & {
 export class ButtonGroupComponent {
     listButtonGroup: dxButtonGroup[] = [];
 
+    typeValue = 'default';
+
     capitalizeFirstLetter(str: string) {
         // eslint-disable-next-line @typescript-eslint/no-magic-numbers
         return str.charAt(0).toUpperCase() + str.slice(1);
@@ -40,6 +43,18 @@ export class ButtonGroupComponent {
         });
     }
 
+    changeType(event: DxSelectBoxTypes.ValueChangedEvent) {
+        this.listButtonGroup.forEach((component) => {
+            const items = component.option('items');
+            const changedItems = items.map((item: CustomButtonGroupItem) => {
+                item.type = event.value;
+                return item;
+            });
+
+            component.option('items', changedItems);
+        });
+    }
+
     toogleIcons(event: DxCheckBoxTypes.ValueChangedEvent) {
         this.listButtonGroup.forEach((component) => {
             const items = component.option('items');