Jamie simulate page design polish (#4682)

Co-authored-by: Yohann Paris <[email protected]> Co-authored-by: Daniel Chang <[email protected]>
DARPA-ASKEM · Sep 6, 2024 · ac26711 · ac26711
1 parent ea08561
commit ac26711
Show file tree

Hide file tree

Showing 5 changed files with 237 additions and 90 deletions.
diff --git a/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue b/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue
@@ -75,7 +75,7 @@ header .title {
 header .tabs-row {
  justify-content: space-between;
  align-items: end;
- gap: var(--gap-1);
+ gap: var(--gap-4);
 }
 
 header .tabs-row:deep(.p-tabview .p-tabview-panels) {
@@ -98,12 +98,15 @@ a {
 :deep(.p-tabview .p-tabview-nav li .p-tabview-nav-link:focus) {
  background-color: var(--surface-section);
 }
+:deep(.p-tabview .p-tabview-nav li .p-tabview-nav-link) {
+ padding: var(--gap-3) var(--gap-6);
+}
 
 .actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--gap-small);
- padding-bottom: var(--gap-small);
+ padding-bottom: var(--gap-1);
  flex: 1;
 }
 

diff --git a/packages/client/hmi-client/src/components/operator/tera-operator-annotation.vue b/packages/client/hmi-client/src/components/operator/tera-operator-annotation.vue
@@ -17,7 +17,7 @@
  </div>
  </template>
  <div v-else-if="!isEmpty(annotation)" class="annotation">
- <p @click="isEditing = true">{{ annotation }}<span class="pi pi-pencil ml-2 text-xs" /></p>
+ <p @click="isEditing = true">{{ annotation }}<span class="pi pi-pencil ml-2 text-xs edit-button" /></p>
  </div>
  </section>
  <Button
@@ -81,6 +81,7 @@ watch(
 section {
  display: flex;
  flex: 1;
+
  &:empty {
  display: none;
  }
@@ -114,6 +115,11 @@ section {
  }
  }
 
+ .edit-button {
+ color: var(--text-color-secondary);
+ cursor: pointer;
+ }
+
  /* In drilldown */
  &:not(.in-node) {
  padding-bottom: var(--gap-small);

diff --git a/packages/client/hmi-client/src/components/operator/tera-operator-output-summary.vue b/packages/client/hmi-client/src/components/operator/tera-operator-output-summary.vue
@@ -17,7 +17,7 @@
  </div>
  </template>
  <div v-else-if="isLoading === false" class="summary">
- <p else @click="isEditing = true">{{ summaryText }}<span class="pi pi-pencil ml-2 text-xs" /></p>
+ <p else @click="isEditing = true">{{ summaryText }}<span class="pi pi-pencil ml-2 text-xs edit-button" /></p>
  </div>
  <div v-else-if="isLoading" class="summary">
  <img src="@assets/svg/icons/magic.svg" alt="Magic icon" />
@@ -171,5 +171,10 @@ section {
  &.is-editing {
  padding: 0;
  }
+
+ .edit-button {
+ color: var(--text-color-secondary);
+ cursor: pointer;
+ }
 }
 </style>