Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Design paper-cuts #2432

Merged
merged 13 commits into from
Dec 18, 2023
Merged

Design paper-cuts #2432

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
5585fa1
change of font sizes
YohannParis Dec 18, 2023
ca37e1f
fix slider panel header orientation
YohannParis Dec 18, 2023
178593d
Change Cards to a different icon
YohannParis Dec 18, 2023
1e66f2f
Update input padding default
YohannParis Dec 18, 2023
9f237f4
add border for active asset
YohannParis Dec 18, 2023
b639997
Change the hader of operator to be h6
YohannParis Dec 18, 2023
0703466
bring back accordion design to og
YohannParis Dec 18, 2023
78d9cc1
Put the arrow colour back to normal
YohannParis Dec 18, 2023
7971674
add background-color for model diagram
YohannParis Dec 18, 2023
486a6ce
Move the search bar to the data-explorte
YohannParis Dec 18, 2023
491e00b
Merge branch 'main' into paper-cuts
YohannParis Dec 18, 2023
dda95d7
fix
YohannParis Dec 18, 2023
bfdfe42
Merge branch 'main' into paper-cuts
YohannParis Dec 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions packages/client/hmi-client/src/assets/css/theme/_fonts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,17 @@ h2 {
}

h4 {
font-size: 20px;
letter-spacing: 0.15px;
font-size: $fontBodyLarge;
}

h5 {
font-size: 16px;
font-size: $fontBodyMedium;
}

h6 {
font-size: 14px;
font-size: $fontBodySmall;
}

h7 {
font-size: var(--font-caption);
}
font-size: $fontCaption;
}
11 changes: 6 additions & 5 deletions packages/client/hmi-client/src/assets/css/theme/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,13 +35,13 @@ $fontBodySmall: 14px;
$fontBodyMedium: 16px;
$fontBodyLarge: 18px;
$fontFamily: Figtree, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif !default;
$fontSize: $fontBodyMedium;
$fontSize: $fontBodySmall;
$fontWeight: 400 !default;
$fontWeightSemiBold: 600;

//global
$textColor: rgb(16, 24, 40);
$textSecondaryColor: $emphasis-medium !default;
$textSecondaryColor: $emphasis-medium !default;
$borderRadius: 4px !default;
$mediumBorderRadius: 6px !default;
$bigBorderRadius: 8px !default;
Expand All @@ -58,6 +58,7 @@ $disabledOpacity: .38 !default;
$maskBg: rgba(0, 0, 0, 0.32) !default;
$loadingIconFontSize: 2rem !default;
$errorColor: #B00020 !default;
$padding: .5rem !default;

//selected state
$highlightBg: #E9FFFC;
Expand Down Expand Up @@ -86,7 +87,7 @@ $actionIconHoverColor: $textSecondaryColor !default;
$actionIconBorderRadius: 50% !default;

//input field (e.g. inputtext, spinner, inputmask)
$inputPadding: 1rem 1rem !default;
$inputPadding: $padding $padding !default;
$inputTextFontSize: $fontSize;
$inputBg: #ffffff !default;
$inputTextColor: $emphasis-high !default;
Expand Down Expand Up @@ -693,7 +694,7 @@ $overlayMenuBg: $menuBg !default;
$overlayMenuBorder: 0 none !default;
$overlayMenuShadow: 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12) !default;
$verticalMenuPadding: .5rem 0 !default;
$menuSeparatorMargin: .5rem 0 !default;
$menuSeparatorMargin: .5rem 0 !default;

$breadcrumbPadding: 1rem !default;
$breadcrumbBg: #ffffff !default;
Expand Down Expand Up @@ -956,4 +957,4 @@ $petri-inputBox: var(--surface-0);
--node-header-hover: var(--text-color-subdued);
--z-index-modal: 1000;
--keyboard-zindex: calc(var(--z-index-modal) + 100);
}
}
5 changes: 2 additions & 3 deletions packages/client/hmi-client/src/assets/css/theme/designer/components/panel/_accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@

.p-accordion-toggle-icon {
margin-right: $inlineSpacing;
color: var(--text-color-subdued);
}

&:focus {
Expand Down Expand Up @@ -77,7 +76,7 @@
border-bottom-left-radius: $borderRadius;

}

.p-accordion-tab {
margin-bottom: $accordionSpacing;

Expand Down Expand Up @@ -132,4 +131,4 @@
}
}
}
}
}
6 changes: 1 addition & 5 deletions packages/client/hmi-client/src/assets/css/theme/extensions/_accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,7 @@
border-bottom-right-radius: $borderRadius;
}



.p-accordion-toggle-icon {
order: 1;
margin-left: auto;
transition: transform $transitionDuration;
}

Expand Down Expand Up @@ -54,4 +50,4 @@
color: var(--text-color-subdued);
content: ' (' attr(data-count)')';
}
}
}
13 changes: 8 additions & 5 deletions ...ges/client/hmi-client/src/components/model/petrinet/model-diagrams/tera-model-diagram.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -469,11 +469,6 @@ section math-editor {
justify-content: center;
}

.edit-button {
margin-left: 5px;
margin-right: 5px;
}

/* Let svg dynamically resize when the sidebar opens/closes or page resizes */
:deep(.graph-element svg) {
width: 100%;
Expand All @@ -492,6 +487,14 @@ section math-editor {
background-color: var(--surface-secondary);
height: 100%;
}

:deep(.graph-element .p-button) {
&,
&:hover {
background-color: var(--surface-secondary);
}
}

.legend {
position: absolute;
bottom: 0;
Expand Down
43 changes: 0 additions & 43 deletions packages/client/hmi-client/src/components/navbar/tera-navbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,6 @@
</div>
<Menu ref="navigationMenu" :model="navMenuItems" :popup="true" class="navigation-menu" />
</section>
<tera-searchbar
v-if="active"
class="search-bar"
ref="searchBarRef"
:show-suggestions="showSuggestions"
@query-changed="updateRelatedTerms"
@toggle-search-by-example="searchByExampleModalToggled"
/>
<section v-if="active" class="header-right">
<Avatar :label="userInitials" class="avatar m-2" shape="circle" @click="showUserMenu" />
<Menu ref="userMenu" :model="userMenuItems" :popup="true" />
Expand All @@ -38,12 +30,6 @@
</template>
</Dialog>
</section>
<aside class="suggested-terms" v-if="!isEmpty(terms) && isDataExplorer">
Suggested terms:
<Chip v-for="term in terms" :key="term" removable remove-icon="pi pi-times">
<span @click="searchBarRef?.addToQuery(term)">{{ term }}</span>
</Chip>
</aside>
<Teleport to="body">
<tera-modal
v-if="isEvaluationScenarioModalVisible"
Expand Down Expand Up @@ -124,17 +110,13 @@
<script setup lang="ts">
import { computed, ref, watch, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { isEmpty } from 'lodash';
import Avatar from 'primevue/avatar';
import Button from 'primevue/button';
import Chip from 'primevue/chip';
import Dialog from 'primevue/dialog';
import Menu from 'primevue/menu';
import { MenuItem } from 'primevue/menuitem';
import TeraSearchbar from '@/components/navbar/tera-searchbar.vue';
import { RoutePath, useCurrentRoute } from '@/router/index';
import { RouteMetadata, RouteName } from '@/router/routes';
import { getRelatedTerms } from '@/services/data';
import useAuthStore from '@/stores/auth';
import InputText from 'primevue/inputtext';
import TeraModal from '@/components/widgets/tera-modal.vue';
Expand All @@ -146,7 +128,6 @@ import { useProjects } from '@/composables/project';

defineProps<{
active: boolean;
showSuggestions: boolean;
}>();

/*
Expand Down Expand Up @@ -369,30 +350,6 @@ function closeLogoutDialog() {
isLogoutDialog.value = false;
}

/*
* Search
*/
const searchBarRef = ref();
const terms = ref<string[]>([]);

async function updateRelatedTerms(query?: string) {
if (query || query === '' || !isDataExplorer.value) terms.value = await getRelatedTerms(query);
}

function searchByExampleModalToggled() {
// TODO
// toggle the search by example modal represented by the component search-by-example
// which may be used as follows
/*
<search-by-example
v-if="searchByExampleModal"
:item="searchByExampleItem"
@search="onSearchByExample"
@hide="searchByExampleModal = false"
/>
*/
}

watch(
() => useProjects().allProjects.value,
() => {
Expand Down
4 changes: 2 additions & 2 deletions packages/client/hmi-client/src/components/operator/tera-operator-header.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<header :class="`${status} ${interactionClasses}`">
<h5>{{ name }}</h5>
<h6>{{ name }}</h6>
<Button
icon="pi pi-ellipsis-v"
class="p-button-icon-only p-button-text p-button-rounded"
Expand Down Expand Up @@ -99,7 +99,7 @@ header {
color: var(--gray-0);
}

h5 {
h6 {
overflow: hidden;
text-overflow: ellipsis;
font-weight: normal;
Expand Down
2 changes: 1 addition & 1 deletion packages/client/hmi-client/src/components/widgets/tera-slider-panel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,7 @@ i.slider-header-item {
}

.slider-tab-header h5 {
transform: rotate(180deg);
transform: rotate(0deg);
writing-mode: vertical-lr;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/client/hmi-client/src/page/Home.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ const sortOptions = [

const view = ref(ProjectsView.Cards);
const viewOptions = ref([
{ value: ProjectsView.Cards, icon: 'pi pi-image' },
{ value: ProjectsView.Cards, icon: 'pi pi-credit-card' },
{ value: ProjectsView.Table, icon: 'pi pi-list' }
]);

Expand Down
Loading