* Fix styles expand chevron states.

* Add more constrains to source data buttons. * Improve datasource config UI for error states.
ndsev · Sep 19, 2024 · e477897 · e477897
1 parent a41599c
commit e477897
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 18 deletions.
diff --git a/erdblick_app/app/datasources.component.ts b/erdblick_app/app/datasources.component.ts
@@ -97,16 +97,17 @@ export class ArrayTypeComponent extends FieldArrayType {}
         <!--            </div>-->
         <!--        </p-dialog>-->
         <p-dialog header="DataSource Configuration Editor" [(visible)]="dsService.configDialogVisible" [modal]="false"
-                  #editorDialog class="editor-dialog" (onShow)="loadConfigEditor()">
+                  #editorDialog class="editor-dialog" (onShow)="loadConfigEditor()" [style]="{'min-height': '14em', 'min-width': '36em'}">
             <p *ngIf="dsService.errorMessage">{{ dsService.errorMessage }}</p>
             <div [ngClass]="{'loading': dsService.loading || dsService.errorMessage }">
                 <editor [loadFun]="loadEditedConfig" [saveFun]="saveEditedConfig"></editor>
             </div>
             <div class="spinner" *ngIf="dsService.loading">
                 <p-progressSpinner ariaLabel="loading"/>
             </div>
-            <div style="margin: 0.5em 0; display: flex; flex-direction: row; align-content: center; justify-content: space-between;">
-                <div style="display: flex; flex-direction: row; align-content: center; gap: 0.5em;">
+            <div style="margin: 0.5em 0; display: flex; flex-direction: row; align-content: center; justify-content: space-between; bottom: 1em; 
+                                position: fixed; ">
+                <div *ngIf="!dsService.errorMessage" style="display: flex; flex-direction: row; align-content: center; gap: 0.5em;">
                     <p-button (click)="applyEditedDatasourceConfig()" label="Apply" icon="pi pi-check"
                               [disabled]="!wasModified"></p-button>
                     <p-button (click)="closeEditorDialog($event)" [label]='this.wasModified ? "Discard" : "Cancel"'
@@ -116,6 +117,9 @@ export class ArrayTypeComponent extends FieldArrayType {}
                         <div>Press <span style="color: grey">Esc</span> to quit without saving</div>
                     </div>
                 </div>
+                <div *ngIf="dsService.errorMessage" style="display: flex; flex-direction: row; align-content: center; gap: 0.5em;">
+                    <p-button (click)="closeEditorDialog($event)" label="Close" icon="pi pi-times"></p-button>
+                </div>
             </div>
         </p-dialog>
     `,

diff --git a/erdblick_app/app/feature.panel.component.ts b/erdblick_app/app/feature.panel.component.ts
@@ -83,13 +83,12 @@ interface Column {
                                 <p-buttonGroup *ngIf="rowData['sourceDataReferences']"
                                                class="source-data-ref-container">
                                     <ng-template ngFor let-item [ngForOf]="rowData.sourceDataReferences">
-                                        <p-button
+                                        <p-button class="source-data-button"
                                                 (click)="showSourceData($event, item)"
                                                 severity="secondary"
                                                 label="{{ item.qualifier.substring(0, 1).toUpperCase() }}"
                                                 pTooltip="Go to {{ item.qualifier }} Source Data"
-                                                tooltipPosition="bottom"
-                                        />
+                                                tooltipPosition="bottom" />
                                     </ng-template>
                                 </p-buttonGroup>
                             </div>
@@ -156,15 +155,6 @@ interface Column {
             font-style: italic;
         }
 
-        .source-data-ref-container {
-            button {
-                width: 1.1em;
-                height: 1em;
-                padding: 0.1em;
-                margin-bottom: 0.2em;
-            }
-        }
-
         @media only screen and (max-width: 56em) {
             .resizable-container-expanded {
                 height: calc(100vh - 3em);

diff --git a/erdblick_app/app/map.panel.component.ts b/erdblick_app/app/map.panel.component.ts
@@ -101,7 +101,8 @@ import {DataSourcesService} from "./datasources.service";
                             <div class="font-bold white-space-nowrap"
                                  style="margin-left: 0.5em; display: flex; align-items: center;">
                                 <span onEnterClick *ngIf="style.value.options.length" class="material-icons"
-                                      [ngClass]="{'rotated-icon': !style.value.params.showOptions}"
+                                      [ngClass]="{'rotated-icon': !style.value.params.showOptions || !style.value.params.visible, 
+                                                  'disabled': !style.value.params.visible}"
                                       style="font-size: 1.5em; margin-left: -0.75em; margin-right: -0.25em; cursor: pointer"
                                       (click)="expandStyle(style.key)" tabindex="0">
                                     expand_more
@@ -213,7 +214,12 @@ import {DataSourcesService} from "./datasources.service";
         </p-dialog>
         <datasources></datasources>
     `,
-    styles: [``]
+    styles: [`
+        .disabled {
+            pointer-events: none;
+            opacity: 0.5;
+        }
+    `]
 })
 export class MapPanelComponent {
     editorDialogVisible: boolean = false;

diff --git a/erdblick_app/app/sourcedata.panel.component.ts b/erdblick_app/app/sourcedata.panel.component.ts
@@ -260,7 +260,7 @@ export class SourceDataPanelComponent implements OnInit, AfterViewInit, OnDestro
         }
 
         // Virtual row index (visible row index) of the first highlighted row, or undefined.
-        let firstHighlightedItemIndex : number | undefined;
+        let firstHighlightedItemIndex: number | undefined;
 
         let select = (node: TreeTableNode, parents: TreeTableNode[], highlight: boolean, virtualRowIndex: number) => {
             if (!node.data) {

diff --git a/erdblick_app/styles.scss b/erdblick_app/styles.scss
@@ -195,6 +195,21 @@ body {
       direction: ltr;
     }
 
+    .source-data-ref-container {
+      button {
+        width: 1.1em;
+        height: 1em;
+        padding: 0.1em;
+        margin-bottom: 0.2em;
+        font-family: monospace;
+        font-size: 1em;
+      }
+
+      span {
+        font-family: monospace;
+      }
+    }
+
     .p-tree {
       border: none;
       padding: 0;