From acad4c64fd6582928986f25add1598cbf23c03f4 Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Fri, 31 May 2024 10:31:18 +0200 Subject: [PATCH 1/2] fix(NcModal): Adjust modal header name and actions - Fix size and margin of header name to work with new server styles on Nextcloud 30+ - Fix focus-visible, hover and open color of header actions on bright color theme Signed-off-by: Ferdinand Thiessen --- src/components/NcModal/NcModal.vue | 43 +++++++++++++++++++++--------- 1 file changed, 30 insertions(+), 13 deletions(-) diff --git a/src/components/NcModal/NcModal.vue b/src/components/NcModal/NcModal.vue index b230cee4a9..2ea218a77d 100644 --- a/src/components/NcModal/NcModal.vue +++ b/src/components/NcModal/NcModal.vue @@ -19,6 +19,9 @@ depending on whether you require the Modal to stay within the DOM or not. Do not :outTransition="true" :hasNext="true" :hasPrevious="true"> +
Hello world
@@ -200,7 +203,7 @@ export default {

+ class="modal-header__name"> {{ name }}

@@ -239,7 +242,7 @@ export default { - + @@ -823,7 +826,7 @@ export default { overflow: hidden; transition: opacity 250ms, visibility 250ms; - .modal-name { + &__name { overflow-x: hidden; box-sizing: border-box; width: 100%; @@ -831,14 +834,14 @@ export default { transition: padding ease 100ms; white-space: nowrap; text-overflow: ellipsis; - color: #fff; - font-size: $icon-margin; - margin-bottom: 0; + color: #fff; // Always rendered on dark background + font-size: $icon-size; + margin-block: 0; } // On wider screens the name can be centered @media only screen and (min-width: $breakpoint-mobile) { - .modal-name { + &__name { padding-left: #{$clickable-area * 3}; // maximum actions is 3 text-align: center; } @@ -889,10 +892,6 @@ export default { } } - .header-actions { - color: white; - } - &:deep() .action-item { margin: math.div($header-height - $clickable-area, 2); @@ -906,9 +905,27 @@ export default { } } - :deep(button) { - // force white instead of default main text + // The modal ignores the color theme and adds a black backdrop + // so we need to add custom color of the actions toggle + .header-actions { + --open-background-color: #3e3e3e; color: #fff; + + :deep(button) { + // force white instead of default main text + color: #fff; + + &:hover, &:active { + // Also fix the hover color + background-color: var(--open-background-color) !important; + } + + // Fix the focus visible color + &:focus-visible { + box-shadow: none !important; + outline: 2px solid #fff !important; + } + } } // Force the Actions menu icon to be the same size as other icons From 25e7f4819f17d92de5e66ebb7379945c219eb836 Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Fri, 31 May 2024 11:48:12 +0200 Subject: [PATCH 2/2] fix(NcModal): Set color theme for modal header to dark Signed-off-by: Ferdinand Thiessen --- .reuse/dep5 | 2 +- src/components/NcModal/NcModal.vue | 25 ++------- styleguide/assets/additional.css | 1 + styleguide/assets/dark.css | 89 ++++++++++++++++++++++++++++++ 4 files changed, 95 insertions(+), 22 deletions(-) create mode 100644 styleguide/assets/dark.css diff --git a/.reuse/dep5 b/.reuse/dep5 index 6c3acbb682..f783d6ae69 100644 --- a/.reuse/dep5 +++ b/.reuse/dep5 @@ -7,7 +7,7 @@ Files: package.json package-lock.json .github/pull_request_template.md Copyright: Nextcloud GmbH and Nextcloud contributors License: AGPL-3.0-or-later -Files: styleguide/assets/icons.css styleguide/assets/server.css cypress/snapshots/* tests/unit/functions/usernameToColor/__snapshots__/usernameToColor.spec.js.snap +Files: styleguide/assets/dark.css styleguide/assets/icons.css styleguide/assets/server.css cypress/snapshots/* tests/unit/functions/usernameToColor/__snapshots__/usernameToColor.spec.js.snap Copyright: Nextcloud GmbH and Nextcloud contributors License: AGPL-3.0-or-later diff --git a/src/components/NcModal/NcModal.vue b/src/components/NcModal/NcModal.vue index 2ea218a77d..4e2e116361 100644 --- a/src/components/NcModal/NcModal.vue +++ b/src/components/NcModal/NcModal.vue @@ -200,7 +200,7 @@ export default { tabindex="-1"> -
+

@@ -834,7 +834,6 @@ export default { transition: padding ease 100ms; white-space: nowrap; text-overflow: ellipsis; - color: #fff; // Always rendered on dark background font-size: $icon-size; margin-block: 0; } @@ -907,25 +906,9 @@ export default { // The modal ignores the color theme and adds a black backdrop // so we need to add custom color of the actions toggle - .header-actions { - --open-background-color: #3e3e3e; - color: #fff; - - :deep(button) { - // force white instead of default main text - color: #fff; - - &:hover, &:active { - // Also fix the hover color - background-color: var(--open-background-color) !important; - } - - // Fix the focus visible color - &:focus-visible { - box-shadow: none !important; - outline: 2px solid #fff !important; - } - } + .header-actions :deep(button:focus-visible) { + box-shadow: none !important; + outline: 2px solid #fff !important; } // Force the Actions menu icon to be the same size as other icons diff --git a/styleguide/assets/additional.css b/styleguide/assets/additional.css index e28ceaaa36..256f5fc54f 100644 --- a/styleguide/assets/additional.css +++ b/styleguide/assets/additional.css @@ -4,6 +4,7 @@ */ @import 'default.css'; @import 'server.css'; +@import 'dark.css'; div[data-preview] * { box-sizing: border-box; diff --git a/styleguide/assets/dark.css b/styleguide/assets/dark.css new file mode 100644 index 0000000000..a77aa4a8af --- /dev/null +++ b/styleguide/assets/dark.css @@ -0,0 +1,89 @@ +[data-theme-dark] { + --color-main-background:#171717; + --color-main-background-rgb:23,23,23; + --color-main-background-translucent:rgba(var(--color-main-background-rgb), .97); + --color-main-background-blur:rgba(var(--color-main-background-rgb), .85); + --filter-background-blur:blur(25px); + --gradient-main-background:var(--color-main-background) 0%, var(--color-main-background-translucent) 85%, transparent 100%; + --color-background-hover:#212121; + --color-background-dark:#292929; + --color-background-darker:#3b3b3b; + --color-placeholder-light:#313131; + --color-placeholder-dark:#4a4a4a; + --color-main-text:#EBEBEB; + --color-text-maxcontrast:#999999; + --color-text-maxcontrast-default:#999999; + --color-text-maxcontrast-background-blur:#a8a8a8; + --color-text-light:var(--color-main-text); + --color-text-lighter:var(--color-text-maxcontrast); + --color-scrollbar:#3d3d3d; + --color-error:#FF3333; + --color-error-rgb:255,51,51; + --color-error-hover:#ff6666; + --color-error-text:#ff8080; + --color-warning:#FFCC00; + --color-warning-rgb:255,204,0; + --color-warning-hover:#ffd633; + --color-warning-text:#FFCC00; + --color-success:#3B973B; + --color-success-rgb:59,151,59; + --color-success-hover:#4cb94c; + --color-success-text:#5ec05e; + --color-info:#00AEFF; + --color-info-rgb:0,174,255; + --color-info-hover:#33beff; + --color-info-text:#00AEFF; + --color-favorite:#ffde00; + --color-loading-light:#777; + --color-loading-dark:#CCC; + --color-box-shadow-rgb:0,0,0; + --color-box-shadow:#000000; + --color-border:#292929; + --color-border-dark:#3b3b3b; + --color-border-maxcontrast:#7d7d7d; + --font-face:system-ui, -apple-system, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, Ubuntu, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --default-font-size:15px; + --animation-quick:100ms; + --animation-slow:300ms; + --border-width-input:1px; + --border-width-input-focused:2px; + --border-radius:3px; + --border-radius-large:10px; + --border-radius-rounded:28px; + --border-radius-element:10px; + --border-radius-pill:100px; + --default-clickable-area:44px; + --default-line-height:24px; + --default-grid-baseline:4px; + --header-height:50px; + --navigation-width:300px; + --sidebar-min-width:300px; + --sidebar-max-width:500px; + --list-min-width:200px; + --list-max-width:300px; + --header-menu-item-height:44px; + --header-menu-profile-item-height:66px; + --breakpoint-mobile:1024px; + --background-invert-if-dark:invert(100%); + --background-invert-if-bright:no; + --background-image-invert-if-bright:no; + --primary-invert-if-bright:invert(100%); + --primary-invert-if-dark:no; + --color-primary:#00679e; + --color-primary-text:#ffffff; + --color-primary-hover:#045783; + --color-primary-light:#14232c; + --color-primary-light-text:#99c2d8; + --color-primary-light-hover:#1e2d35; + --color-primary-element:#0091f2; + --color-primary-element-hover:#079cff; + --color-primary-element-text:#000000; + --color-primary-element-text-dark:#0a0a0a; + --color-primary-element-light:#14232c; + --color-primary-element-light-hover:#1e2d35; + --color-primary-element-light-text:#99d3f9; + --gradient-primary-background:linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%); + --color-background-plain:#00679e; + --color-background-plain-text:#ffffff; + --image-background: url('./img/background/kamil-porembinski-clouds.jpg'); +}