From 5a55ae3165fa8d62a779944c8c6b1079aba8ff7f Mon Sep 17 00:00:00 2001
From: Ron Lucke <lucke@elan-ev.de>
Date: Thu, 5 Dec 2024 12:43:40 +0000
Subject: [PATCH] Polishing: Contentbar
Closes #4876
Merge request studip/studip!3669
---
.../assets/stylesheets/scss/contentbar.scss | 11 +-
.../scss/courseware/layouts/ribbon.scss | 124 ++++++++++++------
.../assets/stylesheets/scss/responsive.scss | 6 +-
3 files changed, 92 insertions(+), 49 deletions(-)
diff --git a/resources/assets/stylesheets/scss/contentbar.scss b/resources/assets/stylesheets/scss/contentbar.scss
index 1ea85d69bac..0886b3e67e4 100644
--- a/resources/assets/stylesheets/scss/contentbar.scss
+++ b/resources/assets/stylesheets/scss/contentbar.scss
@@ -80,8 +80,6 @@
}
.contentbar-button-wrapper {
- height: 24px;
- margin: 0 7px;
@-moz-document url-prefix() {
&.contentbar-toc-wrapper {
@@ -97,15 +95,16 @@
background-position: center;
background-repeat: no-repeat;
background-size: 24px;
- border: none;
+ border: solid thin var(--color--button-border);
+ border-radius: var(--border-radius-default);
cursor: pointer;
display: inline-block;
- height: 24px;
- width: 24px;
+ height: 32px;
+ width: 32px;
&.contentbar-button-menu,
&.cw-ribbon-button-menu {
- @include background-icon(table-of-contents, $size: 24px);
+ @include background-icon(table-of-contents);
}
&.contentbar-button-zoom::before {
diff --git a/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss b/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss
index b5c7f24f749..ad5332f01e7 100644
--- a/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss
+++ b/resources/assets/stylesheets/scss/courseware/layouts/ribbon.scss
@@ -75,6 +75,45 @@ $consum_ribbon_width: calc(100% - 58px);
margin-bottom: 0;
}
+ .cw-ribbon-button {
+ height: 24px;
+ width: 24px;
+ margin: 0 7px;
+ padding: 1px 2px;
+ border: none;
+ background-color: transparent;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 24px;
+ cursor: pointer;
+
+ &.cw-ribbon-button-menu {
+ @include background-icon(table-of-contents);
+ }
+
+ &.cw-ribbon-button-prev {
+ @include background-icon(arr_1left, $size: 24px);
+ margin: 0 0.5em 0 0;
+ }
+
+ &.cw-ribbon-button-next {
+ @include background-icon(arr_1right, $size: 24px);
+ margin: 0 0.5em 0 0;
+ }
+
+ &.cw-ribbon-button-prev-disabled {
+ @include background-icon(arr_1left, inactive, 24px);
+ margin: 0 0.5em 0 0;
+ cursor: default;
+ }
+
+ &.cw-ribbon-button-next-disabled {
+ @include background-icon(arr_1right, inactive, 24px);
+ margin: 0 0.5em 0 0;
+ cursor: default;
+ }
+ }
+
.cw-ribbon-wrapper-left {
display: flex;
gap: 1em;
@@ -155,49 +194,60 @@ $consum_ribbon_width: calc(100% - 58px);
gap: 0.5em;
align-items: center;
- button {
- border: none;
+ .contentbar-toc-wrapper {
+ margin-top: 4px;
+ @-moz-document url-prefix() {
+ &.contentbar-toc-wrapper {
+ margin-top: 0;
+ }
+ }
+ }
+
+ button:not(.action-menu-icon) {
+ height: 32px;
+ width: 32px;
+ border-radius: var(--border-radius-default);
+ border: solid thin var(--color--button-border);
background-color: transparent;
cursor: pointer;
- }
- }
- .cw-ribbon-button {
- height: 24px;
- width: 24px;
- margin: 0 7px;
- padding: 1px 2px;
- border: none;
- background-color: transparent;
- background-repeat: no-repeat;
- background-position: center;
- background-size: 24px;
- cursor: pointer;
+ &:hover,
+ &:active,
+ &.active {
+ background: var(--color--button-focus);
+ color: var(--color--font-inverted);
+ }
- &.cw-ribbon-button-menu {
- @include background-icon(table-of-contents, $size: 24px);
- }
+ &.cw-ribbon-button-menu {
+ @include background-icon(table-of-contents);
+ background-repeat: no-repeat;
+ background-position: center;
- &.cw-ribbon-button-prev {
- @include background-icon(arr_1left, $size: 24px);
- margin: 0 0.5em 0 0;
+ &:hover,
+ &:active,
+ &.active {
+ @include background-icon(table-of-contents, info_alt);
+ }
+ }
}
- &.cw-ribbon-button-next {
- @include background-icon(arr_1right, $size: 24px);
- margin: 0 0.5em 0 0;
- }
+ .action-menu:not(.is-open) {
+ border: solid thin var(--color--button-border);
+ border-radius: var(--border-radius-default);
+ padding: 5px;
- &.cw-ribbon-button-prev-disabled {
- @include background-icon(arr_1left, inactive, 24px);
- margin: 0 0.5em 0 0;
- cursor: default;
- }
+ &:hover,
+ &:active,
+ &.active {
+ background: var(--color--button-focus);
- &.cw-ribbon-button-next-disabled {
- @include background-icon(arr_1right, inactive, 24px);
- margin: 0 0.5em 0 0;
- cursor: default;
+ .action-menu-icon span {
+ background-color: var(--color--font-inverted);
+ }
+ }
+ }
+ .action-menu.is-open .action-menu-icon {
+ margin: 6px;
}
}
}
@@ -382,13 +432,7 @@ $consum_ribbon_width: calc(100% - 58px);
// Rules extracted from PHP contentbar for use in ContentBar.vue
.contentbar-button-wrapper {
- height: 24px;
- margin: 0 7px;
-
@-moz-document url-prefix() {
- &.contentbar-toc-wrapper {
- margin-top: -4px;
- }
&.contentbar-action-menu-wrapper {
margin-top: 2px;
}
diff --git a/resources/assets/stylesheets/scss/responsive.scss b/resources/assets/stylesheets/scss/responsive.scss
index 61818463ef0..5ab4e2b9476 100644
--- a/resources/assets/stylesheets/scss/responsive.scss
+++ b/resources/assets/stylesheets/scss/responsive.scss
@@ -411,14 +411,14 @@ $sidebarOut: -330px;
}
.cw-ribbon-tools {
- right: 16px;
+ right: 4px;
}
}
#toc {
- margin-right: -2px;
- margin-top: -7px;
+ margin-right: -14px;
+ margin-top: -3px;
}
#main-footer {
--
GitLab