Fix style of builtin template options not matching

Match styles of builtin and default template button to the styles of the growing list buttons. Differentiate the add template button better from other buttons.
UST-QuAntiL · Sep 26, 2023 · 062cb05 · 062cb05
1 parent af01ee2
commit 062cb05
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/src/app/components/plugin-sidebar/plugin-sidebar.component.html b/src/app/components/plugin-sidebar/plugin-sidebar.component.html
@@ -31,20 +31,25 @@ <h2 class="template-header">
                     </h2>
                 </summary>
                 <mat-divider></mat-divider>
-                <button mat-button class="w-100 all-plugins-button" (click)="selectTemplate(null)"
-                    *ngIf="defaultTemplate">
+                <button mat-button
+                    class="w-100 builtin-template-button {{(templateId==null && useExternalDefaultTemplate) ? 'active' : ''}}"
+                    (click)="selectTemplate(null)" *ngIf="defaultTemplate">
                     use default template
                 </button>
                 <mat-divider *ngIf="defaultTemplate"></mat-divider>
-                <button mat-button class="w-100 all-plugins-button" (click)="selectTemplate(null, 'all-plugins')">
+                <button mat-button
+                    class="w-100 builtin-template-button {{(templateId==null && !useExternalDefaultTemplate) ? 'active' : ''}}"
+                    (click)="selectTemplate(null, 'all-plugins')">
                     show all plugins
                 </button>
                 <mat-divider></mat-divider>
                 <qhana-growing-list [rels]="['ui-template', 'collection']" [newItemRels]="['ui-template']"
                     [highlighted]="highlightedTemplates" [highlightByKey]="'uiTemplateId'"
                     (clickItem)="selectTemplate($event)"></qhana-growing-list>
                 <mat-divider></mat-divider>
-                <button mat-ripple class="sidebar-button w-100" (click)="createTemplate()">Create Template</button>
+                <button class="new-template-button" mat-stroked-button (click)="createTemplate()">
+                    Create Template
+                </button>
             </details>
             <mat-form-field class="full-width" color="primary"
                 [hidden]="activeArea == 'detail' || activeArea == 'templates'">

diff --git a/src/app/components/plugin-sidebar/plugin-sidebar.component.sass b/src/app/components/plugin-sidebar/plugin-sidebar.component.sass
@@ -37,10 +37,23 @@
     padding-inline: 1rem
     cursor: pointer
 
-.all-plugins-button
+.builtin-template-button
     min-height: 3rem
     display: inline-flex
     align-items: center
+    font-size: initial
+
+.builtin-template-button:hover, .builtin-template-button:focus, .builtin-template-button:active, .builtin-template-button.active
+    background-color: var(--primary-lighter)
+
+@media (prefers-color-scheme: dark)
+    .builtin-template-button:hover, .builtin-template-button:focus, .builtin-template-button:active, .builtin-template-button.active
+        background-color: var(--primary)
+
+.new-template-button
+    width: calc(100% - 1rem)
+    margin-inline: 0.5rem
+    margin-block-start: 1rem
 
 .plugin-group
     margin-block-end: 1rem