From 4d7e1a8738cbea4cfca86bb24275c6932059efa4 Mon Sep 17 00:00:00 2001 From: Nicolas Molina Date: Wed, 22 May 2024 17:14:01 -0400 Subject: [PATCH 01/10] save --- core-web/yarn.lock | 67 +++++++++++++++++++++------------------------- 1 file changed, 30 insertions(+), 37 deletions(-) diff --git a/core-web/yarn.lock b/core-web/yarn.lock index 5927a098103b..821fb9b0c933 100644 --- a/core-web/yarn.lock +++ b/core-web/yarn.lock @@ -10838,7 +10838,7 @@ debug@^3.1.0, debug@^3.2.7: dependencies: ms "^2.1.1" -debuglog@*, debuglog@^1.0.1: +debuglog@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492" integrity sha512-syBZ+rnAK3EgMsH2aYEOLUW7mZSY9Gb+0wUMCFsZvcmiz+HigA0LOcq/HoQqVuGG+EKykunc7QG2bzrponfaSw== @@ -13991,7 +13991,7 @@ import-local@^3.0.2: pkg-dir "^4.2.0" resolve-cwd "^3.0.0" -imurmurhash@*, imurmurhash@^0.1.4: +imurmurhash@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea" integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA== @@ -16082,11 +16082,6 @@ lodash-es@^4.17.21: resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee" integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw== -lodash._baseindexof@*: - version "3.1.0" - resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c" - integrity sha512-bSYo8Pc/f0qAkr8fPJydpJjtrHiSynYfYBjtANIgXv5xEf1WlTC63dIDlgu0s9dmTvzRu1+JJTxcIAHe+sH0FQ== - lodash._baseuniq@~4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8" @@ -16095,33 +16090,11 @@ lodash._baseuniq@~4.6.0: lodash._createset "~4.0.0" lodash._root "~3.0.0" -lodash._bindcallback@*: - version "3.0.1" - resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e" - integrity sha512-2wlI0JRAGX8WEf4Gm1p/mv/SZ+jLijpj0jyaE/AXeuQphzCgD8ZQW4oSpoN8JAopujOFGU3KMuq7qfHBWlGpjQ== - -lodash._cacheindexof@*: - version "3.0.2" - resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92" - integrity sha512-S8dUjWr7SUT/X6TBIQ/OYoCHo1Stu1ZRy6uMUSKqzFnZp5G5RyQizSm6kvxD2Ewyy6AVfMg4AToeZzKfF99T5w== - -lodash._createcache@*: - version "3.1.2" - resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093" - integrity sha512-ev5SP+iFpZOugyab/DEUQxUeZP5qyciVTlgQ1f4Vlw7VUcCD8fVnyIqVUEIaoFH9zjAqdgi69KiofzvVmda/ZQ== - dependencies: - lodash._getnative "^3.0.0" - lodash._createset@~4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26" integrity sha512-GTkC6YMprrJZCYU3zcqZj+jkXkrXzq3IPBcF/fIPpNEAB4hZEtXU8zp/RwKOvZl43NUmwDbyRk3+ZTbeRdEBXA== -lodash._getnative@*, lodash._getnative@^3.0.0: - version "3.9.1" - resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5" - integrity sha512-RrL9VxMEPyDMHOd9uFbvMe8X55X16/cGM5IgOKgRElQZutpX89iS6vwl64duTV1/16w5JY7tuFNXqoekmh1EmA== - lodash._root@~3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/lodash._root/-/lodash._root-3.0.1.tgz#fba1c4524c19ee9a5f8136b4609f017cf4ded692" @@ -16197,11 +16170,6 @@ lodash.once@^4.0.0, lodash.once@^4.1.1: resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac" integrity sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg== -lodash.restparam@*: - version "3.6.1" - resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805" - integrity sha512-L4/arjjuq4noiUJpt3yS6KIKDtJwNe2fIYgMqyYYKoeIfV1iEqvPwhCx23o+R9dzouGihDAPN1dTIRWa7zk8tw== - lodash.sortby@^4.7.0: version "4.7.0" resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438" @@ -21911,7 +21879,7 @@ string-length@^4.0.1: char-regex "^1.0.2" strip-ansi "^6.0.0" -"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0": version "4.2.3" resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -21929,6 +21897,15 @@ string-width@^1.0.1: is-fullwidth-code-point "^1.0.0" strip-ansi "^3.0.0" +"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: + version "4.2.3" + resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + string-width@^2.0.0, string-width@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e" @@ -22025,7 +22002,7 @@ stringify-package@^1.0.0, stringify-package@^1.0.1: resolved "https://registry.yarnpkg.com/stringify-package/-/stringify-package-1.0.1.tgz#e5aa3643e7f74d0f28628b72f3dad5cecfc3ba85" integrity sha512-sa4DUQsYciMP1xhKWGuFM04fB0LG/9DlluZoSVywUMRNvzid6XucHK0/90xGxRoHrAaROrcHK1aPKaijCtSrhg== -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": version "6.0.1" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -22053,6 +22030,13 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0: dependencies: ansi-regex "^4.1.0" +strip-ansi@^6.0.0, strip-ansi@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + strip-ansi@^7.0.1: version "7.1.0" resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" @@ -24002,7 +23986,7 @@ worker-farm@^1.6.0, worker-farm@^1.7.0: dependencies: errno "~0.1.7" -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -24037,6 +24021,15 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" +wrap-ansi@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214" From df0b576fa832a4b604516ece2b00d7adcf4744f4 Mon Sep 17 00:00:00 2001 From: Nicolas Molina Date: Fri, 24 May 2024 16:46:57 -0400 Subject: [PATCH 02/10] WIP: implement Tree Select Component into Storybook #28368 --- .../src/stories/primeng/data/Tree.stories.ts | 46 ++-- .../primeng/form/TreeSelect.stories.ts | 229 ++++++++++++++++++ .../components/form/_treeselect.scss | 135 +++++++++++ .../dotcms-theme/components/form/index.scss | 1 + core-web/libs/dotcms-scss/jsp/css/dotcms.css | 91 ++++--- 5 files changed, 439 insertions(+), 63 deletions(-) create mode 100644 core-web/apps/dotcms-ui/src/stories/primeng/form/TreeSelect.stories.ts create mode 100644 core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_treeselect.scss diff --git a/core-web/apps/dotcms-ui/src/stories/primeng/data/Tree.stories.ts b/core-web/apps/dotcms-ui/src/stories/primeng/data/Tree.stories.ts index c7f7ab212f29..4d0258fe5554 100644 --- a/core-web/apps/dotcms-ui/src/stories/primeng/data/Tree.stories.ts +++ b/core-web/apps/dotcms-ui/src/stories/primeng/data/Tree.stories.ts @@ -1,27 +1,26 @@ -// also exported from '@storybook/angular' if you can deal with breaking changes in 6.1 -import { Meta, moduleMetadata, Story } from '@storybook/angular'; +import { TreeNode } from 'primeng/api'; +import { Tree, TreeModule } from 'primeng/tree'; -import { TreeModule } from 'primeng/tree'; +import type { Meta, StoryObj } from '@storybook/angular'; -export default { +const meta: Meta = { title: 'PrimeNG/Data/Tree', - decorators: [ - moduleMetadata({ - imports: [TreeModule] - }) - ], + component: Tree, parameters: { layout: 'centered', docs: { description: { component: - 'Paginator is a generic component to display content in paged format.: https://primefaces.org/primeng/showcase/#/paginator' + 'Tree is used to display hierarchical data: https://www.primefaces.org/primeng-v15-lts/tree' } } } -} as Meta; +}; +export default meta; + +type Story = StoryObj; -const files = [ +const files: TreeNode[] = [ { label: 'Documents', data: 'Documents Folder', @@ -102,21 +101,14 @@ const files = [ } ]; -const BasicTemplate = ``; - -export const Basic: Story = () => { - return { - template: BasicTemplate, +export const Default: Story = { + render: () => ({ + moduleMetadata: { + imports: [TreeModule] + }, props: { files - } - }; -}; - -Basic.parameters = { - docs: { - source: { - code: BasicTemplate - } - } + }, + template: `` + }) }; diff --git a/core-web/apps/dotcms-ui/src/stories/primeng/form/TreeSelect.stories.ts b/core-web/apps/dotcms-ui/src/stories/primeng/form/TreeSelect.stories.ts new file mode 100644 index 000000000000..b816db4b2c51 --- /dev/null +++ b/core-web/apps/dotcms-ui/src/stories/primeng/form/TreeSelect.stories.ts @@ -0,0 +1,229 @@ +import { Meta, StoryObj } from '@storybook/angular'; + +import { FormsModule } from '@angular/forms'; +import { BrowserModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + +import { TreeNode } from 'primeng/api'; +import { TreeSelectModule, TreeSelect } from 'primeng/treeselect'; + +const meta: Meta = { + title: 'PrimeNG/Form/TreeSelect', + component: TreeSelect, + parameters: { + layout: 'centered', + docs: { + description: { + component: + 'TreeSelect is a form component to choose from hierarchical data.: https://www.primefaces.org/primeng-v15-lts/treeselect' + } + } + } +}; +export default meta; + +type Story = StoryObj; + +const files: TreeNode[] = [ + { + label: 'Documents', + data: 'Documents Folder', + expandedIcon: 'pi pi-folder-open', + collapsedIcon: 'pi pi-folder', + children: [ + { + label: 'Work', + data: 'Work Folder', + expandedIcon: 'pi pi-folder-open', + collapsedIcon: 'pi pi-folder', + children: [ + { + label: 'Expenses.doc', + icon: 'pi pi-file', + data: 'Expenses Document' + }, + { label: 'Resume.doc', icon: 'pi pi-file', data: 'Resume Document' } + ] + }, + { + label: 'Home', + data: 'Home Folder', + expandedIcon: 'pi pi-folder-open', + collapsedIcon: 'pi pi-folder', + children: [ + { + label: 'Invoices.txt', + icon: 'pi pi-file', + data: 'Invoices for this month' + } + ] + } + ] + }, + { + label: 'Pictures', + data: 'Pictures Folder', + expandedIcon: 'pi pi-folder-open', + collapsedIcon: 'pi pi-folder', + children: [ + { label: 'barcelona.jpg', icon: 'pi pi-image', data: 'Barcelona Photo' }, + { label: 'logo.jpg', icon: 'pi pi-image', data: 'PrimeFaces Logo' }, + { label: 'primeui.png', icon: 'pi pi-image', data: 'PrimeUI Logo' } + ] + }, + { + label: 'Movies', + data: 'Movies Folder', + expandedIcon: 'pi pi-folder-open', + collapsedIcon: 'pi pi-folder', + children: [ + { + label: 'Al Pacino', + data: 'Pacino Movies', + children: [ + { label: 'Scarface', icon: 'pi pi-video', data: 'Scarface Movie' }, + { label: 'Serpico', icon: 'pi pi-video', data: 'Serpico Movie' } + ] + }, + { + label: 'Robert De Niro', + data: 'De Niro Movies', + children: [ + { + label: 'Goodfellas', + icon: 'pi pi-video', + data: 'Goodfellas Movie' + }, + { + label: 'Untouchables', + icon: 'pi pi-video', + data: 'Untouchables Movie' + } + ] + } + ] + } +]; + +export const Default: Story = { + render: () => ({ + moduleMetadata: { + imports: [TreeSelectModule, FormsModule, BrowserAnimationsModule, BrowserModule] + }, + props: { + files, + selectedNodes: '' + }, + template: ` +
+ + + + + +
+ ` + }) +}; + +export const Invalid: Story = { + render: () => ({ + moduleMetadata: { + imports: [TreeSelectModule, FormsModule, BrowserAnimationsModule, BrowserModule] + }, + props: { + files, + selectedNodes: '' + }, + template: ` +
+ +
+ ` + }) +}; + +export const WithLabel: Story = { + render: () => ({ + moduleMetadata: { + imports: [TreeSelectModule, FormsModule, BrowserAnimationsModule, BrowserModule] + }, + props: { + files, + selectedNodes: '' + }, + template: ` +
+ + + + +
+ ` + }) +}; + +export const WithFloatLabel: Story = { + render: () => ({ + moduleMetadata: { + imports: [TreeSelectModule, FormsModule, BrowserAnimationsModule, BrowserModule] + }, + props: { + files, + selectedNodes: '', + dropdownIcon: 'pi pi-chevron-down' + }, + template: ` +
+ + + + +
+ ` + }) +}; + +export const Disable: Story = { + render: () => ({ + moduleMetadata: { + imports: [TreeSelectModule, FormsModule, BrowserAnimationsModule, BrowserModule] + }, + props: { + files, + selectedNodes: '' + }, + template: ` +
+ +
+ ` + }) +}; diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_treeselect.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_treeselect.scss new file mode 100644 index 000000000000..56eee93a8f12 --- /dev/null +++ b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_treeselect.scss @@ -0,0 +1,135 @@ +@use "variables" as *; +@import "common"; + +.p-treeselect { + @extend #form-field-base; + padding: 0; + transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; +} + +.p-treeselect:not(.p-disabled):hover { + @extend #form-field-hover; +} + +.p-treeselect:not(.p-disabled).p-focus { + @extend #form-field-focus; + outline-offset: 0; + box-shadow: $shadow-xs; +} + +.p-treeselect .p-treeselect-label { + padding: $spacing-1 $spacing-2; + transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; +} + +.p-treeselect .p-treeselect-label.p-placeholder { + color: $color-palette-gray-500; +} + +.p-treeselect.p-treeselect-chip .p-treeselect-token { + padding: $spacing-1 $spacing-2; + margin-right: $spacing-1; + background: $bg-highlight; + color: $color-palette-primary; + border-radius: $border-radius-xs; +} + +.p-treeselect .p-treeselect-trigger { + @extend #field-trigger; +} + +p-treeselect.ng-invalid.ng-dirty > .p-treeselect { + border-color: $error; +} + +.p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { + padding: 0.25rem 0.75rem; +} + +.p-treeselect-panel { + @extend #field-panel; +} + +.p-treeselect-panel .p-treeselect-header { + @extend #field-panel-header; +} + +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container { + margin-right: 0.5rem; +} + +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter { + padding-right: 1.75rem; +} + +.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); +} + +.p-treeselect-panel + .p-treeselect-header + .p-treeselect-filter-container.p-treeselect-clearable-filter + .p-treeselect-filter { + padding-right: 3.5rem; +} + +.p-treeselect-panel + .p-treeselect-header + .p-treeselect-filter-container.p-treeselect-clearable-filter + .p-treeselect-filter-clear-icon { + right: 2.5rem; +} + +.p-treeselect-panel .p-treeselect-header .p-treeselect-close { + width: 2rem; + height: 2rem; + color: rgba(255, 255, 255, 0.6); + border: 0 none; + background: transparent; + border-radius: 50%; + transition: color 0.15s, box-shadow 0.15s; +} + +.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover { + color: rgba(255, 255, 255, 0.87); + border-color: transparent; + background: transparent; +} + +.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus { + outline: 0 none; + outline-offset: 0; + box-shadow: 0 0 0 1px #e3f3fe; +} + +.p-treeselect-panel .p-treeselect-items-wrapper .p-tree { + border: 0 none; +} + +.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message { + padding: 0.5rem 1.5rem; + color: rgba(255, 255, 255, 0.87); + background: transparent; +} + +.p-input-filled .p-treeselect { + background: #3f4b5b; +} + +.p-input-filled .p-treeselect:not(.p-disabled):hover { + background-color: #3f4b5b; +} + +.p-input-filled .p-treeselect:not(.p-disabled).p-focus { + background-color: #3f4b5b; +} + +p-treeselect.p-treeselect-clearable .p-treeselect-label-container { + padding-right: 1.75rem; +} + +p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { + color: rgba(255, 255, 255, 0.6); + right: 2.357rem; +} diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/index.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/index.scss index 4a8ec91d0fed..5a11c254b228 100644 --- a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/index.scss +++ b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/index.scss @@ -11,3 +11,4 @@ @use "radiobutton"; @use "selectbutton"; @use "slider"; +@use "treeselect"; diff --git a/core-web/libs/dotcms-scss/jsp/css/dotcms.css b/core-web/libs/dotcms-scss/jsp/css/dotcms.css index e4e2deee0dcb..96ea0627995b 100644 --- a/core-web/libs/dotcms-scss/jsp/css/dotcms.css +++ b/core-web/libs/dotcms-scss/jsp/css/dotcms.css @@ -3927,6 +3927,10 @@ .dijitToggleButton .dijitButtonNode { padding: 0 1rem; margin: none; + height: 100%; + display: flex; + align-items: center; + justify-content: center; } .dijitButton .dijitButtonNode .dijitIcon, .dijitToggleButton .dijitButtonNode .dijitIcon { @@ -3972,11 +3976,19 @@ box-shadow: 0; outline: 2.8px solid var(--color-palette-primary-op-20); } -.dijitButtonDisabled { +.dijitButtonDisabledFocused { + background-color: #f3f3f4; + border: solid 1.5px #ebecef; + color: #afb3c0; + box-shadow: 0; + outline: none; +} +.dijitButtonDisabled.dijitDisabled { background-color: #f3f3f4; border: solid 1.5px #ebecef; color: #afb3c0; box-shadow: 0; + outline: none; } .dijitDropDownButton { background-color: #ffffff; @@ -4344,26 +4356,39 @@ } .dijitCheckBox { - border-radius: 2px; - border: solid 2px #14151a; + border-radius: 4px; + border: solid 2px #afb3c0; background-color: #ffffff; + width: 24px; + min-width: 24px; + height: 24px; + cursor: pointer; +} +.dijitCheckBox .dijitCheckBoxInput { width: 24px; height: 24px; + cursor: pointer; } .dijitCheckBoxChecked { - border: solid 1px var(--color-palette-primary-500); - background: var(--color-palette-primary-500) - url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEwIDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+U2hhcGU8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iY2hlY2tib3gtYWN0aXZlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNC4wMDAwMDAsIC01LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPiAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgcG9pbnRzPSI3LjMxMDcyMDMyIDExLjQyMjQ0NDkgNC45ODYxOTU2MyA5LjA5NzkyMDE5IDQuMTk0NjMwODcgOS44ODM5MTA1NSA3LjMxMDcyMDMyIDEzIDE0IDYuMzEwNzIwMzIgMTMuMjE0MDA5NiA1LjUyNDcyOTk2Ij48L3BvbHlnb24+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=') + border: solid 2px var(--color-palette-primary-500); + background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxMS4zMXB4IiB2aWV3Qm94PSIwIDAgMTAgOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJjaGVja2JveC1hY3RpdmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00LjAwMDAwMCwgLTUuMDAwMDAwKSIgZmlsbD0iIzAwMDAwMCI+ICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBwb2ludHM9IjcuMzEwNzIwMzIgMTEuNDIyNDQ0OSA0Ljk4NjE5NTYzIDkuMDk3OTIwMTkgNC4xOTQ2MzA4NyA5Ljg4MzkxMDU1IDcuMzEwNzIwMzIgMTMgMTQgNi4zMTA3MjAzMiAxMy4yMTQwMDk2IDUuNTI0NzI5OTYiPjwvcG9seWdvbj4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==') center center no-repeat; + background-color: #ffffff; +} +.dijitCheckBoxHover:not(.dijitCheckBoxDisabled, .dijitCheckBoxCheckedDisabled) { + border-color: var(--color-palette-primary-400); +} +.dijitCheckBoxFocused:not(.dijitCheckBoxDisabled, .dijitCheckBoxCheckedDisabled) { + outline: 1.5px solid var(--color-palette-primary-op-20); } .dijitCheckBoxDisabled { - border: solid 2px transparent; - background: #afb3c0; + border: solid 2px #d1d4db; + background: #f3f3f4; } .dijitCheckBoxCheckedDisabled { - border: solid 2px transparent; - background: #afb3c0 - url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEwIDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+U2hhcGU8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iY2hlY2tib3gtYWN0aXZlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNC4wMDAwMDAsIC01LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPiAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgcG9pbnRzPSI3LjMxMDcyMDMyIDExLjQyMjQ0NDkgNC45ODYxOTU2MyA5LjA5NzkyMDE5IDQuMTk0NjMwODcgOS44ODM5MTA1NSA3LjMxMDcyMDMyIDEzIDE0IDYuMzEwNzIwMzIgMTMuMjE0MDA5NiA1LjUyNDcyOTk2Ij48L3BvbHlnb24+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=') + border: solid 2px #d1d4db; + background: #f3f3f4 + url('data:image/svg+xml;base64,PCEtLSBSZXBsYWNlIHRoZSBjb250ZW50cyBvZiB0aGlzIGVkaXRvciB3aXRoIHlvdXIgU1ZHIGNvZGUgLS0+Cgo8c3ZnIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjExLjMxcHgiIHZpZXdCb3g9IjAgMCAxMCA4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPiAgICAgICAgPHRpdGxlPlNoYXBlPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPjwvZGVmcz4gICAgPGcgaWQ9IlN5bWJvbHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9ImNoZWNrYm94LWFjdGl2ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQuMDAwMDAwLCAtNS4wMDAwMDApIiBmaWxsPSIjZDFkNGRiIj4gICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIHBvaW50cz0iNy4zMTA3MjAzMiAxMS40MjI0NDQ5IDQuOTg2MTk1NjMgOS4wOTc5MjAxOSA0LjE5NDYzMDg3IDkuODgzOTEwNTUgNy4zMTA3MjAzMiAxMyAxNCA2LjMxMDcyMDMyIDEzLjIxNDAwOTYgNS41MjQ3Mjk5NiI+PC9wb2x5Z29uPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+') center center no-repeat; } @@ -4373,6 +4398,12 @@ border: solid 2px #afb3c0; height: 24px; width: 24px; + cursor: pointer; +} +.dijitRadio .dijitCheckBoxInput { + width: 24px; + height: 24px; + cursor: pointer; } .dijitRadioChecked { border: solid 2px var(--color-palette-primary-500); @@ -4390,20 +4421,20 @@ top: 50%; width: 14px; } -.dijitRadioHover { +.dijitRadioHover:not(.dijitRadioDisabled) { border-color: var(--color-palette-primary-400); cursor: pointer; } -.dijitRadioFocused { +.dijitRadioFocused:not(.dijitRadioDisabled) { outline: 1.5px solid var(--color-palette-primary-op-20); } .dijitRadioDisabled { - background-color: transparent; + background-color: #f3f3f4; border: solid 2px #d1d4db; position: relative; } .dijitRadioDisabled:before { - background-color: #afb3c0; + background-color: #d1d4db; } #select-arrow, @@ -4827,12 +4858,10 @@ .dijitTitlePane { border-radius: 1px; - box-shadow: 0 1px 3px var(--color-palette-black-op-10), - 0 1px 2px var(--color-palette-black-op-20); + box-shadow: 0px 2px 8px 0px hsla(230, 13%, 9%, 0.02); } .dijitTitlePaneHover { - box-shadow: 0 3px 6px var(--color-palette-black-op-10), - 0 3px 6px var(--color-palette-black-op-20); + box-shadow: 0px 4px 8px 0px hsla(230, 13%, 9%, 0.06); } .dijitTitlePaneHover .dijitTitlePaneContentOuter { border: none; @@ -4888,8 +4917,7 @@ background-color: #ffffff; border-radius: 0px; border: none; - box-shadow: 0 3px 6px var(--color-palette-black-op-10), - 0 3px 6px var(--color-palette-black-op-20); + box-shadow: 0px 4px 8px 0px hsla(230, 13%, 9%, 0.06); } .dijitDialogCloseIcon { width: 17px; @@ -4943,7 +4971,7 @@ color: #14151a; border: 0 none; border-radius: 0.375rem; - box-shadow: 0px 0px 4px rgba(20, 21, 26, 0.04), 0px 8px 16px rgba(20, 21, 26, 0.08); + box-shadow: 0px 10px 18px 0px hsla(230, 13%, 9%, 0.1); padding: 0.5rem; margin-top: 0.5rem; } @@ -5522,7 +5550,7 @@ color: #14151a; border: 0 none; border-radius: 0.375rem; - box-shadow: 0px 0px 4px rgba(20, 21, 26, 0.04), 0px 8px 16px rgba(20, 21, 26, 0.08); + box-shadow: 0px 10px 18px 0px hsla(230, 13%, 9%, 0.1); padding: 0.5rem; margin-top: 0.5rem; } @@ -10417,12 +10445,9 @@ a.tag_higlighted { } .content-search__result-item { - padding-left: 24px; - position: relative; -} -.content-search__result-item .dijitCheckBox { - position: absolute; - left: 0; + display: flex; + align-items: center; + gap: 0.5rem; } .content-search__action-item { @@ -10780,11 +10805,6 @@ a.tag_higlighted { height: 6px; } -.portlet-sidebar .dijitCheckBox { - position: relative; - bottom: 2px; -} - .dijitContentPane .buttonRow { margin-bottom: 15px; } @@ -10910,8 +10930,7 @@ a.tag_higlighted { } .context-menu { - box-shadow: 0 3px 6px var(--color-palette-black-op-10), - 0 3px 6px var(--color-palette-black-op-20); + box-shadow: 0px 4px 8px 0px hsla(230, 13%, 9%, 0.06); position: absolute; background: #ffffff; border: 1px solid #d1d4db; From 1762db1738076337d794cf80772f20d198644e49 Mon Sep 17 00:00:00 2001 From: Nicolas Molina Date: Tue, 28 May 2024 13:23:40 -0400 Subject: [PATCH 03/10] WIP: support to checkboxes for TreeSelect Compoment and avoid hardcoded vars in scss #28368 --- .../primeng/form/TreeSelect.stories.ts | 156 ++++++++++++++++-- .../dotcms-theme/components/_tree.scss | 2 +- .../components/form/_treeselect.scss | 139 ++++++---------- .../dotcms-theme/components/form/common.scss | 13 ++ 4 files changed, 204 insertions(+), 106 deletions(-) diff --git a/core-web/apps/dotcms-ui/src/stories/primeng/form/TreeSelect.stories.ts b/core-web/apps/dotcms-ui/src/stories/primeng/form/TreeSelect.stories.ts index b816db4b2c51..05997a3d3fd0 100644 --- a/core-web/apps/dotcms-ui/src/stories/primeng/form/TreeSelect.stories.ts +++ b/core-web/apps/dotcms-ui/src/stories/primeng/form/TreeSelect.stories.ts @@ -115,12 +115,13 @@ export const Default: Story = { selectedNodes: '' }, template: ` -
+
@@ -141,14 +142,19 @@ export const Invalid: Story = { selectedNodes: '' }, template: ` -
+
+ [showClear]="true" + > + + + +
` }) @@ -164,7 +170,7 @@ export const WithLabel: Story = { selectedNodes: '' }, template: ` -
+
+ [showClear]="true" + > + + + +
` @@ -190,16 +201,23 @@ export const WithFloatLabel: Story = { dropdownIcon: 'pi pi-chevron-down' }, template: ` -
- - - - +
+
+ + + + + + + + +
` }) @@ -215,14 +233,118 @@ export const Disable: Story = { selectedNodes: '' }, template: ` -
+
+ [showClear]="true" + > + + + + +
+ ` + }) +}; + +export const Multiple: Story = { + render: () => ({ + moduleMetadata: { + imports: [TreeSelectModule, FormsModule, BrowserAnimationsModule, BrowserModule] + }, + props: { + files, + selectedNodes: '' + }, + template: ` +
+ + + + + +
+ ` + }) +}; + + +export const Checkbox: Story = { + render: () => ({ + moduleMetadata: { + imports: [TreeSelectModule, FormsModule, BrowserAnimationsModule, BrowserModule] + }, + props: { + files, + selectedNodes: '' + }, + template: ` +
+ + + + + +
+ ` + }) +}; + +export const Filter: Story = { + render: () => ({ + moduleMetadata: { + imports: [TreeSelectModule, FormsModule, BrowserAnimationsModule, BrowserModule] + }, + props: { + files, + selectedNodes: '' + }, + template: ` +
+ + + + + + + + + + +
` }) diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_tree.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_tree.scss index 57a1bad486b5..a3eedd4f615e 100644 --- a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_tree.scss +++ b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/_tree.scss @@ -9,7 +9,7 @@ } .p-tree .p-tree-container .p-treenode { - padding: 0.25rem; + padding: $spacing-0; } .p-tree .p-tree-container .p-treenode .p-treenode-content { diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_treeselect.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_treeselect.scss index 56eee93a8f12..abf62306936e 100644 --- a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_treeselect.scss +++ b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_treeselect.scss @@ -5,6 +5,13 @@ @extend #form-field-base; padding: 0; transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + &.p-disabled { + @extend #form-field-disabled; + + .p-treeselect-trigger { + color: $color-palette-gray-500; + } + } } .p-treeselect:not(.p-disabled):hover { @@ -27,11 +34,12 @@ } .p-treeselect.p-treeselect-chip .p-treeselect-token { - padding: $spacing-1 $spacing-2; + padding: 0.375rem $spacing-1; margin-right: $spacing-1; - background: $bg-highlight; + background: $color-palette-primary-200; + border-radius: $border-radius-sm; color: $color-palette-primary; - border-radius: $border-radius-xs; + font-size: $font-size-sm; } .p-treeselect .p-treeselect-trigger { @@ -43,93 +51,48 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { } .p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { - padding: 0.25rem 0.75rem; + padding: $spacing-0 $spacing-1; } .p-treeselect-panel { @extend #field-panel; -} - -.p-treeselect-panel .p-treeselect-header { - @extend #field-panel-header; -} - -.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container { - margin-right: 0.5rem; -} - -.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter { - padding-right: 1.75rem; -} - -.p-treeselect-panel .p-treeselect-header .p-treeselect-filter-container .p-treeselect-filter-icon { - right: 0.75rem; - color: rgba(255, 255, 255, 0.6); -} - -.p-treeselect-panel - .p-treeselect-header - .p-treeselect-filter-container.p-treeselect-clearable-filter - .p-treeselect-filter { - padding-right: 3.5rem; -} - -.p-treeselect-panel - .p-treeselect-header - .p-treeselect-filter-container.p-treeselect-clearable-filter - .p-treeselect-filter-clear-icon { - right: 2.5rem; -} - -.p-treeselect-panel .p-treeselect-header .p-treeselect-close { - width: 2rem; - height: 2rem; - color: rgba(255, 255, 255, 0.6); - border: 0 none; - background: transparent; - border-radius: 50%; - transition: color 0.15s, box-shadow 0.15s; -} - -.p-treeselect-panel .p-treeselect-header .p-treeselect-close:enabled:hover { - color: rgba(255, 255, 255, 0.87); - border-color: transparent; - background: transparent; -} - -.p-treeselect-panel .p-treeselect-header .p-treeselect-close:focus { - outline: 0 none; - outline-offset: 0; - box-shadow: 0 0 0 1px #e3f3fe; -} - -.p-treeselect-panel .p-treeselect-items-wrapper .p-tree { - border: 0 none; -} - -.p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message { - padding: 0.5rem 1.5rem; - color: rgba(255, 255, 255, 0.87); - background: transparent; -} - -.p-input-filled .p-treeselect { - background: #3f4b5b; -} - -.p-input-filled .p-treeselect:not(.p-disabled):hover { - background-color: #3f4b5b; -} - -.p-input-filled .p-treeselect:not(.p-disabled).p-focus { - background-color: #3f4b5b; -} - -p-treeselect.p-treeselect-clearable .p-treeselect-label-container { - padding-right: 1.75rem; -} - -p-treeselect.p-treeselect-clearable .p-treeselect-clear-icon { - color: rgba(255, 255, 255, 0.6); - right: 2.357rem; + .p-treeselect-header { + @extend #field-panel-header; + gap: $spacing-1; + .p-treeselect-filter-container { + .p-treeselect-filter { + @extend #field-panel-filter; + } + .p-treeselect-filter-icon { + @extend #field-panel-filter-icon; + } + } + + .p-treeselect-close { + @extend #field-panel-icon-close; + } + } + .p-treeselect-items-wrapper { + .p-tree { + border: 0 none; + padding: 0; + } + .p-tree-empty-message { + padding: $spacing-2 $spacing-2; + color: $black; + background: transparent; + } + } +} + +p-treeselect { + &.p-treeselect-clearable{ + .p-treeselect-label-container { + padding-right: $spacing-5; + } + .p-treeselect-clear-icon { + color: $color-palette-gray-500; + right: $spacing-7; + } + } } diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/common.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/common.scss index 7ca594c88f4c..3d9b159b680e 100644 --- a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/common.scss +++ b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/common.scss @@ -110,6 +110,19 @@ $select-border-size: 2px; color: $color-palette-primary; } +#field-panel-icon-close { + color: $color-palette-primary; + width: $spacing-5; + height: $spacing-5; + border-radius: $border-radius-circular; + transition: color 0.15s, box-shadow 0.15s; + + :focus{ + outline: 0 none; + outline-offset: 0; + } +} + #field-panel-items { padding: 0; } From 4fc8a5070c508a0366e708cfc48a1a920edaf745 Mon Sep 17 00:00:00 2001 From: Nicolas Molina Date: Tue, 28 May 2024 13:30:52 -0400 Subject: [PATCH 04/10] WIP: support to checkboxes for TreeSelect Compoment and avoid hardcoded vars in scss #28368 --- .../src/stories/primeng/data/Tree.stories.ts | 2 +- .../primeng/form/TreeSelect.stories.ts | 85 +------------------ .../webapp/html/css/dijit-dotcms/dotcms.css | 14 ++- 3 files changed, 10 insertions(+), 91 deletions(-) diff --git a/core-web/apps/dotcms-ui/src/stories/primeng/data/Tree.stories.ts b/core-web/apps/dotcms-ui/src/stories/primeng/data/Tree.stories.ts index 4d0258fe5554..abde4ddbccf8 100644 --- a/core-web/apps/dotcms-ui/src/stories/primeng/data/Tree.stories.ts +++ b/core-web/apps/dotcms-ui/src/stories/primeng/data/Tree.stories.ts @@ -20,7 +20,7 @@ export default meta; type Story = StoryObj; -const files: TreeNode[] = [ +export const files: TreeNode[] = [ { label: 'Documents', data: 'Documents Folder', diff --git a/core-web/apps/dotcms-ui/src/stories/primeng/form/TreeSelect.stories.ts b/core-web/apps/dotcms-ui/src/stories/primeng/form/TreeSelect.stories.ts index 05997a3d3fd0..d29375d92b58 100644 --- a/core-web/apps/dotcms-ui/src/stories/primeng/form/TreeSelect.stories.ts +++ b/core-web/apps/dotcms-ui/src/stories/primeng/form/TreeSelect.stories.ts @@ -4,9 +4,11 @@ import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { TreeNode } from 'primeng/api'; import { TreeSelectModule, TreeSelect } from 'primeng/treeselect'; +import { files } from './../data/Tree.stories'; + + const meta: Meta = { title: 'PrimeNG/Form/TreeSelect', component: TreeSelect, @@ -24,87 +26,6 @@ export default meta; type Story = StoryObj; -const files: TreeNode[] = [ - { - label: 'Documents', - data: 'Documents Folder', - expandedIcon: 'pi pi-folder-open', - collapsedIcon: 'pi pi-folder', - children: [ - { - label: 'Work', - data: 'Work Folder', - expandedIcon: 'pi pi-folder-open', - collapsedIcon: 'pi pi-folder', - children: [ - { - label: 'Expenses.doc', - icon: 'pi pi-file', - data: 'Expenses Document' - }, - { label: 'Resume.doc', icon: 'pi pi-file', data: 'Resume Document' } - ] - }, - { - label: 'Home', - data: 'Home Folder', - expandedIcon: 'pi pi-folder-open', - collapsedIcon: 'pi pi-folder', - children: [ - { - label: 'Invoices.txt', - icon: 'pi pi-file', - data: 'Invoices for this month' - } - ] - } - ] - }, - { - label: 'Pictures', - data: 'Pictures Folder', - expandedIcon: 'pi pi-folder-open', - collapsedIcon: 'pi pi-folder', - children: [ - { label: 'barcelona.jpg', icon: 'pi pi-image', data: 'Barcelona Photo' }, - { label: 'logo.jpg', icon: 'pi pi-image', data: 'PrimeFaces Logo' }, - { label: 'primeui.png', icon: 'pi pi-image', data: 'PrimeUI Logo' } - ] - }, - { - label: 'Movies', - data: 'Movies Folder', - expandedIcon: 'pi pi-folder-open', - collapsedIcon: 'pi pi-folder', - children: [ - { - label: 'Al Pacino', - data: 'Pacino Movies', - children: [ - { label: 'Scarface', icon: 'pi pi-video', data: 'Scarface Movie' }, - { label: 'Serpico', icon: 'pi pi-video', data: 'Serpico Movie' } - ] - }, - { - label: 'Robert De Niro', - data: 'De Niro Movies', - children: [ - { - label: 'Goodfellas', - icon: 'pi pi-video', - data: 'Goodfellas Movie' - }, - { - label: 'Untouchables', - icon: 'pi pi-video', - data: 'Untouchables Movie' - } - ] - } - ] - } -]; - export const Default: Story = { render: () => ({ moduleMetadata: { diff --git a/dotCMS/src/main/webapp/html/css/dijit-dotcms/dotcms.css b/dotCMS/src/main/webapp/html/css/dijit-dotcms/dotcms.css index 9b306decc6ca..ccabd5c13cce 100644 --- a/dotCMS/src/main/webapp/html/css/dijit-dotcms/dotcms.css +++ b/dotCMS/src/main/webapp/html/css/dijit-dotcms/dotcms.css @@ -4403,10 +4403,10 @@ .dijitTitlePane { border-radius: 1px; - box-shadow: 0 1px 3px var(--color-palette-black-op-10), 0 1px 2px var(--color-palette-black-op-20); + box-shadow: 0px 2px 8px 0px hsla(230, 13%, 9%, 0.02); } .dijitTitlePaneHover { - box-shadow: 0 3px 6px var(--color-palette-black-op-10), 0 3px 6px var(--color-palette-black-op-20); + box-shadow: 0px 4px 8px 0px hsla(230, 13%, 9%, 0.06); } .dijitTitlePaneHover .dijitTitlePaneContentOuter { border: none; @@ -4462,7 +4462,7 @@ background-color: #ffffff; border-radius: 0px; border: none; - box-shadow: 0 3px 6px var(--color-palette-black-op-10), 0 3px 6px var(--color-palette-black-op-20); + box-shadow: 0px 4px 8px 0px hsla(230, 13%, 9%, 0.06); } .dijitDialogCloseIcon { width: 17px; @@ -4514,7 +4514,7 @@ color: #14151a; border: 0 none; border-radius: 0.375rem; - box-shadow: 0px 0px 4px rgba(20, 21, 26, 0.04), 0px 8px 16px rgba(20, 21, 26, 0.08); + box-shadow: 0px 10px 18px 0px hsla(230, 13%, 9%, 0.1); padding: 0.5rem; margin-top: 0.5rem; } @@ -5079,7 +5079,7 @@ color: #14151a; border: 0 none; border-radius: 0.375rem; - box-shadow: 0px 0px 4px rgba(20, 21, 26, 0.04), 0px 8px 16px rgba(20, 21, 26, 0.08); + box-shadow: 0px 10px 18px 0px hsla(230, 13%, 9%, 0.1); padding: 0.5rem; margin-top: 0.5rem; } @@ -10384,7 +10384,7 @@ a.category_higlighted, a.tag_higlighted { } .context-menu { - box-shadow: 0 3px 6px var(--color-palette-black-op-10), 0 3px 6px var(--color-palette-black-op-20); + box-shadow: 0px 4px 8px 0px hsla(230, 13%, 9%, 0.06); position: absolute; background: #ffffff; border: 1px solid #d1d4db; @@ -11229,5 +11229,3 @@ body { padding: 0; height: calc(100vh - 3rem - 20px - 1rem - 0.5rem - 20px - 61px - 1rem); } - -/*# sourceMappingURL=dotcms.css.map */ From f4f5001c67675692db1f831ec809e2f52024ca64 Mon Sep 17 00:00:00 2001 From: Nicolas Molina Date: Tue, 28 May 2024 16:01:11 -0400 Subject: [PATCH 05/10] chore: Fix format #28638 --- .../dotcms-ui/src/stories/primeng/form/TreeSelect.stories.ts | 2 -- .../angular/dotcms-theme/components/form/_treeselect.scss | 2 +- .../angular/dotcms-theme/components/form/common.scss | 2 +- 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/core-web/apps/dotcms-ui/src/stories/primeng/form/TreeSelect.stories.ts b/core-web/apps/dotcms-ui/src/stories/primeng/form/TreeSelect.stories.ts index d29375d92b58..fdb8c6efa7a8 100644 --- a/core-web/apps/dotcms-ui/src/stories/primeng/form/TreeSelect.stories.ts +++ b/core-web/apps/dotcms-ui/src/stories/primeng/form/TreeSelect.stories.ts @@ -8,7 +8,6 @@ import { TreeSelectModule, TreeSelect } from 'primeng/treeselect'; import { files } from './../data/Tree.stories'; - const meta: Meta = { title: 'PrimeNG/Form/TreeSelect', component: TreeSelect, @@ -202,7 +201,6 @@ export const Multiple: Story = { }) }; - export const Checkbox: Story = { render: () => ({ moduleMetadata: { diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_treeselect.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_treeselect.scss index abf62306936e..a5d00dad7281 100644 --- a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_treeselect.scss +++ b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_treeselect.scss @@ -86,7 +86,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { } p-treeselect { - &.p-treeselect-clearable{ + &.p-treeselect-clearable { .p-treeselect-label-container { padding-right: $spacing-5; } diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/common.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/common.scss index 3d9b159b680e..4796d832df46 100644 --- a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/common.scss +++ b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/common.scss @@ -117,7 +117,7 @@ $select-border-size: 2px; border-radius: $border-radius-circular; transition: color 0.15s, box-shadow 0.15s; - :focus{ + :focus { outline: 0 none; outline-offset: 0; } From 60d1d8d8858bf8b10317beb645603b914f9c0bd1 Mon Sep 17 00:00:00 2001 From: Nicolas Molina Date: Tue, 28 May 2024 16:14:27 -0400 Subject: [PATCH 06/10] chore(dotcms-ui): Add -speed to animations #28638 --- .../angular/dotcms-theme/components/form/_treeselect.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_treeselect.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_treeselect.scss index a5d00dad7281..32108d5a763b 100644 --- a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_treeselect.scss +++ b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_treeselect.scss @@ -4,7 +4,7 @@ .p-treeselect { @extend #form-field-base; padding: 0; - transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + transition: background-color $basic-speed, border-color $basic-speed, box-shadow $basic-speed; &.p-disabled { @extend #form-field-disabled; @@ -26,7 +26,7 @@ .p-treeselect .p-treeselect-label { padding: $spacing-1 $spacing-2; - transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s; + transition: background-color $basic-speed, border-color $basic-speed, box-shadow $basic-speed; } .p-treeselect .p-treeselect-label.p-placeholder { From 6f56d255eded19622b7e54039413c6b0d4b8c7ba Mon Sep 17 00:00:00 2001 From: Nicolas Molina Date: Tue, 28 May 2024 16:28:18 -0400 Subject: [PATCH 07/10] chore(dotcms-ui): Create base config for stories #28638 --- .../primeng/form/TreeSelect.stories.ts | 75 +++++-------------- 1 file changed, 18 insertions(+), 57 deletions(-) diff --git a/core-web/apps/dotcms-ui/src/stories/primeng/form/TreeSelect.stories.ts b/core-web/apps/dotcms-ui/src/stories/primeng/form/TreeSelect.stories.ts index fdb8c6efa7a8..ddee524d21a9 100644 --- a/core-web/apps/dotcms-ui/src/stories/primeng/form/TreeSelect.stories.ts +++ b/core-web/apps/dotcms-ui/src/stories/primeng/form/TreeSelect.stories.ts @@ -25,15 +25,19 @@ export default meta; type Story = StoryObj; +const storyConfigBase: Partial = { + moduleMetadata: { + imports: [TreeSelectModule, FormsModule, BrowserAnimationsModule, BrowserModule] + }, + props: { + files, + selectedNodes: '' + } +}; + export const Default: Story = { render: () => ({ - moduleMetadata: { - imports: [TreeSelectModule, FormsModule, BrowserAnimationsModule, BrowserModule] - }, - props: { - files, - selectedNodes: '' - }, + ...storyConfigBase, template: `
({ - moduleMetadata: { - imports: [TreeSelectModule, FormsModule, BrowserAnimationsModule, BrowserModule] - }, - props: { - files, - selectedNodes: '' - }, + ...storyConfigBase, template: `
({ - moduleMetadata: { - imports: [TreeSelectModule, FormsModule, BrowserAnimationsModule, BrowserModule] - }, - props: { - files, - selectedNodes: '' - }, + ...storyConfigBase, template: `
@@ -112,14 +104,7 @@ export const WithLabel: Story = { export const WithFloatLabel: Story = { render: () => ({ - moduleMetadata: { - imports: [TreeSelectModule, FormsModule, BrowserAnimationsModule, BrowserModule] - }, - props: { - files, - selectedNodes: '', - dropdownIcon: 'pi pi-chevron-down' - }, + ...storyConfigBase, template: `
@@ -145,13 +130,7 @@ export const WithFloatLabel: Story = { export const Disable: Story = { render: () => ({ - moduleMetadata: { - imports: [TreeSelectModule, FormsModule, BrowserAnimationsModule, BrowserModule] - }, - props: { - files, - selectedNodes: '' - }, + ...storyConfigBase, template: `
({ - moduleMetadata: { - imports: [TreeSelectModule, FormsModule, BrowserAnimationsModule, BrowserModule] - }, - props: { - files, - selectedNodes: '' - }, + ...storyConfigBase, template: `
({ - moduleMetadata: { - imports: [TreeSelectModule, FormsModule, BrowserAnimationsModule, BrowserModule] - }, - props: { - files, - selectedNodes: '' - }, + ...storyConfigBase, template: `
({ - moduleMetadata: { - imports: [TreeSelectModule, FormsModule, BrowserAnimationsModule, BrowserModule] - }, - props: { - files, - selectedNodes: '' - }, + ...storyConfigBase, template: `
Date: Tue, 28 May 2024 17:17:16 -0400 Subject: [PATCH 08/10] chore(dotcms-ui): Create common chip #28638 --- .../src/stories/primeng/form/Chips.stories.ts | 59 ++++++++----------- .../dotcms-theme/components/form/_chips.scss | 7 +-- .../components/form/_treeselect.scss | 7 +-- .../dotcms-theme/components/form/common.scss | 9 +++ 4 files changed, 35 insertions(+), 47 deletions(-) diff --git a/core-web/apps/dotcms-ui/src/stories/primeng/form/Chips.stories.ts b/core-web/apps/dotcms-ui/src/stories/primeng/form/Chips.stories.ts index 01486b9c8cd5..b1c7db1f78a2 100644 --- a/core-web/apps/dotcms-ui/src/stories/primeng/form/Chips.stories.ts +++ b/core-web/apps/dotcms-ui/src/stories/primeng/form/Chips.stories.ts @@ -1,54 +1,41 @@ -import { Meta, moduleMetadata, Story } from '@storybook/angular'; +import { Meta, StoryObj } from '@storybook/angular'; +import { FormsModule } from '@angular/forms'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { Chips, ChipsModule } from 'primeng/chips'; -export default { +const meta: Meta = { title: 'PrimeNG/Form/Chips', component: Chips, parameters: { docs: { description: { component: - 'Chips is used to enter multiple values on an input field: https://primeng.org/checkbox' + 'Chips is used to enter multiple values on an input field: https://primeng.org/chips' } } }, - decorators: [ - moduleMetadata({ - imports: [ChipsModule, BrowserAnimationsModule] - }) - ], + argTypes: { + values: { + name: 'values', + description: 'Array of strings, each representing a chip.' + } + }, args: { - values: ['first'] - } -} as Meta; - -const ChipsTemplate = ``; - -const Template: Story = (props: Chips) => { - const template = ChipsTemplate; - - return { - props, - template - }; -}; - -export const Basic: Story = Template.bind({}); - -Basic.argTypes = { - values: { - name: 'values', - description: 'Array of strings, each representing a chip.' + values: ['one', 'two'] } }; - -Basic.parameters = { - docs: { - source: { - code: ChipsTemplate - } - } +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + render: (args) => ({ + props: args, + moduleMetadata: { + imports: [ChipsModule, BrowserAnimationsModule, FormsModule] + }, + template: `` + }) }; diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_chips.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_chips.scss index 8883cd35116e..b974e7298dd7 100644 --- a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_chips.scss +++ b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_chips.scss @@ -1,4 +1,5 @@ @use "variables" as *; +@import "common"; p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { border-color: $error; @@ -20,11 +21,7 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext { } .p-chips .p-chips-multiple-container .p-chips-token { - padding: 0.375rem $spacing-2; - margin-right: $spacing-1; - background: $bg-highlight; - color: $color-palette-primary; - border-radius: $border-radius-xs; + @extend #field-chip-token; } .p-chips .p-chips-multiple-container .p-chips-token .p-chips-token-icon { diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_treeselect.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_treeselect.scss index 32108d5a763b..ea1f4327f745 100644 --- a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_treeselect.scss +++ b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_treeselect.scss @@ -34,12 +34,7 @@ } .p-treeselect.p-treeselect-chip .p-treeselect-token { - padding: 0.375rem $spacing-1; - margin-right: $spacing-1; - background: $color-palette-primary-200; - border-radius: $border-radius-sm; - color: $color-palette-primary; - font-size: $font-size-sm; + @extend #field-chip-token; } .p-treeselect .p-treeselect-trigger { diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/common.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/common.scss index 4796d832df46..9a90df753fbf 100644 --- a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/common.scss +++ b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/common.scss @@ -161,3 +161,12 @@ $select-border-size: 2px; justify-content: center; gap: $spacing-0; } + +#field-chip-token { + padding: 0.375rem $spacing-2; + margin-right: $spacing-1; + background: $bg-highlight; + color: $color-palette-primary; + border-radius: $border-radius-xs; + font-size: $font-size-sm; +} From 84c59ee0f9b4a5498bc419a41061ad996eeb6dc1 Mon Sep 17 00:00:00 2001 From: Nicolas Molina Date: Wed, 29 May 2024 10:34:41 -0400 Subject: [PATCH 09/10] chore(dotcms-ui): use nested syntax to improve the styles #28638 --- .../components/form/_treeselect.scss | 80 ++++++++++++------- 1 file changed, 51 insertions(+), 29 deletions(-) diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_treeselect.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_treeselect.scss index ea1f4327f745..407aebd44228 100644 --- a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_treeselect.scss +++ b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_treeselect.scss @@ -5,6 +5,19 @@ @extend #form-field-base; padding: 0; transition: background-color $basic-speed, border-color $basic-speed, box-shadow $basic-speed; + + &:not(.p-disabled) { + &:hover { + @extend #form-field-hover; + } + + &.p-focus { + @extend #form-field-focus; + outline-offset: 0; + box-shadow: $shadow-xs; + } + } + &.p-disabled { @extend #form-field-disabled; @@ -12,52 +25,50 @@ color: $color-palette-gray-500; } } -} - -.p-treeselect:not(.p-disabled):hover { - @extend #form-field-hover; -} -.p-treeselect:not(.p-disabled).p-focus { - @extend #form-field-focus; - outline-offset: 0; - box-shadow: $shadow-xs; -} - -.p-treeselect .p-treeselect-label { - padding: $spacing-1 $spacing-2; - transition: background-color $basic-speed, border-color $basic-speed, box-shadow $basic-speed; -} - -.p-treeselect .p-treeselect-label.p-placeholder { - color: $color-palette-gray-500; -} + &.p-treeselect-chip { + .p-treeselect-token { + @extend #field-chip-token; + } + } -.p-treeselect.p-treeselect-chip .p-treeselect-token { - @extend #field-chip-token; -} + .p-treeselect-label { + padding: $spacing-1 $spacing-2; + transition: background-color $basic-speed, border-color $basic-speed, + box-shadow $basic-speed; -.p-treeselect .p-treeselect-trigger { - @extend #field-trigger; -} + &.p-placeholder { + color: $color-palette-gray-500; + } + } -p-treeselect.ng-invalid.ng-dirty > .p-treeselect { - border-color: $error; + .p-treeselect-trigger { + @extend #field-trigger; + } } -.p-inputwrapper-filled .p-treeselect.p-treeselect-chip .p-treeselect-label { - padding: $spacing-0 $spacing-1; +.p-inputwrapper-filled { + .p-treeselect { + &.p-treeselect-chip { + .p-treeselect-label { + padding: $spacing-0 $spacing-1; + } + } + } } .p-treeselect-panel { @extend #field-panel; + .p-treeselect-header { @extend #field-panel-header; gap: $spacing-1; + .p-treeselect-filter-container { .p-treeselect-filter { @extend #field-panel-filter; } + .p-treeselect-filter-icon { @extend #field-panel-filter-icon; } @@ -67,11 +78,13 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { @extend #field-panel-icon-close; } } + .p-treeselect-items-wrapper { .p-tree { border: 0 none; padding: 0; } + .p-tree-empty-message { padding: $spacing-2 $spacing-2; color: $black; @@ -81,10 +94,19 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect { } p-treeselect { + &.ng-invalid { + &.ng-dirty { + .p-treeselect { + border-color: $error; + } + } + } + &.p-treeselect-clearable { .p-treeselect-label-container { padding-right: $spacing-5; } + .p-treeselect-clear-icon { color: $color-palette-gray-500; right: $spacing-7; From 588d5bc2b77ab283a900cdeacde8c266819b1cf0 Mon Sep 17 00:00:00 2001 From: Nicolas Molina Date: Wed, 29 May 2024 10:50:36 -0400 Subject: [PATCH 10/10] chore(dotcms-ui): Fix problem with jsp css file #28638 --- core-web/libs/dotcms-scss/jsp/css/dotcms.css | 91 ++++++++------------ 1 file changed, 36 insertions(+), 55 deletions(-) diff --git a/core-web/libs/dotcms-scss/jsp/css/dotcms.css b/core-web/libs/dotcms-scss/jsp/css/dotcms.css index 96ea0627995b..e4e2deee0dcb 100644 --- a/core-web/libs/dotcms-scss/jsp/css/dotcms.css +++ b/core-web/libs/dotcms-scss/jsp/css/dotcms.css @@ -3927,10 +3927,6 @@ .dijitToggleButton .dijitButtonNode { padding: 0 1rem; margin: none; - height: 100%; - display: flex; - align-items: center; - justify-content: center; } .dijitButton .dijitButtonNode .dijitIcon, .dijitToggleButton .dijitButtonNode .dijitIcon { @@ -3976,19 +3972,11 @@ box-shadow: 0; outline: 2.8px solid var(--color-palette-primary-op-20); } -.dijitButtonDisabledFocused { - background-color: #f3f3f4; - border: solid 1.5px #ebecef; - color: #afb3c0; - box-shadow: 0; - outline: none; -} -.dijitButtonDisabled.dijitDisabled { +.dijitButtonDisabled { background-color: #f3f3f4; border: solid 1.5px #ebecef; color: #afb3c0; box-shadow: 0; - outline: none; } .dijitDropDownButton { background-color: #ffffff; @@ -4356,39 +4344,26 @@ } .dijitCheckBox { - border-radius: 4px; - border: solid 2px #afb3c0; + border-radius: 2px; + border: solid 2px #14151a; background-color: #ffffff; - width: 24px; - min-width: 24px; - height: 24px; - cursor: pointer; -} -.dijitCheckBox .dijitCheckBoxInput { width: 24px; height: 24px; - cursor: pointer; } .dijitCheckBoxChecked { - border: solid 2px var(--color-palette-primary-500); - background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxMS4zMXB4IiB2aWV3Qm94PSIwIDAgMTAgOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJTeW1ib2xzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxnIGlkPSJjaGVja2JveC1hY3RpdmUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00LjAwMDAwMCwgLTUuMDAwMDAwKSIgZmlsbD0iIzAwMDAwMCI+ICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBwb2ludHM9IjcuMzEwNzIwMzIgMTEuNDIyNDQ0OSA0Ljk4NjE5NTYzIDkuMDk3OTIwMTkgNC4xOTQ2MzA4NyA5Ljg4MzkxMDU1IDcuMzEwNzIwMzIgMTMgMTQgNi4zMTA3MjAzMiAxMy4yMTQwMDk2IDUuNTI0NzI5OTYiPjwvcG9seWdvbj4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==') + border: solid 1px var(--color-palette-primary-500); + background: var(--color-palette-primary-500) + url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEwIDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+U2hhcGU8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iY2hlY2tib3gtYWN0aXZlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNC4wMDAwMDAsIC01LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPiAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgcG9pbnRzPSI3LjMxMDcyMDMyIDExLjQyMjQ0NDkgNC45ODYxOTU2MyA5LjA5NzkyMDE5IDQuMTk0NjMwODcgOS44ODM5MTA1NSA3LjMxMDcyMDMyIDEzIDE0IDYuMzEwNzIwMzIgMTMuMjE0MDA5NiA1LjUyNDcyOTk2Ij48L3BvbHlnb24+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=') center center no-repeat; - background-color: #ffffff; -} -.dijitCheckBoxHover:not(.dijitCheckBoxDisabled, .dijitCheckBoxCheckedDisabled) { - border-color: var(--color-palette-primary-400); -} -.dijitCheckBoxFocused:not(.dijitCheckBoxDisabled, .dijitCheckBoxCheckedDisabled) { - outline: 1.5px solid var(--color-palette-primary-op-20); } .dijitCheckBoxDisabled { - border: solid 2px #d1d4db; - background: #f3f3f4; + border: solid 2px transparent; + background: #afb3c0; } .dijitCheckBoxCheckedDisabled { - border: solid 2px #d1d4db; - background: #f3f3f4 - url('data:image/svg+xml;base64,PCEtLSBSZXBsYWNlIHRoZSBjb250ZW50cyBvZiB0aGlzIGVkaXRvciB3aXRoIHlvdXIgU1ZHIGNvZGUgLS0+Cgo8c3ZnIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjExLjMxcHgiIHZpZXdCb3g9IjAgMCAxMCA4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPiAgICAgICAgPHRpdGxlPlNoYXBlPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPjwvZGVmcz4gICAgPGcgaWQ9IlN5bWJvbHMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9ImNoZWNrYm94LWFjdGl2ZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTQuMDAwMDAwLCAtNS4wMDAwMDApIiBmaWxsPSIjZDFkNGRiIj4gICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIHBvaW50cz0iNy4zMTA3MjAzMiAxMS40MjI0NDQ5IDQuOTg2MTk1NjMgOS4wOTc5MjAxOSA0LjE5NDYzMDg3IDkuODgzOTEwNTUgNy4zMTA3MjAzMiAxMyAxNCA2LjMxMDcyMDMyIDEzLjIxNDAwOTYgNS41MjQ3Mjk5NiI+PC9wb2x5Z29uPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+') + border: solid 2px transparent; + background: #afb3c0 + url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxMHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEwIDgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgICAgICA8dGl0bGU+U2hhcGU8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iY2hlY2tib3gtYWN0aXZlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNC4wMDAwMDAsIC01LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPiAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgcG9pbnRzPSI3LjMxMDcyMDMyIDExLjQyMjQ0NDkgNC45ODYxOTU2MyA5LjA5NzkyMDE5IDQuMTk0NjMwODcgOS44ODM5MTA1NSA3LjMxMDcyMDMyIDEzIDE0IDYuMzEwNzIwMzIgMTMuMjE0MDA5NiA1LjUyNDcyOTk2Ij48L3BvbHlnb24+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=') center center no-repeat; } @@ -4398,12 +4373,6 @@ border: solid 2px #afb3c0; height: 24px; width: 24px; - cursor: pointer; -} -.dijitRadio .dijitCheckBoxInput { - width: 24px; - height: 24px; - cursor: pointer; } .dijitRadioChecked { border: solid 2px var(--color-palette-primary-500); @@ -4421,20 +4390,20 @@ top: 50%; width: 14px; } -.dijitRadioHover:not(.dijitRadioDisabled) { +.dijitRadioHover { border-color: var(--color-palette-primary-400); cursor: pointer; } -.dijitRadioFocused:not(.dijitRadioDisabled) { +.dijitRadioFocused { outline: 1.5px solid var(--color-palette-primary-op-20); } .dijitRadioDisabled { - background-color: #f3f3f4; + background-color: transparent; border: solid 2px #d1d4db; position: relative; } .dijitRadioDisabled:before { - background-color: #d1d4db; + background-color: #afb3c0; } #select-arrow, @@ -4858,10 +4827,12 @@ .dijitTitlePane { border-radius: 1px; - box-shadow: 0px 2px 8px 0px hsla(230, 13%, 9%, 0.02); + box-shadow: 0 1px 3px var(--color-palette-black-op-10), + 0 1px 2px var(--color-palette-black-op-20); } .dijitTitlePaneHover { - box-shadow: 0px 4px 8px 0px hsla(230, 13%, 9%, 0.06); + box-shadow: 0 3px 6px var(--color-palette-black-op-10), + 0 3px 6px var(--color-palette-black-op-20); } .dijitTitlePaneHover .dijitTitlePaneContentOuter { border: none; @@ -4917,7 +4888,8 @@ background-color: #ffffff; border-radius: 0px; border: none; - box-shadow: 0px 4px 8px 0px hsla(230, 13%, 9%, 0.06); + box-shadow: 0 3px 6px var(--color-palette-black-op-10), + 0 3px 6px var(--color-palette-black-op-20); } .dijitDialogCloseIcon { width: 17px; @@ -4971,7 +4943,7 @@ color: #14151a; border: 0 none; border-radius: 0.375rem; - box-shadow: 0px 10px 18px 0px hsla(230, 13%, 9%, 0.1); + box-shadow: 0px 0px 4px rgba(20, 21, 26, 0.04), 0px 8px 16px rgba(20, 21, 26, 0.08); padding: 0.5rem; margin-top: 0.5rem; } @@ -5550,7 +5522,7 @@ color: #14151a; border: 0 none; border-radius: 0.375rem; - box-shadow: 0px 10px 18px 0px hsla(230, 13%, 9%, 0.1); + box-shadow: 0px 0px 4px rgba(20, 21, 26, 0.04), 0px 8px 16px rgba(20, 21, 26, 0.08); padding: 0.5rem; margin-top: 0.5rem; } @@ -10445,9 +10417,12 @@ a.tag_higlighted { } .content-search__result-item { - display: flex; - align-items: center; - gap: 0.5rem; + padding-left: 24px; + position: relative; +} +.content-search__result-item .dijitCheckBox { + position: absolute; + left: 0; } .content-search__action-item { @@ -10805,6 +10780,11 @@ a.tag_higlighted { height: 6px; } +.portlet-sidebar .dijitCheckBox { + position: relative; + bottom: 2px; +} + .dijitContentPane .buttonRow { margin-bottom: 15px; } @@ -10930,7 +10910,8 @@ a.tag_higlighted { } .context-menu { - box-shadow: 0px 4px 8px 0px hsla(230, 13%, 9%, 0.06); + box-shadow: 0 3px 6px var(--color-palette-black-op-10), + 0 3px 6px var(--color-palette-black-op-20); position: absolute; background: #ffffff; border: 1px solid #d1d4db;