Unify appSwitcher/userMenu/contextMenu hover styling

owncloud · Mar 11, 2022 · c6d03b0 · c6d03b0
1 parent e6d98b8
commit c6d03b0
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 4 deletions.
diff --git a/changelog/unreleased/enhancement-design-improvements b/changelog/unreleased/enhancement-design-improvements
@@ -0,0 +1,7 @@
+Enhancement: Design improvements
+
+We've fixed various design glitches and improved the overall look-and-feel of the UI.
+
+https://github.com/owncloud/web/issues/6492
+https://github.com/owncloud/web/issues/6555
+https://github.com/owncloud/web/pulls/6584
diff --git a/packages/web-app-files/src/components/AppBar/AppBar.vue b/packages/web-app-files/src/components/AppBar/AppBar.vue
@@ -18,6 +18,7 @@
  id="files-breadcrumb"
  data-testid="files-breadcrumbs"
  class="oc-py-s"
+ context-menu-padding="small"
  :items="breadcrumbs"
  >
  <template #contextMenu>

diff --git a/packages/web-app-files/src/components/FilesList/ContextActions.vue b/packages/web-app-files/src/components/FilesList/ContextActions.vue
@@ -208,14 +208,11 @@ export default {
  text-align: left;
  white-space: normal;
 
- li {
- padding: 6px;
+ > li {
  &:hover {
  background-color: var(--oc-color-background-hover);
  }
- }
 
- > li {
  a,
  button,
  span {
@@ -227,6 +224,11 @@ export default {
  vertical-align: top;
  width: 100%;
  text-align: left;
+
+ &:hover {
+ color: var(--oc-color-swatch-passive-default);
+ text-decoration: none !important;
+ }
  }
  }
 

diff --git a/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue b/packages/web-runtime/src/components/Topbar/ApplicationsMenu.vue
@@ -82,6 +82,8 @@ export default {
 
  &:focus,
  &:hover {
+ background-color: var(--oc-color-background-hover);
+ color: var(--oc-color-swatch-passive-default);
  text-decoration: none;
  }
 

diff --git a/packages/web-runtime/src/components/Topbar/UserMenu.vue b/packages/web-runtime/src/components/Topbar/UserMenu.vue
@@ -155,6 +155,8 @@ export default {
 
  &:focus,
  &:hover {
+ background-color: var(--oc-color-background-hover);
+ color: var(--oc-color-swatch-passive-default);
  text-decoration: none;
  }