From 29f5721b3a5188aaa9bff51a8af60800ce8c48a0 Mon Sep 17 00:00:00 2001 From: Jalinson Diaz Date: Fri, 25 Aug 2023 09:50:19 -0300 Subject: [PATCH] Fix #25862: UI Issues after CSS changes (#25864) * fix (storybook): wrong import in searchable dropdown story * fix (searchable dropdown component): Add overflow support for long texts * fix (jsp components): change styles that were off after css changes * fix (dot template thumbnail field style): button and input styles were off * fix (comboBox styles): height of input needs to be 100% * fix (general styles): modifying styles that were off * dev (chips styles): create chips common extend * fix (chip extend): general cleanup * fix (tags and textarea dojo): general cleanup * fix (dojo styles and components): general clean up * fix (dojo menu): wrong height setting * fix (dojo calendar styles): increment/decrement arrows were missing * fix (item disable extend): delete unnecessary color --- ...ot-template-thumbnail-field.component.scss | 17 +- .../searchable-dropdown.component.scss | 12 +- .../searchable-dropdown.component.stories.ts | 7 +- .../components/buttons/_button.scss | 3 +- .../components/form/_autocomplete.scss | 26 ++- .../components/form/_multiselect.scss | 31 ++- .../dotcms-theme/components/form/common.scss | 14 +- core-web/libs/dotcms-scss/jsp/css/dotcms.css | 164 +++++++++------ .../scss/backend/dot-admin/forms/_fields.scss | 40 ++-- .../dotcms-scss/jsp/scss/dijit/_calendar.scss | 10 +- .../dotcms-scss/jsp/scss/dijit/_menu.scss | 2 + .../jsp/scss/dijit/form/_combobox.scss | 2 +- .../jsp/scss/dijit/form/_textArea.scss | 1 + .../webapp/html/css/dijit-dotcms/dotcms.css | 60 +++--- .../dijit/form/RolesFilteringSelect.html | 2 - .../ext/browser/view_browser_js_inc.jsp | 2 +- .../cmsmaintenance/view_cms_maintenance.jsp | 190 +++++++++--------- .../languagesmanager/edit_language_keys.jsp | 114 +++++------ .../remotepublish/add_to_bundle_dialog.jsp | 2 +- 19 files changed, 390 insertions(+), 309 deletions(-) diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-props/dot-template-thumbnail-field/dot-template-thumbnail-field.component.scss b/core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-props/dot-template-thumbnail-field/dot-template-thumbnail-field.component.scss index e6096ade1256..3c4033522c43 100644 --- a/core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-props/dot-template-thumbnail-field/dot-template-thumbnail-field.component.scss +++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-templates/dot-template-create-edit/dot-template-props/dot-template-thumbnail-field/dot-template-thumbnail-field.component.scss @@ -1,5 +1,6 @@ @use "variables" as *; @import "dotcms-theme/components/form/common"; +@import "dotcms-theme/components/buttons/common"; dot-binary-file { display: block; @@ -10,9 +11,6 @@ dot-binary-file { input { @extend #form-field-extend; - border-top-left-radius: $border-radius-xs; - border-bottom-left-radius: $border-radius-xs; - padding: 1.07rem; width: 100%; } } @@ -22,8 +20,17 @@ dot-binary-file { } button { - border-top-right-radius: $border-radius-xs; - border-bottom-right-radius: $border-radius-xs; + all: unset; + @extend #main-primary-severity; + background-color: $color-palette-primary; + display: block; + height: $field-height-md; + font-size: $font-size-md; + color: $white; + border-radius: $border-radius-md; + padding: 0 $spacing-3; + text-transform: capitalize; + margin-left: $spacing-0; } .dot-file-preview__info { diff --git a/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.scss b/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.scss index fed8a9707149..6d7b9c951c49 100644 --- a/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.scss +++ b/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.scss @@ -8,13 +8,14 @@ position: relative; ::ng-deep .p-element.p-button:enabled { - justify-content: space-between; + gap: $spacing-1; text-align: left; padding: 0; padding-left: $spacing-1; border: $field-border-size solid $color-palette-gray-400; .p-button-label { + @include truncate-text; text-transform: none; color: $black; } @@ -22,10 +23,17 @@ .p-button-icon { @extend #field-trigger; @extend #field-trigger-icon; - height: 100%; display: flex; align-items: center; justify-content: center; + + &:before { + display: flex; + align-items: center; + justify-content: center; + width: $field-height-md; + aspect-ratio: 1/1; + } } &:hover { diff --git a/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.stories.ts b/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.stories.ts index c290e908ae6a..e7c029cdfe89 100644 --- a/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.stories.ts +++ b/core-web/apps/dotcms-ui/src/app/view/components/_common/searchable-dropdown/component/searchable-dropdown.component.stories.ts @@ -28,7 +28,7 @@ export default { }, decorators: [ moduleMetadata({ - declarations: [DotMessagePipe, SearchableDropdownComponent], + declarations: [SearchableDropdownComponent], imports: [ BrowserAnimationsModule, ButtonModule, @@ -37,7 +37,8 @@ export default { DotIconModule, FormsModule, InputTextModule, - OverlayPanelModule + OverlayPanelModule, + DotMessagePipe ] }) ], @@ -71,7 +72,7 @@ export default { }, data: [ { - label: 'This is an option', + label: 'This is a really long option to test the power of the ellipsis in this component', value: 'option1' }, { diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/buttons/_button.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/buttons/_button.scss index c99e291da44d..172aa1296eeb 100644 --- a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/buttons/_button.scss +++ b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/buttons/_button.scss @@ -51,8 +51,7 @@ } // Severity for basic button -.p-button:enabled, -.p-button.p-element { +.p-button.p-element:enabled { @extend #main-primary-severity; &.p-button-secondary { diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_autocomplete.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_autocomplete.scss index 8416552a6594..f99d3c8cc79c 100644 --- a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_autocomplete.scss +++ b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_autocomplete.scss @@ -23,9 +23,19 @@ } } + .p-autocomplete-dropdown.p-button.p-element { + &:hover, + &:focus, + &:active { + outline: none; + background-color: $color-palette-gray-200; + } + } + &.p-autocomplete-multiple { .p-autocomplete-multiple-container { - padding: 0.375rem $spacing-2; + display: flex; + align-items: center; max-height: 13rem; // 208px overflow: auto; // Make it scrollable @@ -35,16 +45,12 @@ border: none; } + &:has(> .p-autocomplete-token) { + padding: $spacing-1 0; + } + .p-autocomplete-token { - padding: 0.375rem $spacing-2; - margin-right: $spacing-1; - background: $color-palette-primary-200; - color: $color-palette-primary; - border-radius: $field-border-radius; - - .p-autocomplete-token-icon { - margin-left: $spacing-1; - } + @extend #field-chip; } .p-autocomplete-input-token { diff --git a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_multiselect.scss b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_multiselect.scss index faf1c535ddcc..08ee05ebcb91 100644 --- a/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_multiselect.scss +++ b/core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_multiselect.scss @@ -6,6 +6,8 @@ @extend #form-field-base; min-width: 13rem; padding-right: 0; + min-height: $field-height-md; + height: auto; &:not(.p-multiselect-open):hover { @extend #form-field-hover; @@ -17,16 +19,26 @@ } .p-multiselect-label-container { - padding: $spacing-1 0; + display: flex; + align-items: center; padding-right: $spacing-1; + .p-multiselect-label:not(.p-placeholder) { color: $black; @include truncate-text; + + &:has(> .p-multiselect-token) { + padding: $spacing-1 0; + height: auto; + flex-wrap: wrap; + overflow: visible; + } } } .p-multiselect-trigger { @extend #field-trigger; + height: auto; .p-multiselect-trigger-icon { @extend #field-trigger-icon; @@ -51,24 +63,11 @@ color: $color-palette-gray-800; .p-multiselect-label { - gap: $spacing-1; - padding: $spacing-1; - } - - .p-multiselect-label.p-placeholder { - padding: $spacing-3; + gap: $spacing-0; } .p-multiselect-token { - align-items: center; - background: $color-palette-primary-op-10; - border-radius: $border-radius-sm; - color: $color-palette-primary; - display: flex; - gap: $spacing-1; - justify-content: center; - margin-right: $spacing-1; - padding: $spacing-1; + @extend #field-chip; } } } 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 87b251c42f4a..5672256230c8 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 @@ -131,7 +131,6 @@ #field-panel-item-disabled { @extend #form-field-disabled; - color: $color-palette-gray-500; cursor: initial; } @@ -143,3 +142,16 @@ border: 2px solid $color-palette-gray-400; } } + +#field-chip { + height: 1.5rem; + padding: $spacing-1; + background: $color-palette-primary-200; + border-radius: $border-radius-sm; + color: $color-palette-primary; + font-size: $font-size-sm; + display: flex; + align-items: center; + justify-content: center; + gap: $spacing-0; +} diff --git a/core-web/libs/dotcms-scss/jsp/css/dotcms.css b/core-web/libs/dotcms-scss/jsp/css/dotcms.css index 994279722c34..34042a3b0adc 100644 --- a/core-web/libs/dotcms-scss/jsp/css/dotcms.css +++ b/core-web/libs/dotcms-scss/jsp/css/dotcms.css @@ -3532,6 +3532,7 @@ .dijitButton, .dijitComboButton, +.dijitComboButton > *, .dijitDropDownButton, .dijitSelect, .dijitTextBox, @@ -3621,40 +3622,50 @@ height: 0; width: 0; } -.dijitTextBoxHover { +.dijitTextBoxHover, +.dijitTextBox:hover { background-color: #ffffff; border: solid 1.5px var(--color-palette-primary-400); } -.dijitTextBoxHover .dijitInputInner { +.dijitTextBoxHover .dijitInputInner, +.dijitTextBox:hover .dijitInputInner { color: #14151a; } -.dijitTextBoxHover .dijitArrowButton { +.dijitTextBoxHover .dijitArrowButton, +.dijitTextBox:hover .dijitArrowButton { background-color: #ffffff; border-left: solid 1.5px var(--color-palette-primary-400); } -.dijitTextBoxHover .dijitArrowButton:before { +.dijitTextBoxHover .dijitArrowButton:before, +.dijitTextBox:hover .dijitArrowButton:before { border-top-color: var(--color-palette-primary-500); } -.dijitTextBoxHover .dijitDownArrowButtonHover { +.dijitTextBoxHover .dijitDownArrowButtonHover, +.dijitTextBox:hover .dijitDownArrowButtonHover { background-color: #ffffff; border-left: solid 1.5px var(--color-palette-primary-400); } -.dijitTextBoxHover .dijitDownArrowButtonHover:before { +.dijitTextBoxHover .dijitDownArrowButtonHover:before, +.dijitTextBox:hover .dijitDownArrowButtonHover:before { border-top-color: var(--color-palette-primary-500); } -.dijitTextBoxFocused { +.dijitTextBoxFocused, +.dijitTextBox:focus { border: solid 1.5px var(--color-palette-primary-400); background-color: #ffffff; outline: 2.8px solid var(--color-palette-primary-op-20); } -.dijitTextBoxFocused .dijitInputInner { +.dijitTextBoxFocused .dijitInputInner, +.dijitTextBox:focus .dijitInputInner { color: #14151a; } -.dijitTextBoxFocused .dijitArrowButton { +.dijitTextBoxFocused .dijitArrowButton, +.dijitTextBox:focus .dijitArrowButton { background-color: #ffffff; border-left: solid 1.5px var(--color-palette-primary-400); } -.dijitTextBoxFocused .dijitArrowButton:before { +.dijitTextBoxFocused .dijitArrowButton:before, +.dijitTextBox:focus .dijitArrowButton:before { left: 50%; margin-left: -5px; margin-top: -2.5px; @@ -3667,11 +3678,13 @@ height: 0; width: 0; } -.dijitTextBoxFocused .dijitDownArrowButtonHover { +.dijitTextBoxFocused .dijitDownArrowButtonHover, +.dijitTextBox:focus .dijitDownArrowButtonHover { background-color: var(--color-palette-primary-500); border-left: var(--color-palette-primary-500); } -.dijitTextBoxFocused .dijitDownArrowButtonHover:before { +.dijitTextBoxFocused .dijitDownArrowButtonHover:before, +.dijitTextBox:focus .dijitDownArrowButtonHover:before { left: 50%; margin-left: -5px; margin-top: -2.5px; @@ -3684,15 +3697,18 @@ height: 0; width: 0; } -.dijitTextBoxDisabled { +.dijitTextBoxDisabled, +.dijitTextBox:disabled { border: solid 1.5px #f3f3f4; background-color: #fafafb; } -.dijitTextBoxDisabled .dijitArrowButton { +.dijitTextBoxDisabled .dijitArrowButton, +.dijitTextBox:disabled .dijitArrowButton { background-color: #fafafb; border-left: solid 1.5px #f3f3f4; } -.dijitTextBoxDisabled .dijitArrowButton:before { +.dijitTextBoxDisabled .dijitArrowButton:before, +.dijitTextBox:disabled .dijitArrowButton:before { left: 50%; margin-left: -5px; margin-top: -2.5px; @@ -3705,10 +3721,12 @@ height: 0; width: 0; } -.dijitTextBoxDisabled .dijitPlaceHolder { +.dijitTextBoxDisabled .dijitPlaceHolder, +.dijitTextBox:disabled .dijitPlaceHolder { color: #6c7389; } -.dijitTextBoxDisabled .dijitInputInner { +.dijitTextBoxDisabled .dijitInputInner, +.dijitTextBox:disabled .dijitInputInner { color: #6c7389; } .dijitTextBoxError { @@ -3737,6 +3755,7 @@ color: #14151a; font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; padding: 0.5rem; + font-size: 1rem; } .dijitTextAreaHover { background-color: #ffffff; @@ -3924,6 +3943,7 @@ } .dijitButtonNode { border: none; + font-size: 1rem; } .dijitButtonHover { background-color: var(--color-palette-primary-100); @@ -4482,7 +4502,7 @@ overflow: hidden; } .dijitComboBox input { - height: auto; + height: 100%; padding: 0; } .dijitComboBox .dijitArrowButton { @@ -4494,51 +4514,61 @@ .dijitComboBox .dijitArrowButton:before { border-top-color: var(--color-palette-primary-500); } -.dijitComboBoxHover { +.dijitComboBoxHover, +.dijitComboBox:hover { background-color: #ffffff; border: solid 1.5px var(--color-palette-primary-400); } -.dijitComboBoxHover .dijitArrowButton { +.dijitComboBoxHover .dijitArrowButton, +.dijitComboBox:hover .dijitArrowButton { background-color: #f3f3f4; border-left: solid 1.5px var(--color-palette-primary-400); } -.dijitComboBoxHover .dijitArrowButton:before { +.dijitComboBoxHover .dijitArrowButton:before, +.dijitComboBox:hover .dijitArrowButton:before { border-top-color: var(--color-palette-primary-500); } -.dijitComboBoxHover .dijitDownArrowButtonHover { +.dijitComboBoxHover .dijitDownArrowButtonHover, +.dijitComboBox:hover .dijitDownArrowButtonHover { background-color: #f3f3f4; border-left: solid 1.5px var(--color-palette-primary-400); } -.dijitComboBoxHover .dijitDownArrowButtonHover:before { +.dijitComboBoxHover .dijitDownArrowButtonHover:before, +.dijitComboBox:hover .dijitDownArrowButtonHover:before { border-top-color: var(--color-palette-primary-500); } -.dijitComboBoxFocused { +.dijitComboBoxFocused, +.dijitComboBox:focus { border: solid 1.5px var(--color-palette-primary-400); - background-color: #ffffff; } -.dijitComboBoxFocused .dijitArrowButton { - background-color: #f3f3f4; +.dijitComboBoxFocused .dijitArrowButton, +.dijitComboBox:focus .dijitArrowButton { border-left: solid 1.5px var(--color-palette-primary-400); } -.dijitComboBoxFocused .dijitDownArrowButtonHover { - background-color: #f3f3f4; +.dijitComboBoxFocused .dijitDownArrowButtonHover, +.dijitComboBox:focus .dijitDownArrowButtonHover { border-left: solid 1.5px var(--color-palette-primary-400); } -.dijitComboBoxDisabled { +.dijitComboBoxDisabled, +.dijitComboBox:disabled { border: solid 1.5px #f3f3f4; background-color: #f3f3f4; } -.dijitComboBoxDisabled .dijitArrowButton { +.dijitComboBoxDisabled .dijitArrowButton, +.dijitComboBox:disabled .dijitArrowButton { background-color: #f3f3f4; border-left: solid 1.5px #f3f3f4; } -.dijitComboBoxDisabled .dijitArrowButton:before { +.dijitComboBoxDisabled .dijitArrowButton:before, +.dijitComboBox:disabled .dijitArrowButton:before { border-top-color: #6c7389; } -.dijitComboBoxDisabled .dijitPlaceHolder { +.dijitComboBoxDisabled .dijitPlaceHolder, +.dijitComboBox:disabled .dijitPlaceHolder { color: #afb3c0; } -.dijitComboBoxDisabled .dijitInputInner { +.dijitComboBoxDisabled .dijitInputInner, +.dijitComboBox:disabled .dijitInputInner { color: #afb3c0; } .dijitComboBoxError { @@ -5293,7 +5323,13 @@ position: relative; width: 2.5rem; } +.dijitCalendarDecrementArrow, +.dijitCalendarDecrease { + position: absolute; +} +.dijitCalendarDecrementArrow:before, .dijitCalendarDecrease:before { + position: relative; left: 50%; margin-left: -2.5px; margin-top: -5px; @@ -5306,7 +5342,14 @@ height: 0; width: 0; } +.dijitCalendarIncrementArrow, +.dijitCalendarIncrease { + position: absolute; + right: 0.5rem; +} +.dijitCalendarIncrementArrow:before, .dijitCalendarIncrease:before { + position: relative; left: 50%; margin-left: -2.5px; margin-top: -5px; @@ -5407,6 +5450,7 @@ .dijitMenu { padding: 0; + border: 0 none; } .dijitMenu .dijitMenuItem { display: flex; @@ -5451,6 +5495,7 @@ 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; + max-height: 17.5rem !important; } .dijitComboBoxMenuPopup .dijitMenuItem { display: flex; @@ -9317,37 +9362,27 @@ Styles for commons fields along the backend } .tagLink { - background: #f3f3f4; - border-radius: 0.125rem; - border: solid 1.5px #d1d4db; - display: inline-block; - font-size: 12px; - margin: 2px 5px 2px 0px; - padding: 3px 25px 4px 5px; - position: relative; + height: 1.5rem; + padding: 0.5rem; + background: var(--color-palette-primary-200); + border-radius: 0.25rem; + color: var(--color-palette-primary-500); + font-size: 0.875rem; + display: flex; + align-items: center; + justify-content: center; + gap: 0.25rem; text-decoration: none; - vertical-align: middle; -} -.tagLink.persona { - padding: 3px 25px 4px; } .tagLink.persona:before { content: '\f007'; - display: block; - left: 8px; - position: absolute; - top: 2px; + display: flex; } .tagLink:after { - color: #6c7389; + color: var(--color-palette-primary-500); content: '✕'; - font-size: 10px; - line-height: 21px; - position: absolute; - right: 0px; + font-size: 0.875rem; text-align: center; - top: 0px; - width: 20px; } .tagLink:hover { border: 1px solid var(--color-palette-primary-500); @@ -9357,8 +9392,12 @@ Styles for commons fields along the backend position: relative; } .tagsWrapper .dijitTextBox { + min-height: 2.5rem; height: auto; - padding: 3px 5px; + padding: 0.5rem; + display: flex; + flex-wrap: wrap; + gap: 0.5rem; } .tagsWrapper .dijitInputContainer { display: inline-block; @@ -11673,14 +11712,17 @@ Resize Handle url('/dotAdmin/assets/roboto-v27-vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ } -body { - margin: 0; - padding: 0; +html { font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 1rem; color: #14151a; } +body { + margin: 0; + padding: 0; +} + .material-icons { font-family: 'Material Icons', sans-serif; font-weight: normal; diff --git a/core-web/libs/dotcms-scss/jsp/scss/backend/dot-admin/forms/_fields.scss b/core-web/libs/dotcms-scss/jsp/scss/backend/dot-admin/forms/_fields.scss index 2260b4968491..18aa318c26a0 100644 --- a/core-web/libs/dotcms-scss/jsp/scss/backend/dot-admin/forms/_fields.scss +++ b/core-web/libs/dotcms-scss/jsp/scss/backend/dot-admin/forms/_fields.scss @@ -257,40 +257,31 @@ $key-val-width: 500px; } .tagLink { - background: $color-palette-gray-200; - border-radius: $border-radius-xs; - border: $field-normal-border; - display: inline-block; - font-size: 12px; - margin: 2px 5px 2px 0px; - padding: 3px 25px 4px 5px; - position: relative; + height: 1.5rem; + padding: $spacing-1; + background: $color-palette-primary-200; + border-radius: $border-radius-sm; + color: $color-palette-primary; + font-size: $font-size-sm; + display: flex; + align-items: center; + justify-content: center; + gap: $spacing-0; text-decoration: none; - vertical-align: middle; &.persona { - padding: 3px 25px 4px; - &:before { @extend #dijit-icon; content: $fa-var-user; - display: block; - left: 8px; - position: absolute; - top: 2px; + display: flex; } } &:after { - color: $color-palette-gray-700; + color: $color-palette-primary; content: "\2715"; - font-size: 10px; - line-height: 21px; - position: absolute; - right: 0px; + font-size: $font-size-sm; text-align: center; - top: 0px; - width: 20px; } &:hover { @@ -304,7 +295,10 @@ $key-val-width: 500px; .dijitTextBox { min-height: $field-height-md; height: auto; // This fields grows while we add tags, we can't have a fix height. - padding: 3px 5px; + padding: $spacing-1; + display: flex; + flex-wrap: wrap; + gap: $spacing-1; } .dijitInputContainer { diff --git a/core-web/libs/dotcms-scss/jsp/scss/dijit/_calendar.scss b/core-web/libs/dotcms-scss/jsp/scss/dijit/_calendar.scss index 118bb1e1b894..63233528ac83 100644 --- a/core-web/libs/dotcms-scss/jsp/scss/dijit/_calendar.scss +++ b/core-web/libs/dotcms-scss/jsp/scss/dijit/_calendar.scss @@ -37,9 +37,11 @@ width: $calendar-item-size; } - &Decrease { + &DecrementArrow { + position: absolute; &:before { // TODO: add option for image icon + position: relative; @include create-arrow( $calendar-dropdown-arrow-size, $calendar-dropdown-arrow-color, @@ -48,8 +50,11 @@ } } - &Increase { + &IncrementArrow { + position: absolute; + right: $spacing-1; &:before { + position: relative; @include create-arrow( $calendar-dropdown-arrow-size, $calendar-dropdown-arrow-color, @@ -70,6 +75,7 @@ } .dijitDropDownButton { + margin-top: $spacing-0; border-radius: 0; background-color: transparent; height: calc(calc($field-height-md - 0.625rem) + ($field-border-size * 2)); diff --git a/core-web/libs/dotcms-scss/jsp/scss/dijit/_menu.scss b/core-web/libs/dotcms-scss/jsp/scss/dijit/_menu.scss index bf1abd7c2729..9ed4ba0ac264 100644 --- a/core-web/libs/dotcms-scss/jsp/scss/dijit/_menu.scss +++ b/core-web/libs/dotcms-scss/jsp/scss/dijit/_menu.scss @@ -1,5 +1,6 @@ .dijitMenu { padding: 0; + border: 0 none; .dijitMenuItem { display: flex; @@ -54,6 +55,7 @@ box-shadow: $md-shadow-6; padding: $spacing-1; margin-top: $spacing-1; + max-height: 17.5rem !important; .dijitMenuItem { display: flex; diff --git a/core-web/libs/dotcms-scss/jsp/scss/dijit/form/_combobox.scss b/core-web/libs/dotcms-scss/jsp/scss/dijit/form/_combobox.scss index a8feee5ce251..6ef795b9c2df 100644 --- a/core-web/libs/dotcms-scss/jsp/scss/dijit/form/_combobox.scss +++ b/core-web/libs/dotcms-scss/jsp/scss/dijit/form/_combobox.scss @@ -5,7 +5,7 @@ overflow: hidden; input { - height: auto; + height: 100%; padding: 0; } diff --git a/core-web/libs/dotcms-scss/jsp/scss/dijit/form/_textArea.scss b/core-web/libs/dotcms-scss/jsp/scss/dijit/form/_textArea.scss index 12d65f6d703c..827c588c3de9 100644 --- a/core-web/libs/dotcms-scss/jsp/scss/dijit/form/_textArea.scss +++ b/core-web/libs/dotcms-scss/jsp/scss/dijit/form/_textArea.scss @@ -4,6 +4,7 @@ color: $textarea-normal-textcolor; font-family: $font-default; padding: $field-padding; + font-size: $font-size-md; &Hover { background-color: $textarea-hover-bgcolor; 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 c0b9ab4bd320..d79e97fa85a2 100644 --- a/dotCMS/src/main/webapp/html/css/dijit-dotcms/dotcms.css +++ b/dotCMS/src/main/webapp/html/css/dijit-dotcms/dotcms.css @@ -3343,6 +3343,7 @@ color: #14151a; font-family: Roboto, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; padding: 0.5rem; + font-size: 1rem; } .dijitTextAreaHover { background-color: #ffffff; @@ -4072,7 +4073,7 @@ overflow: hidden; } .dijitComboBox input { - height: auto; + height: 100%; padding: 0; } .dijitComboBox .dijitArrowButton { @@ -4850,7 +4851,11 @@ position: relative; width: 2.5rem; } -.dijitCalendarDecrease:before { +.dijitCalendarDecrementArrow { + position: absolute; +} +.dijitCalendarDecrementArrow:before { + position: relative; left: 50%; margin-left: -2.5px; margin-top: -5px; @@ -4863,7 +4868,12 @@ height: 0; width: 0; } -.dijitCalendarIncrease:before { +.dijitCalendarIncrementArrow { + position: absolute; + right: 0.5rem; +} +.dijitCalendarIncrementArrow:before { + position: relative; left: 50%; margin-left: -2.5px; margin-top: -5px; @@ -4887,6 +4897,7 @@ line-height: 1.875rem; } .dijitCalendarMonthContainer .dijitDropDownButton { + margin-top: 0.25rem; border-radius: 0; background-color: transparent; height: calc(1.875rem + 3px); @@ -4961,6 +4972,7 @@ .dijitMenu { padding: 0; + border: 0 none; } .dijitMenu .dijitMenuItem { display: flex; @@ -5005,6 +5017,7 @@ 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; + max-height: 17.5rem !important; } .dijitComboBoxMenuPopup .dijitMenuItem { display: flex; @@ -8849,37 +8862,27 @@ Styles for commons fields along the backend } .tagLink { - background: #f3f3f4; - border-radius: 0.125rem; - border: solid 1.5px #d1d4db; - display: inline-block; - font-size: 12px; - margin: 2px 5px 2px 0px; - padding: 3px 25px 4px 5px; - position: relative; + height: 1.5rem; + padding: 0.5rem; + background: var(--color-palette-primary-200); + border-radius: 0.25rem; + color: var(--color-palette-primary-500); + font-size: 0.875rem; + display: flex; + align-items: center; + justify-content: center; + gap: 0.25rem; text-decoration: none; - vertical-align: middle; -} -.tagLink.persona { - padding: 3px 25px 4px; } .tagLink.persona:before { content: "\f007"; - display: block; - left: 8px; - position: absolute; - top: 2px; + display: flex; } .tagLink:after { - color: #6c7389; + color: var(--color-palette-primary-500); content: "✕"; - font-size: 10px; - line-height: 21px; - position: absolute; - right: 0px; + font-size: 0.875rem; text-align: center; - top: 0px; - width: 20px; } .tagLink:hover { border: 1px solid var(--color-palette-primary-500); @@ -8891,7 +8894,10 @@ Styles for commons fields along the backend .tagsWrapper .dijitTextBox { min-height: 2.5rem; height: auto; - padding: 3px 5px; + padding: 0.5rem; + display: flex; + flex-wrap: wrap; + gap: 0.5rem; } .tagsWrapper .dijitInputContainer { display: inline-block; diff --git a/dotCMS/src/main/webapp/html/js/dotcms/dijit/form/RolesFilteringSelect.html b/dotCMS/src/main/webapp/html/js/dotcms/dijit/form/RolesFilteringSelect.html index 71c48a23f613..4ffe0c17a362 100644 --- a/dotCMS/src/main/webapp/html/js/dotcms/dijit/form/RolesFilteringSelect.html +++ b/dotCMS/src/main/webapp/html/js/dotcms/dijit/form/RolesFilteringSelect.html @@ -1,7 +1,6 @@
-
@@ -11,6 +10,5 @@ autocomplete="off" tabindex="0" value="" dojoAttachEvent='onkeyup:filterTree' />
-
diff --git a/dotCMS/src/main/webapp/html/portlet/ext/browser/view_browser_js_inc.jsp b/dotCMS/src/main/webapp/html/portlet/ext/browser/view_browser_js_inc.jsp index 6ac46db3ce6a..56c3a5df8034 100644 --- a/dotCMS/src/main/webapp/html/portlet/ext/browser/view_browser_js_inc.jsp +++ b/dotCMS/src/main/webapp/html/portlet/ext/browser/view_browser_js_inc.jsp @@ -1659,7 +1659,7 @@ Structure defaultFileAssetStructure = CacheLocator.getContentTypeCache().getStru var pageAssetDialog = new dijit.Dialog({ id : "addPageAssetDialog", title: "<%= UtilMethods.escapeSingleQuotes(LanguageUtil.get(pageContext, "addpage.dialog")) %>", - style: "width: 311px; height:160px; overflow: auto" + style: "height:160px; overflow: auto" }); var dialogHtml = getHTMLPageAssetDialogHtml(); diff --git a/dotCMS/src/main/webapp/html/portlet/ext/cmsmaintenance/view_cms_maintenance.jsp b/dotCMS/src/main/webapp/html/portlet/ext/cmsmaintenance/view_cms_maintenance.jsp index 6b6c21658ece..7ed60de8865c 100644 --- a/dotCMS/src/main/webapp/html/portlet/ext/cmsmaintenance/view_cms_maintenance.jsp +++ b/dotCMS/src/main/webapp/html/portlet/ext/cmsmaintenance/view_cms_maintenance.jsp @@ -81,11 +81,11 @@ function checkReindexationCallback (response) { var newIndexPath = response.entity.newIndexPath; var reindexTimeElapsed = response.entity.reindexTimeElapsed; var failedRecords = response.entity.errorCount; - + if(failedRecords > 0){ dojo.byId("failedReindexRecordsDiv").style.display=""; dojo.byId("failedReindexRecordsMessage").innerHTML= failedRecords; - + }else{ dojo.byId("failedReindexRecordsDiv").style.display="none"; } @@ -141,28 +141,28 @@ function deleteFailedRecords () { } -/** Stops de re-indexation process and clears the database table that contains +/** Stops de re-indexation process and clears the database table that contains the remaining non re-indexed records. */ function stopReIndexing(){ - + fetch('/api/v1/esindex/reindex?switch=false', {method:'DELETE',cache: 'no-cache'} ) .then(response => response.json()) .then(data =>checkReindexationCallback(data)); - + } -/** Stops de re-indexation process and clears the database table that contains - the remaining non re-indexed records. Moreover, switches the current index +/** Stops de re-indexation process and clears the database table that contains + the remaining non re-indexed records. Moreover, switches the current index to point to the new one. */ function stopReIndexingAndSwitchover() { fetch('/api/v1/esindex/reindex?switch=true', {method:'DELETE',cache: 'no-cache'} ) .then(response => response.json()) .then(data =>checkReindexationCallback(data)); - + } -/** Downloads the main information of the records that could not be re-indexed +/** Downloads the main information of the records that could not be re-indexed as a .CSV file*/ function downloadFailedAsJson() { var href = "/api/v1/esindex/failed"; @@ -188,25 +188,25 @@ function deleteIndex(indexName, live){ if(live && ! confirm("<%= UtilMethods.escapeDoubleQuotes(LanguageUtil.get(pageContext, "Delete-Live-Index")) %>")){ return; } - + fetch('/api/v1/esindex/' + indexName, {method:'DELETE',cache: 'no-cache'} ) .then(response => response.json()) .then(()=>refreshIndexStats()); - + } function refreshIndexStats(){ var x = dijit.byId("indexStatsCp"); var y =Math.floor(Math.random()*1123213213); - + x.attr( "href","/html/portlet/ext/cmsmaintenance/index_stats.jsp?r=" + y ); - + /** fetch('/api/v1/index', {cache: 'no-cache'}) .then(response => response.json()) - .then(data =>paintStatusTable(data)) + .then(data =>paintStatusTable(data)) **/ } @@ -225,7 +225,7 @@ function doReindex(){ } } dijit.byId('structure').reset(); - + fetch('/api/v1/esindex/reindex?shards=' + shards + '&contentType=' + contentType, {method:'POST'}) .then(response => response.json()) .then(data =>checkReindexationCallback(data)) @@ -267,7 +267,7 @@ function doActivateIndex(indexName){ fetch('/api/v1/esindex/' + indexName, {method:'PUT'} ) .then(response => response.json()) - + .then(()=>refreshIndexStats()); } @@ -289,32 +289,32 @@ function doDeactivateIndex(indexName){ function toggleRollingShutdown(){ let show = document.getElementById("rollingShutdownInfo").style.display; document.getElementById("rollingShutdownInfo").style.display=(show=='none') ? '':'none'; - + } function doShutdownDotcms(){ - + if(dijit.byId("agreeToShutdown") && !dijit.byId("agreeToShutdown").checked){ alert("<%=UtilMethods.escapeDoubleQuotes(LanguageUtil.get(pageContext, "Please agree with the disclaimer"))%>") return; } - + if(dijit.byId("agreeToShutdown") && !confirm("<%=UtilMethods.escapeDoubleQuotes(LanguageUtil.get(pageContext, "shutdown.dotcms.confirmation"))%>")){ return; } - + let rollingShutdown = false; - + if(dijit.byId("rollingShutdown")){ rollingShutdown = dijit.byId("rollingShutdown").getValue(); } - + rollingShutdown = (rollingShutdown === 'true'); - - - + + + if(!rollingShutdown){ fetch('/api/v1/maintenance/_shutdown', {method:'DELETE'} ) .then(response => response.json()) @@ -328,9 +328,9 @@ function doShutdownDotcms(){ alert("<%=UtilMethods.escapeDoubleQuotes(LanguageUtil.get(pageContext, "Please enter a number for the restart delay"))%>") return; } - + let rollingRestartDelay = dijit.byId("rollingRestartDelay").getValue(); - + if(isNaN(parseInt( rollingRestartDelay ))){ rollingRestartDelay = <%=rollingRestartDelay%> ; }else{ @@ -345,7 +345,7 @@ function doShutdownDotcms(){ alert('shutdown started'); dijit.byId("rollingRestartDelay").setDisabled(true); }); - + } @@ -384,14 +384,14 @@ const indexTableRowTmpl = (data) => ``; /** - * + * */ function paintStatusTable(data){ - + const indexTable = document.getElementById("indexStatsCp"); - + indexTable.innerHTML=""; - + console.log("found rows:" + indexTable.rows.length); data.entity.forEach(function (item, index) { const data = {}; @@ -399,11 +399,11 @@ function paintStatusTable(data){ data.state = item.active ? "<%= LanguageUtil.get(pageContext,"active") %>" : item.building ? "<%= LanguageUtil.get(pageContext,"building") %>" : ""; data.indexName = item.indexName; data.created = item.created; - data.indexColor=item.health.status; - data.numberOfReplicas=item.health.numberOfReplicas; - data.numberOfShards=item.health.numberOfShards; - data.documentCount=(item.status === undefined) ? "n/a" : item.status.documentCount; - data.size=(item.status === undefined) ? "n/a" : item.status.size; + data.indexColor=item.health.status; + data.numberOfReplicas=item.health.numberOfReplicas; + data.numberOfShards=item.health.numberOfShards; + data.documentCount=(item.status === undefined) ? "n/a" : item.status.documentCount; + data.size=(item.status === undefined) ? "n/a" : item.status.size; let row = indexTable.insertRow(); row.outerHTML = indexTableRowTmpl(data); @@ -842,7 +842,7 @@ function loadUsers() { callback: function(sessionList) { // Append prefix to invalidate button id var invalidateButtonIdPrefix = "invalidateButtonNode-"; - + dojo.query('#loggedUsersProgress').style({display:"none"}); if(sessionList.length > 0) { @@ -1047,7 +1047,7 @@ function updateHostList(inode, name, selectval){ if(row!=null){ alert('<%= LanguageUtil.get(pageContext, "host-already-selected") %>'); }else{ - + if(hostId == 'all'){ var existingHostIds=dojo.byId("assetHost").value.split(","); for(var i = 0; i < existingHostIds.length; i++){ @@ -1063,8 +1063,8 @@ function updateHostList(inode, name, selectval){ if(nohosts!=null){ table.deleteRow(1); } - - + + var newRow = table.insertRow(table.rows.length); if((table.rows.length%2)==0){ newRow.className = "alternate_1"; @@ -1079,7 +1079,7 @@ function updateHostList(inode, name, selectval){ anchor.innerHTML = ''; cell0.appendChild(anchor); cell1.innerHTML = hostName; - + if((dojo.byId(inode).value == '') || (dojo.byId(inode).value == 'all')){ dojo.byId(inode).value = hostId; }else if(hostId == 'all'){ @@ -1133,11 +1133,11 @@ function assetHostListTable_deleteHost(hostId){ function showSystemVars(){ - - + + const keys = ["release", "jvm", "host" ,"environment","system"]; const currentDiv = document.getElementById("systemInfoDiv"); - + currentDiv.innerHTML=""; fetch('/api/v1/jvm') .then(response => response.json()) @@ -1160,13 +1160,13 @@ function showSystemVars(){ myDiv.appendChild(fieldSet); currentDiv.appendChild(myDiv); fieldSet.appendChild(label); - + table.className="listingTable propTable"; fieldSet.appendChild(table) - + Object.entries(data[key]).forEach(([key, value]) =>{ const tr = document.createElement("tr"); - + const th = document.createElement("th"); th.className="propTh"; const td = document.createElement("td"); @@ -1178,12 +1178,12 @@ function showSystemVars(){ td.innerHTML=value; }) - + }); - - - - + + + + }); } @@ -1315,7 +1315,7 @@ dd.leftdl {
-
+
@@ -1331,7 +1331,7 @@ dd.leftdl { -
" > +
" style="padding-bottom: 0;" > @@ -1348,8 +1348,8 @@ dd.leftdl { for (int i = 0; i <% } %> @@ -1465,7 +1465,7 @@ dd.leftdl {
- <%= LanguageUtil.get(pageContext,"Optimize-Index-Info") %> + <%= LanguageUtil.get(pageContext,"Optimize-Index-Info") %>
- <%= LanguageUtil.get(pageContext,"maintenance.index.cache.flush.info") %> + <%= LanguageUtil.get(pageContext,"maintenance.index.cache.flush.info") %>
@@ -1754,38 +1754,38 @@ dd.leftdl {
 
- - + +
<%= LanguageUtil.get(pageContext,"shutdown.dotcms.button") %>
- + <%if(System.getProperty("DOTCMS_CLUSTER_RESTART")!=null){ %> - +
System restarting @ <%=System.getProperty("DOTCMS_CLUSTER_RESTART")%>
 
- - + +
- + <%} else { %> - +
<%= LanguageUtil.get(pageContext,"shutdown.dotcms.disclaimer") %>
- +
<%= LanguageUtil.get(pageContext,"shutdown.dotcms.consent") %>: -
+
@@ -1797,24 +1797,24 @@ dd.leftdl {
<%} %> - + <%if(System.getProperty("DOTCMS_CLUSTER_RESTART")==null){ %>
- - + + <% List hosts = new ArrayList(); try{ @@ -1862,7 +1862,7 @@ dd.leftdl {
" >
- +
@@ -1944,13 +1944,13 @@ dd.leftdl { -
"> - - +
"> + + <%@ include file="/html/portlet/ext/cmsmaintenance/system_jobs.jsp" %> - - - + + +
@@ -1969,7 +1969,7 @@ dd.leftdl {        
- +
- + "> - +
-
+
- +
- + +
@@ -541,7 +541,7 @@ - +
@@ -579,8 +579,8 @@ diff --git a/dotCMS/src/main/webapp/html/portlet/ext/remotepublish/add_to_bundle_dialog.jsp b/dotCMS/src/main/webapp/html/portlet/ext/remotepublish/add_to_bundle_dialog.jsp index 837c511bbb5c..a4dcb9e97132 100644 --- a/dotCMS/src/main/webapp/html/portlet/ext/remotepublish/add_to_bundle_dialog.jsp +++ b/dotCMS/src/main/webapp/html/portlet/ext/remotepublish/add_to_bundle_dialog.jsp @@ -33,7 +33,7 @@ String inode=request.getParameter( "inode" );// DOTCMS-7085 <%--DATE FILTERING BOX--%>
-
+