Merge pull request evt-project#97 from evt-project/feature/selectors-…

…buttons-style Feature/selectors buttons style
babsevensix · Jan 30, 2021 · 09445c3 · 09445c3
2 parents a42e87b + 8a79c37
commit 09445c3
Show file tree

Hide file tree

Showing 19 changed files with 240 additions and 72 deletions.
diff --git a/src/app/components/edition-level-selector/edition-level-selector.component.html b/src/app/components/edition-level-selector/edition-level-selector.component.html
@@ -15,4 +15,7 @@
             label-left></evt-icon>
         {{item.label | translate}}
     </ng-template>
+    <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
+        {{item.label | translate}}
+    </ng-template>
 </ng-select>
diff --git a/src/app/main-menu/main-menu.component.scss b/src/app/main-menu/main-menu.component.scss
@@ -13,7 +13,7 @@
     top: $base-header-height;
     right: 4px;
 
-    @include set(box-shadow, "0 2px 5px 0 rgba(0,0,0,0.26), 0 2px 10px 0 rgba(0,0,0,0.16)");
+    @include set("box-shadow", "0 2px 5px 0 rgba(0,0,0,0.26), 0 2px 10px 0 rgba(0,0,0,0.16)");
 
     ul {
         margin: 0;

diff --git a/src/app/panels/text-panel/text-panel.component.html b/src/app/panels/text-panel/text-panel.component.html
@@ -3,7 +3,7 @@
         <evt-button
             label="Info"
             [iconLeft]="{icon: 'info-circle'}"
-            additionalClasses="mr-1"
+            additionalClasses="btn-primary mr-1"
             (btnClick)="toggleSecondaryContent('INFO')"
             [active]="secondaryContent === 'INFO'"></evt-button>
         <evt-page-selector [pageID]="pageID" (selectionChange)="currentPage$.next($event)"></evt-page-selector>

diff --git a/src/app/pinboard/pinner/pinner.component.scss b/src/app/pinboard/pinner/pinner.component.scss
@@ -1,3 +1,21 @@
+@import "../../../assets/scss/themes";
+@import "../../../assets/scss/mixins";
+
 .evt-pinner {
     float: right;
-}
+}
+::ng-deep .evt-pinner {
+    .btn {
+        opacity: 0.4;
+        &:hover {
+            @include set("box-shadow", "none !important");
+            opacity: .9 !important;
+        }
+        &.active {
+            opacity: 1;
+            @include themify($themes) {
+                color: themed("toolsColor") !important;
+            }
+        }
+    }
+}
diff --git a/src/app/ui-components/button/button.component.scss b/src/app/ui-components/button/button.component.scss
@@ -1,30 +1,75 @@
-@import '../../../assets/scss/themes';
+@import "../../../assets/scss/themes";
+@import "../../../assets/scss/mixins";
 
 .btn {
-    &.transparent{
-        &:hover {
-            // background: rgba(0, 0, 0, .1);
-            opacity: .7;
+    outline: none;
+    border: none;
+
+    &.btn-sm {
+        height: 31px;
+    }
+
+    &:focus {
+        box-shadow: none;
+    }
+
+    @include themify($themes) {
+        color: themed("toolsColor");
+        background-color: themed("toolsBackground");
+        border-color: themed("toolsBackground");
+    }
+
+    &:hover {
+        @include set("box-shadow", "1px 2px 3px rgba(0, 0, 0, .4) inset !important");
+    }
+
+    &.active {
+        @include themify($themes) {
+            background: themed("toolsColorActive");
         }
+    }
+
+    &.transparent {
+        background: none !important;
+        border-color: transparent !important;
+
         &.active {
-            @include themify($themes) { // TEMP
-                color: themed('baseColorLight');
-                background-color: themed('baseColorDark');
-                border-color: themed('baseColorDark');
+            @include themify($themes) {
+                color: themed("toolsColorActive");
             }
         }
     }
+
     &.btn-inverted {
         background: transparent;
         border: none;
         box-shadow: none;
-    
+
         @include themify($themes) {
-            color: themed('baseColorLight');
+            color: themed("toolsBackground");
+            background-color: themed("toolsColor");
+            border-color: themed("toolsColor");
+
             &:hover,
             &.btn-hovered {
-                background: rgba(themed('baseColorLight'), .2);
+                background: rgba(themed("toolsBackground"), 0.2);
             }
         }
     }
-}
+
+    &.btn-floating {
+        @include set("box-shadow", "0 2px 4px rgba(0, 0, 0, .4) !important");
+        @include themify($themes) {
+            color: themed("toolsBackground");
+            background-color: themed("toolsColor");
+            border-color: themed("toolsColor");
+        }
+        &:hover {
+            @include set("box-shadow", "none !important");
+        }
+        &.rounded-circle {
+            height: 40px;
+            width: 40px;
+        }
+    }
+}
diff --git a/src/app/ui-components/panel/panel.component.html b/src/app/ui-components/panel/panel.component.html
@@ -5,7 +5,7 @@
     	<nav class="navbar">
             <div><ng-content select="[header-left]"></ng-content></div>
             <div><ng-content select="[header-right]"></ng-content></div>
-            <evt-button *ngIf="closable" additionalClasses="rounded-circle" 
+            <evt-button *ngIf="closable" additionalClasses="rounded-circle btn-close" 
                 (btnClick)="emitHide()" [iconLeft]="{icon: 'times'}">
             </evt-button>
         </nav>

diff --git a/src/app/view-modes/collation/collation.component.html b/src/app/view-modes/collation/collation.component.html
@@ -19,9 +19,10 @@
                 </evt-witness-panel>
                 </gridster-item>
             </gridster>
-            <evt-button class="btn" additionalClasses="btn-primary shadow"
-                [class.btn-float-right]="getWitnesses().length > 0"
-                (btnClick)="addWitness()" label="ADD WITNESS"></evt-button>
+            <evt-button class="btn" [class.btn-float-right]="getWitnesses().length > 0"
+                [additionalClasses]="witnessBtn?.additionalClasses"
+                [label]="witnessBtn?.label | translate" [iconLeft]="witnessBtn?.icon" [title]="witnessBtn?.title | translate"
+                (btnClick)="addWitness()"></evt-button>
         </div> 
     </gridster-item>
 </gridster>
diff --git a/src/app/view-modes/collation/collation.component.scss b/src/app/view-modes/collation/collation.component.scss
@@ -18,9 +18,12 @@
 
 .btn-float-right {
     position: absolute;
-    left: 99%;
-    transform: translate(-100%,-50%);
+    right: -.3rem;
+    transform: translate(0,-50%);
     top: 50%;
     z-index: 99999;
-    width: 140px;
+    opacity: .5;
+    &:hover {
+        opacity: 1;
+    }
 }
diff --git a/src/app/view-modes/collation/collation.component.ts b/src/app/view-modes/collation/collation.component.ts
@@ -3,6 +3,7 @@ import { CompactType, DisplayGrid, GridsterConfig, GridsterItem, GridType } from
 import { map } from 'rxjs/operators';
 import { Page } from 'src/app/models/evt-models';
 import { EVTStatusService } from 'src/app/services/evt-status.service';
+import { EvtIconInfo } from 'src/app/ui-components/icon/icon.component';
 
 @Component({
   selector: 'evt-collation',
@@ -25,6 +26,15 @@ export class CollationComponent implements OnInit, OnDestroy {
     map(({ page }) => page.id),
   );
 
+  public get witnessBtn(): { label: string, additionalClasses: string, title: string, icon: EvtIconInfo } {
+    return {
+      label: this.witnesses.length > 0 ? '' : 'addWitness',
+      title: this.witnesses.length > 0 ? 'addWitness' : '',
+      additionalClasses: `btn-floating ${this.witnesses.length > 0 ? 'rounded-circle' : ''}`,
+      icon: { iconSet: 'fas', icon: 'plus' },
+    };
+  }
+
   constructor(
     private evtStatusService: EVTStatusService,
   ) {

diff --git a/src/app/view-modes/reading-text/reading-text.component.html b/src/app/view-modes/reading-text/reading-text.component.html
@@ -39,12 +39,10 @@
     </gridster-item>
 </gridster>
 <div class="global-tools">
-    <button type="button" class="btn btn-primary shadow rounded-circle" [class.active]="apparatusesOpened"
-        (click)="toggleApparatuses()">
-        <evt-icon class="icon" [iconInfo]="{icon: 'pen-square'}"></evt-icon>
-    </button>
-    <button type="button" class="btn btn-primary shadow rounded-circle" [class.active]="pinnedBoardOpened"
-        (click)="togglePinnedBoard()">
-        <evt-icon class="icon" [iconInfo]="{icon: 'thumbtack'}"></evt-icon>
-    </button>
+    <evt-button [type]="'button'" [toggler]="true" [active]="apparatusesOpened"
+        (btnClick)="toggleApparatuses()" additionalClasses="btn-primary shadow rounded-circle mr-1" 
+        [iconLeft]="{icon: 'pen-square'}"></evt-button>
+    <evt-button [type]="'button'" [toggler]="true" [active]="pinnedBoardOpened"
+        (btnClick)="togglePinnedBoard()" additionalClasses="btn-primary shadow rounded-circle" 
+        [iconLeft]="{icon: 'thumbtack'}"></evt-button>
 </div>
diff --git a/src/app/view-modes/reading-text/reading-text.component.scss b/src/app/view-modes/reading-text/reading-text.component.scss
@@ -6,6 +6,10 @@
 }
 
 :host ::ng-deep {
+    .global-tools .btn {
+        height: 40px;
+        width: 40px;
+    }
     .apparatuses {
         .panel .content {
             padding: 0 !important;

diff --git a/src/app/view-modes/text-versions/text-versions.component.html b/src/app/view-modes/text-versions/text-versions.component.html
@@ -18,9 +18,10 @@
                 </evt-version-panel>
                 </gridster-item>
             </gridster>
-            <evt-button class="btn" additionalClasses="btn-primary shadow"
-                [class.btn-float-right]="getVersions().length > 0"
-                (btnClick)="addVersion()" label="ADD VERSION"></evt-button>
+            <evt-button class="btn" [class.btn-float-right]="getVersions().length > 0"
+                [additionalClasses]="versionBtn?.additionalClasses"
+                [label]="versionBtn?.label | translate" [iconLeft]="versionBtn?.icon" [title]="versionBtn?.title | translate"
+                (btnClick)="addVersion()"></evt-button>
         </div> 
     </gridster-item>
 </gridster>
diff --git a/src/app/view-modes/text-versions/text-versions.component.scss b/src/app/view-modes/text-versions/text-versions.component.scss
@@ -15,13 +15,17 @@
         }
     }
 }
+
 .btn-float-right {
     position: absolute;
-    left: 99%;
-    transform: translate(-100%,-50%);
+    right: -.3rem;
+    transform: translate(0,-50%);
     top: 50%;
-    z-index: 9999;
-    width: 140px;
+    z-index: 99999;
+    opacity: .5;
+    &:hover {
+        opacity: 1;
+    }
 }
 
 :host ::ng-deep .versionsPanel gridster-item {

diff --git a/src/app/view-modes/text-versions/text-versions.component.ts b/src/app/view-modes/text-versions/text-versions.component.ts
@@ -4,6 +4,7 @@ import { map } from 'rxjs/operators';
 import { EditionLevel } from 'src/app/app.config';
 import { Page } from 'src/app/models/evt-models';
 import { EVTStatusService } from 'src/app/services/evt-status.service';
+import { EvtIconInfo } from 'src/app/ui-components/icon/icon.component';
 
 @Component({
   selector: 'evt-text-versions',
@@ -27,6 +28,15 @@ export class TextVersionsComponent implements OnInit {
     map(({ editionLevels }) => editionLevels[0]),
   );
 
+  public get versionBtn(): { label: string, additionalClasses: string, title: string, icon?: EvtIconInfo } {
+    return {
+      label: this.versions.length > 0 ? '' : 'addVersion',
+      title: this.versions.length > 0 ? 'addVersion' : '',
+      additionalClasses: `btn-floating ${this.versions.length > 0 ? 'rounded-circle' : ''}`,
+      icon: { iconSet: 'fas', icon: 'plus' },
+    };
+  }
+
   constructor(
     private evtStatusService: EVTStatusService,
   ) {

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -53,5 +53,7 @@
     "verses": "Verses",
     "page": "Page {{value}}",
     "front": "Front",
-    "mainText": "Main text"
+    "mainText": "Main text",
+    "addVersion": "Add version",
+    "addWitness": "Add witness"
 }
diff --git a/src/assets/i18n/it.json b/src/assets/i18n/it.json
@@ -52,5 +52,7 @@
     "verses": "Versi",
     "page": "Pagina {{value}}",
     "front": "Front",
-    "mainText": "Testo principale"
+    "mainText": "Testo principale",
+    "addVersion": "Aggiungi versione",
+    "addWitness": "Aggiungi testimone"
 }
diff --git a/src/assets/scss/_bootstrapOverrides.scss b/src/assets/scss/_bootstrapOverrides.scss
@@ -1,11 +1,6 @@
 @import './themes';
-// TEMP
-.btn-primary {
-    @include themify($themes) {
-        color: themed('baseColorDark');
-        background-color: themed('baseColorLight');
-        border-color: themed('baseColorLight');
-    }
+.btn-sm {
+    height: 31px;
 }
 
 .badge-info {

diff --git a/src/assets/scss/_themes.scss b/src/assets/scss/_themes.scss
@@ -6,7 +6,11 @@ $themes: (
         secondaryColorLight: #fff,
         panelBackgroundColor: #fff,
         panelTextColor: #000,
-        panelSecondaryBackgroundColor: rgba(255, 255, 255, 0.95)
+        panelSecondaryBackgroundColor: rgba(255, 255, 255, 0.95),
+        toolsBackground: #fff,
+        toolsBackgroundDarker: #ccc,
+        toolsColor: #000,
+        toolsColorActive: #ffdd00
     ),    
     modern: (
         baseColorDark: #263238,
@@ -15,7 +19,11 @@ $themes: (
         secondaryColorLight: #ECEFF1,
         panelBackgroundColor: #fff,
         panelTextColor: #000,
-        panelSecondaryBackgroundColor: rgba(236, 239, 241, 0.95)
+        panelSecondaryBackgroundColor: rgba(236, 239, 241, 0.95),
+        toolsBackground: #ECEFF1,
+        toolsColor: #263238,
+        toolsBackgroundDarker: #b0bec5,
+        toolsColorActive: #ffdd00
     ),
     classic: (
         baseColorDark: rgb(54, 45, 40),
@@ -24,7 +32,11 @@ $themes: (
         secondaryColorLight: rgb(245, 234, 212),
         panelBackgroundColor: #fff,
         panelTextColor: #000,
-        panelSecondaryBackgroundColor: rgba(236, 239, 241, 0.95)
+        panelSecondaryBackgroundColor: rgba(236, 239, 241, 0.95),
+        toolsBackground: #f5ead4,
+        toolsColor: rgb(54, 45, 40),
+        toolsBackgroundDarker: #ccc4ba,
+        toolsColorActive: #ffdd00
     ),
 );