Merge pull request #2208 from nextcloud/bugfix/design-fixes

css/collections.css

@@ -1,7 +1,3 @@
-.icon-deck {
- background-image: url('../img/deck-dark.svg');
-}
-
 .resource-type-deck img {
  opacity: 0.4 !important;
 }

css/icons.scss

@@ -1,81 +1,27 @@
 /**
  * Custom icons
  */
-.icon-deck {
- background-image: url('../img/deck-dark.svg');
-}
-
-.icon-help {
- background-image: url('../../../settings/img/help.svg');
-}
-
-.icon-add-white {
- background-image: url('../img/add-white.svg');
-}
-
-.icon-attach {
- background-image: url('../img/attach.svg');
-}
-
-.icon-archive {
- background-image: url('../img/archive.svg');
-}
-
-.icon-archive-white {
- background-image: url('../img/archive-white.svg');
-}
-
-.icon-details {
- background-image: url('../img/details.svg');
-}
-
-.icon-details-white {
- background-image: url('../img/details-white.svg');
-}
-
-.icon-home {
- background-image: var(--icon-home-000, url('../../../core/img/places/home.svg'));
-}
-
-.icon-description {
- background-image: var(--icon-text-000, url('../img/description.svg'));
-}
-
-.icon-badge {
- background-image: url('../img/calendar-dark.svg');
-}
+@include icon-black-white('deck', 'deck', 1);
+@include icon-black-white('archive', 'deck', 1);
+@include icon-black-white('circles', 'deck', 1);
+@include icon-black-white('clone', 'deck', 1);
+@include icon-black-white('filter', 'deck', 1);
+@include icon-black-white('filter_set', 'deck', 1);
+@include icon-black-white('attach', 'deck', 1);
+@include icon-black-white('reply', 'deck', 1);
 
 .icon-toggle-compact-collapsed {
- background-image: url('../img/toggle-view-expand.svg');
+ @include icon-color('toggle-view-expand', 'deck', $color-black);
 }
 
 .icon-toggle-compact-expanded {
- background-image: url('../img/toggle-view-collapse.svg');
+ @include icon-color('toggle-view-collapse', 'deck', $color-black);
 }
-
-
-@if mixin-exists('icon-black-white') {
- @include icon-black-white('deck', 'deck', 1);
- @include icon-black-white('archive', 'deck', 1);
- @include icon-black-white('circles', 'deck', 1);
- @include icon-black-white('clone', 'deck', 1);
- @include icon-black-white('filter', 'deck', 1);
- @include icon-black-white('filter_set', 'deck', 1);
- @include icon-black-white('attach', 'deck', 1);
- @include icon-black-white('reply', 'deck', 1);
-
- .icon-toggle-compact-collapsed {
- @include icon-color('toggle-view-expand', 'deck', $color-black);
- }
-
- .icon-toggle-compact-expanded {
- @include icon-color('toggle-view-collapse', 'deck', $color-black);
- }
- .icon-activity {
- @include icon-color('activity-dark', 'activity', $color-black);
- }
+.icon-activity {
+ @include icon-color('activity-dark', 'activity', $color-black);
 }
 
+
 .avatardiv.circles {
  background: var(--color-primary);
 }

package.json

@@ -46,7 +46,7 @@
  "markdown-it": "^11.0.0",
  "markdown-it-task-lists": "^2.1.1",
  "moment": "^2.27.0",
- "nextcloud-vue-collections": "^0.7.2",
+ "nextcloud-vue-collections": "^0.8.1",
  "p-queue": "^6.6.0",
  "url-search-params-polyfill": "^8.1.0",
  "vue": "^2.6.11",

src/components/board/SharingTabSidebar.vue

@@ -198,7 +198,7 @@ export default {
  }
 
  .avatardiv {
- background-color: #f5f5f5;
+ background-color: var(--color-background-dark);
  border-radius: 16px;
  width: 32px;
  height: 32px;

src/components/boards/BoardItem.vue

@@ -25,7 +25,7 @@
  :title="board.title"
  :to="routeTo"
  class="board-list-row"
- tag="div">
+ tag="a">
  <div class="board-list-bullet-cell">
  <div :style="{ 'background-color': `#${board.color}` }" class="board-list-bullet" />
  </div>
@@ -78,6 +78,13 @@ export default {
 
 <style lang="scss" scoped>
 
+ .board-list-row {
+ &:hover, &:focus {
+ background-color: var(--color-background-hover);
+ }
+ cursor: pointer;
+ }
+
  .board-list-bullet-cell {
  padding: 6px 15px;