diff --git a/models/calendar/src/index.ts b/models/calendar/src/index.ts index bc3d01d9ae..39048eee9d 100644 --- a/models/calendar/src/index.ts +++ b/models/calendar/src/index.ts @@ -259,7 +259,7 @@ export function createModel (builder: Builder): void { core.space.Model, { label: calendar.string.Calendar, - icon: calendar.icon.Calendar, + icon: calendar.icon.CalendarView, component: calendar.component.CalendarView }, calendar.viewlet.Calendar diff --git a/models/controlled-documents/src/index.ts b/models/controlled-documents/src/index.ts index d095828e9f..5bac1d3661 100644 --- a/models/controlled-documents/src/index.ts +++ b/models/controlled-documents/src/index.ts @@ -181,6 +181,7 @@ export function createModel (builder: Builder): void { query: { [documents.mixin.DocumentTemplate]: { $exists: false } }, + icon: documents.icon.Library, title: documents.string.Documents, config: [ ['effective', documents.string.Effective, {}], diff --git a/models/document/src/index.ts b/models/document/src/index.ts index 7ffab05254..a3f167cc0e 100644 --- a/models/document/src/index.ts +++ b/models/document/src/index.ts @@ -533,6 +533,7 @@ function defineApplication (builder: Builder): void { component: workbench.component.SpecialView, componentProps: { _class: document.class.Teamspace, + icon: view.icon.List, label: document.string.Teamspaces }, position: 'top' diff --git a/models/drive/src/index.ts b/models/drive/src/index.ts index c7830fcc62..2795f36780 100644 --- a/models/drive/src/index.ts +++ b/models/drive/src/index.ts @@ -657,7 +657,7 @@ function defineApplication (builder: Builder): void { core.space.Model, { label: drive.string.Drive, - icon: drive.icon.Drive, + icon: drive.icon.DriveApplication, alias: driveId, hidden: false, locationResolver: drive.resolver.Location, @@ -667,7 +667,7 @@ function defineApplication (builder: Builder): void { id: 'browser', accessLevel: AccountRole.User, label: drive.string.Drives, - icon: view.icon.List, + icon: drive.icon.Drives, component: workbench.component.SpecialView, componentProps: { _class: drive.class.Drive, diff --git a/models/lead/src/index.ts b/models/lead/src/index.ts index 3dc47ab40a..b1d9057dd0 100644 --- a/models/lead/src/index.ts +++ b/models/lead/src/index.ts @@ -117,7 +117,7 @@ export function createModel (builder: Builder): void { accessLevel: AccountRole.User, componentProps: { _class: lead.mixin.Customer, - icon: lead.icon.Lead, + icon: contact.icon.Person, label: lead.string.Customers }, position: 'top' @@ -125,12 +125,13 @@ export function createModel (builder: Builder): void { { id: 'funnels', component: workbench.component.SpecialView, - icon: view.icon.List, + icon: lead.icon.Funnels, label: lead.string.Funnels, position: 'bottom', accessLevel: AccountRole.User, componentProps: { _class: lead.class.Funnel, + icon: lead.icon.Funnels, label: lead.string.Funnels, createComponent: lead.component.CreateFunnel, createLabel: lead.string.CreateFunnel diff --git a/models/love/src/index.ts b/models/love/src/index.ts index f0752ee818..4732183984 100644 --- a/models/love/src/index.ts +++ b/models/love/src/index.ts @@ -141,7 +141,6 @@ export function createModel (builder: Builder): void { alias: loveId, hidden: false, position: 'top', - modern: true, component: love.component.Main }, love.app.Love diff --git a/models/products/src/index.ts b/models/products/src/index.ts index bb35bd17bd..680b956c73 100644 --- a/models/products/src/index.ts +++ b/models/products/src/index.ts @@ -455,6 +455,7 @@ function defineApplication (builder: Builder): void { component: workbench.component.SpecialView, componentProps: { _class: products.class.Product, + icon: products.icon.Product, label: products.string.Products }, position: 'top' @@ -466,6 +467,7 @@ function defineApplication (builder: Builder): void { component: workbench.component.SpecialView, componentProps: { _class: products.class.ProductVersion, + icon: products.icon.ProductVersion, label: products.string.ProductVersions }, position: 'top' diff --git a/models/recruit/src/index.ts b/models/recruit/src/index.ts index 03100bdb56..50c7823292 100644 --- a/models/recruit/src/index.ts +++ b/models/recruit/src/index.ts @@ -226,6 +226,7 @@ export function createModel (builder: Builder): void { position: 'event', componentProps: { labelTasks: recruit.string.Applications, + icon: recruit.icon.AssignedToMe, _class: recruit.class.Applicant, config: [ ['assigned', view.string.Assigned, {}], diff --git a/models/setting/src/index.ts b/models/setting/src/index.ts index d5b8263868..866d646ec1 100644 --- a/models/setting/src/index.ts +++ b/models/setting/src/index.ts @@ -349,8 +349,7 @@ export function createModel (builder: Builder): void { icon: setting.icon.Setting, alias: settingId, hidden: true, - component: setting.component.Settings, - modern: true + component: setting.component.Settings }, setting.ids.SettingApp ) diff --git a/models/time/src/index.ts b/models/time/src/index.ts index 7eebe98c1c..77ad3f89fa 100644 --- a/models/time/src/index.ts +++ b/models/time/src/index.ts @@ -197,7 +197,6 @@ export function createModel (builder: Builder): void { alias: timeId, hidden: false, position: 'top', - modern: true, component: time.component.Me }, time.app.Me diff --git a/models/tracker/src/index.ts b/models/tracker/src/index.ts index 4c1e404641..b41eb03e95 100644 --- a/models/tracker/src/index.ts +++ b/models/tracker/src/index.ts @@ -324,6 +324,7 @@ function defineApplication ( icon: tracker.icon.MyIssues, component: tracker.component.MyIssues, componentProps: { + icon: tracker.icon.MyIssues, config: [ ['assigned', view.string.Assigned, {}], ['active', tracker.string.Active, {}], @@ -341,6 +342,7 @@ function defineApplication ( component: tracker.component.Issues, componentProps: { space: undefined, + icon: tracker.icon.Issues, title: tracker.string.AllIssues, config: [ ['all', tracker.string.All, {}], @@ -360,6 +362,7 @@ function defineApplication ( spaceClass: tracker.class.Project, componentProps: { _class: tracker.class.Project, + icon: view.icon.List, label: tracker.string.AllProjects } } @@ -380,6 +383,7 @@ function defineApplication ( icon: tracker.icon.Issues, component: tracker.component.Issues, componentProps: { + icon: tracker.icon.Issues, title: tracker.string.Issues, config: [ ['all', tracker.string.All, {}], diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte index 3f75b7fbc2..7498f611fb 100644 --- a/packages/panel/src/components/Panel.svelte +++ b/packages/panel/src/components/Panel.svelte @@ -45,9 +45,14 @@ export let withoutContentScroll: boolean = false export let customAside: ButtonItem[] | undefined = undefined export let selectedAside: string | boolean = customAside ? customAside[0].id : isAside - export let kind: 'default' | 'modern' = 'default' - export let printHeader = true - export let printAside = false + export let printHeader: boolean = true + export let printAside: boolean = false + export let adaptive: 'default' | 'freezeActions' | 'doubleRow' | 'disabled' = 'disabled' + export let hideBefore: boolean = false + export let hideSearch: boolean = true + export let hideActions: boolean = false + export let hideExtra: boolean = false + export let overflowExtra: boolean = false export function getAside (): string | boolean { return panel.getAside() @@ -115,13 +120,18 @@ on:close {allowClose} {embedded} - {kind} {floatAside} bind:useMaxWidth {isFullSize} {customAside} {printHeader} {printAside} + {adaptive} + {hideBefore} + {hideSearch} + {hideActions} + {hideExtra} + {overflowExtra} bind:selectedAside on:select={(result) => { selectedAside = result.detail @@ -144,7 +154,6 @@ {#if isUtils && $$slots.utils} -
{/if} @@ -196,6 +205,10 @@ + + + + diff --git a/packages/presentation/src/components/SpacesMultiPopup.svelte b/packages/presentation/src/components/SpacesMultiPopup.svelte index 986a6a5ad6..3632e15e96 100644 --- a/packages/presentation/src/components/SpacesMultiPopup.svelte +++ b/packages/presentation/src/components/SpacesMultiPopup.svelte @@ -31,7 +31,6 @@ import SpaceInfo from './SpaceInfo.svelte' export let _classes: Ref>[] = [] - export let allowDeselect: boolean = false export let titleDeselect: IntlString | undefined = undefined export let placeholder: IntlString = presentation.string.Search export let placeholderParam: any | undefined = undefined @@ -100,26 +99,21 @@
{#each shownSpaces as space} {/each}
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss index fb038966f0..a5542c1bc5 100644 --- a/packages/theme/styles/_layouts.scss +++ b/packages/theme/styles/_layouts.scss @@ -189,7 +189,7 @@ input.search { .inline-flex { display: inline-flex; } .flex-grow { flex-grow: 1; } .flex-no-shrink { flex-shrink: 0; } -.flex-shrink { flex-shrink: 1; } +.flex-shrink { flex-shrink: 1 !important; } .flex-wrap { flex-wrap: wrap !important; } .flex-nowrap { flex-wrap: nowrap !important; } .flex-baseline { @@ -270,7 +270,7 @@ input.search { flex-direction: column; align-items: stretch; } -.justify-between { justify-content: space-between; } +.justify-between { justify-content: space-between !important; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end !important; } .justify-center { justify-content: center; } @@ -309,6 +309,7 @@ input.search { .icon { color: var(--theme-dark-color); + &.primary { color: var(--button-primary-BackgroundColor); } &.circle { padding: .25rem; background-color: var(--avatar-bg-color); @@ -345,7 +346,11 @@ input.search { margin-left: .75rem; } &:hover { - .icon { color: var(--theme-caption-color); } + .icon { + color: var(--theme-caption-color); + + &.primary { color: var(--button-primary-hover-BackgroundColor); } + } .label { color: var(--theme-caption-color); @@ -483,6 +488,7 @@ input.search { } /* Margins & Paddings */ +.ml-0 { margin-left: 0 !important; } .ml-0-5 { margin-left: .125rem; } .ml-1 { margin-left: .25rem; } .ml-1-5 { margin-left: .375rem; } @@ -508,6 +514,7 @@ input.search { .mr-8 { margin-right: 2rem; } .mr-10 { margin-right: 2.5rem; } .mr-32 { margin-right: 8rem } +.mt--1 { margin-top: -.25rem; } .mt-0-5 { margin-top: .125rem; } .mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } @@ -731,6 +738,7 @@ input.search { .min-h-9 { min-height: 2.25rem; } .min-h-11 { min-height: 2.75rem; } .min-h-12 { min-height: 3rem; } +.min-h-13 { min-height: 3.25rem; } .min-h-16 { min-height: 4rem; } .min-h-30 { min-height: 7.5rem; } .min-h-60 { min-height: 15rem; } @@ -958,6 +966,7 @@ a.no-line { &.bordered { border-color: var(--theme-button-border); } } +.overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .overflow-x-auto, diff --git a/packages/theme/styles/_lumia-colors.scss b/packages/theme/styles/_lumia-colors.scss index f6f2b1ffb7..77fc78e02e 100644 --- a/packages/theme/styles/_lumia-colors.scss +++ b/packages/theme/styles/_lumia-colors.scss @@ -53,6 +53,7 @@ --global-popover-hover-BackgroundColor: #1F2737; --global-popover-BorderColor: #A5BDFF1A; --global-primary-LinkColor: #4D7FF5; + --global-primary-IconColor: #ffffff; --global-primary-TextColor: #FFFFFF; --global-secondary-TextColor: #C1C9D6; --global-tertiary-TextColor: #8E99AF; @@ -66,6 +67,7 @@ --global-higlight-Color: #F76E53; --global-accent-SkyText: #B9D1F5; --global-accent-BackgroundColor: #204DC8; + --global-on-nuance-TextColor: #041d7d; --global-no-priority-PriorityColor: #8E99AF; --global-low-PriorityColor: #6493FF; @@ -147,6 +149,7 @@ --global-popover-hover-BackgroundColor: #1F2737; --global-popover-BorderColor: #A5BDFF26; --global-primary-LinkColor: #3566E2; + --global-primary-IconColor: #0f121a; --global-primary-TextColor: #0F121A; --global-secondary-TextColor: #5A667E; --global-tertiary-TextColor: #7B879E; @@ -160,6 +163,7 @@ --global-higlight-Color: #F76E53; --global-accent-SkyText:#B9D1F5; --global-accent-BackgroundColor: #3566E2; + --global-on-nuance-TextColor: #2553cf; --global-no-priority-PriorityColor: #7B879E; --global-low-PriorityColor: #3566E2; diff --git a/packages/theme/styles/button.scss b/packages/theme/styles/button.scss index a9a40ca47a..4159e78912 100644 --- a/packages/theme/styles/button.scss +++ b/packages/theme/styles/button.scss @@ -84,7 +84,7 @@ &:hover .btn-icon { color: var(--theme-caption-color); } &:not(.no-focus):focus { - &:not(.sh-filter) { box-shadow: 0 0 0 2px var(--primary-button-outline); } + &:not(.sh-filter, .regular) { box-shadow: 0 0 0 2px var(--primary-button-outline); } &.sh-filter { border-color: var(--primary-button-outline); } } @@ -109,7 +109,8 @@ &.pressed:hover { background-color: var(--theme-button-pressed); } &:focus { background-color: var(--theme-button-focused); - border-color: var(--theme-button-focused-border); + outline: 2px solid var(--global-focus-BorderColor); + outline-offset: 2px; } &:disabled { background-color: var(--theme-button-disabled); } &.selected { diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss index 739840fe65..87c6982bc2 100644 --- a/packages/theme/styles/common.scss +++ b/packages/theme/styles/common.scss @@ -25,12 +25,16 @@ .font-bold-14, .paragraph-regular-14, .heading-medium-16, +.heading-bold-16, +.heading-ui-H2, .heading-medium-20, .heading-bold-20 { font-family: var(--font-family); font-style: normal; - color: var(--global-primary-TextColor); + &:not(.secondary, .tertiary) { color: var(--global-primary-TextColor); } + &.secondary { color: var(--global-secondary-TextColor); } + &.tertiary { color: var(--global-tertiary-TextColor); } &:not(.line-height-auto) { line-height: 1rem; } } .font-regular-11, @@ -63,15 +67,24 @@ .heading-medium-20 { font-weight: 500; } +.heading-ui-H2 { + font-weight: 600; +} .font-bold-12, .font-bold-14, +.heading-bold-16, .heading-bold-20 { font-weight: 700; } -.heading-medium-16 { +.heading-medium-16, +.heading-bold-16 { font-size: 1rem; line-height: 1.125rem; } +.heading-ui-H2 { + font-size: 1.125rem; + line-height: 1.25rem; +} .heading-medium-20, .heading-bold-20 { font-size: 1.25rem; @@ -143,13 +156,8 @@ filter: drop-shadow(2px 0 1px rgba(0, 0, 0, .2)); z-index: 450; - &.portrait { - left: 0; - } - &.landscape { - .modern-app & { left: var(--app-panel-width); } - :not(.modern-app) & { left: calc(var(--app-panel-width) + 1px); } - } + &.portrait { left: 0; } + &.landscape { left: var(--app-panel-width); } } } .antiPanel-component { diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss index 3865098752..055395b24b 100644 --- a/packages/theme/styles/components.scss +++ b/packages/theme/styles/components.scss @@ -31,6 +31,14 @@ overflow: hidden; background-color: var(--theme-comp-header-color); // var(--global-surface-02-BackgroundColor); } + &.beforeAside { + border-right: none; + border-radius: var(--small-focus-BorderRadius) 0 0 var(--small-focus-BorderRadius); + } + &.aside { + border-left: none; + border-radius: 0 var(--small-focus-BorderRadius) var(--small-focus-BorderRadius) 0; + } } .hulyComponent-content, .hulyComponent-content__container, @@ -44,8 +52,9 @@ min-height: 0; } .hulyComponent-content { - flex-shrink: 0; - + &:not(.noShrink) { + flex-shrink: 0; + } &:not(.withoutMaxWidth) { max-width: 64rem; } @@ -308,15 +317,45 @@ .hulyHeader-container { display: flex; align-items: center; - padding: var(--spacing-1_5) var(--spacing-2); width: 100%; - height: var(--spacing-6_5); + min-width: 0; + min-height: var(--spacing-6_5); + + &:not(.clearPadding) { padding: var(--spacing-1_5) var(--spacing-2); } + &.clearPadding { + padding: 0 var(--spacing-2); + & > .hulyHeader-row { + padding: 0; + min-height: var(--spacing-6_5); + } + } &:not(.hideSeparator) { border-bottom: 1px solid var(--theme-divider-color); // var(--global-surface-02-BorderColor); } - &.topIndent { - margin-top: 1px; + &.topIndent { margin-top: 1px; } + .hulyHeader-row { + display: flex; + align-items: center; + flex-grow: 1; + padding: var(--spacing-1_5) 0; + min-width: 0; + + &:has(.extra.overflow) { padding: 0; } + &:not(.noBorder):first-child { + max-height: var(--spacing-6_5); + border-bottom: 1px solid var(--theme-divider-color); + } + &:nth-child(2) { margin-top: -1px; } + &.between { justify-content: space-between; } + &.reverse { flex-direction: row-reverse; } + &__divider { + margin-top: -1px; + width: 100%; + min-height: 1px; + max-height: 1px; + background-color: var(--theme-divider-color); + } } .hulyHeader-button { display: flex; @@ -347,19 +386,38 @@ .hulyHeader-titleGroup, .hulyHeader-buttonsGroup { display: flex; - align-items: center; min-width: 0; min-height: 0; } .hulyHeader-titleGroup { flex-grow: 1; - gap: var(--spacing-0_5); + + &.withDescription { flex-direction: column; } + &:not(.withDescription) { + align-items: center; + gap: var(--spacing-0_5); + } } .hulyHeader-buttonsGroup { + align-items: center; flex-shrink: 0; - gap: var(--spacing-1); - margin-left: var(--spacing-2); + &.extra { + flex-shrink: 1; + margin-left: var(--spacing-2); + + &.overflow { + overflow-x: auto; + margin: 0 -.25rem 0 1rem; + padding: .25rem; + } + } + &.before { + gap: var(--spacing-0_5); + + &.freezeBefore { min-width: var(--global-small-Size); } + } + &:not(.before) { gap: var(--spacing-1); } &__label { display: flex; flex-direction: column; @@ -368,8 +426,21 @@ color: var(--global-secondary-TextColor); } } - .hulyHotKey-item { - margin-right: .625rem; + .hulyHotKey-item { margin-right: .625rem; } + + &.doubleRow { + flex-direction: column; + align-items: stretch; + flex-shrink: 0; + padding: 0 var(--spacing-2); + + .hulyHeader-row { min-height: var(--spacing-6_5); } + .hulyHeader-buttonsGroup.search { flex-direction: row-reverse; } + .hulyHeader-buttonsGroup.actions { margin-left: 1rem; } + } + &:not(.doubleRow) { + .hulyHeader-buttonsGroup:not(.before) { margin-left: 1rem; } + .hulyHeader-buttonsGroup.search + .hulyHeader-divider + .hulyHeader-buttonsGroup.actions { margin-left: 0; } } } @@ -916,13 +987,13 @@ min-width: 0; .ac-header { - padding: 0.5rem 2.25rem; + padding: var(--spacing-1) var(--spacing-2); // height: 3.5rem; // min-height: 2.5rem; &:not(.withoutBackground) { background-color: var(--theme-comp-header-color); } - &.caption-height { min-height: 3.25rem; } - &.search-start { padding-left: 1.75rem; } + &.caption-height { min-height: 3.5rem; } + &.search-start { padding-left: var(--spacing-3); } &.tabs-start { padding: 0 2.25rem; } &.short { display: flex; @@ -1382,14 +1453,14 @@ &::-webkit-scrollbar-thumb { background-color: var(--scrollbar-bar-color); } &.mask-none { mask-image: none } - &.mask-left { mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1rem); } - &.mask-right { mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 1rem); } + &.mask-left { mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem); } + &.mask-right { mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 1) 2rem); } &.mask-both { mask-image: linear-gradient( to right, rgba(0, 0, 0, 0) 0, - rgba(0, 0, 0, 1) 1rem, - rgba(0, 0, 0, 1) calc(100% - 1rem), + rgba(0, 0, 0, 1) 2rem, + rgba(0, 0, 0, 1) calc(100% - 2rem), rgba(0, 0, 0, 0) 100% ); } diff --git a/packages/theme/styles/panel.scss b/packages/theme/styles/panel.scss index d4de278b75..0b0458fd4d 100644 --- a/packages/theme/styles/panel.scss +++ b/packages/theme/styles/panel.scss @@ -61,7 +61,7 @@ min-width: 0; min-height: 0; } - &.small { padding-bottom: .75rem; } + &.small { padding-bottom: var(--spacing-1_5); } } .hulyNavGroup-container { @@ -291,8 +291,13 @@ height: 100%; min-width: 0; min-height: 0; - + border-radius: var(--small-focus-BorderRadius); + &:not(.rowContent) { flex-direction: column; } + .panel-instance & { + background-color: var(--theme-panel-color); + border: 1px solid var(--theme-divider-color); + } .popupPanel-title { display: flex; @@ -300,7 +305,7 @@ justify-content: stretch; align-items: center; min-width: 0; - min-height: 3.25rem; + min-height: 3.5rem; background-color: var(--theme-comp-header-color); border-bottom: 1px solid var(--theme-divider-color); @@ -347,7 +352,7 @@ width: 100%; height: 100%; background-color: var(--theme-panel-color); - border: 1px solid var(--theme-divider-color); + // border: 1px solid var(--theme-divider-color); border-top: none; border-left: none; @@ -555,15 +560,6 @@ visibility: hidden; } - &.modern { - border: 1px solid transparent; - border-radius: var(--small-focus-BorderRadius); - - .popupPanel-title { - min-height: 3.5rem; - } - } - @media print { overflow: visible; } diff --git a/packages/theme/styles/popups.scss b/packages/theme/styles/popups.scss index 4ff0d05c3c..31e5ae1f23 100644 --- a/packages/theme/styles/popups.scss +++ b/packages/theme/styles/popups.scss @@ -223,16 +223,15 @@ margin-right: .5rem; } .icon, - .check { + div.check { width: 1rem; height: 1rem; color: var(--theme-dark-color); } - .check { + div.check { flex-shrink: 0; - margin-left: .5rem; - &.ml-3 { margin-left: .75rem; } + &:not(.ml-0) { margin-left: .5rem; } } .color { width: .875rem; diff --git a/packages/ui/src/components/Breadcrumbs.svelte b/packages/ui/src/components/Breadcrumbs.svelte index 17710e05e8..4f7cc3c84b 100644 --- a/packages/ui/src/components/Breadcrumbs.svelte +++ b/packages/ui/src/components/Breadcrumbs.svelte @@ -15,24 +15,17 @@ @@ -43,13 +36,13 @@ { if (selected !== i) dispatch('select', i) }} /> {/each} - {#if afterLabel || $$slots.afterLabel} + {#if (afterLabel || $$slots.afterLabel) && !hideAfter} {#if afterLabel}