Merge pull request #2265 from nextcloud/fix/2264/appsidebar-star

Use material design icon for AppSidebar star
nextcloud-libraries · Sep 20, 2021 · bc0f5d1 · bc0f5d1
2 parents 52df1cb + 6bc5ca1
commit bc0f5d1
Show file tree

Hide file tree

Showing 65 changed files with 38 additions and 7 deletions.
diff --git a/...tarred_false-compact_true-header_image-secondary_button-editable_false-base.png b/...tarred_false-compact_true-header_image-secondary_button-editable_false-base.png
diff --git a/...starred_false-compact_true-header_image-secondary_button-editable_true-base.png b/...starred_false-compact_true-header_image-secondary_button-editable_true-base.png
diff --git a/...-starred_false-compact_true-header_image-secondary_none-editable_false-base.png b/...-starred_false-compact_true-header_image-secondary_none-editable_false-base.png
diff --git a/...l-starred_false-compact_true-header_image-secondary_none-editable_true-base.png b/...l-starred_false-compact_true-header_image-secondary_none-editable_true-base.png
diff --git a/...starred_false-compact_true-header_none-secondary_button-editable_false-base.png b/...starred_false-compact_true-header_none-secondary_button-editable_false-base.png
diff --git a/...-starred_false-compact_true-header_none-secondary_button-editable_true-base.png b/...-starred_false-compact_true-header_none-secondary_button-editable_true-base.png
diff --git a/...l-starred_false-compact_true-header_none-secondary_none-editable_false-base.png b/...l-starred_false-compact_true-header_none-secondary_none-editable_false-base.png
diff --git a/...ll-starred_false-compact_true-header_none-secondary_none-editable_true-base.png b/...ll-starred_false-compact_true-header_none-secondary_none-editable_true-base.png
diff --git a/...starred_true-compact_true-header_image-secondary_button-editable_false-base.png b/...starred_true-compact_true-header_image-secondary_button-editable_false-base.png
diff --git a/...-starred_true-compact_true-header_image-secondary_button-editable_true-base.png b/...-starred_true-compact_true-header_image-secondary_button-editable_true-base.png
diff --git a/...l-starred_true-compact_true-header_image-secondary_none-editable_false-base.png b/...l-starred_true-compact_true-header_image-secondary_none-editable_false-base.png
diff --git a/...ll-starred_true-compact_true-header_image-secondary_none-editable_true-base.png b/...ll-starred_true-compact_true-header_image-secondary_none-editable_true-base.png
diff --git a/...-starred_true-compact_true-header_none-secondary_button-editable_false-base.png b/...-starred_true-compact_true-header_none-secondary_button-editable_false-base.png
diff --git a/...l-starred_true-compact_true-header_none-secondary_button-editable_true-base.png b/...l-starred_true-compact_true-header_none-secondary_button-editable_true-base.png
diff --git a/...ll-starred_true-compact_true-header_none-secondary_none-editable_false-base.png b/...ll-starred_true-compact_true-header_none-secondary_none-editable_false-base.png
diff --git a/...ull-starred_true-compact_true-header_none-secondary_none-editable_true-base.png b/...ull-starred_true-compact_true-header_none-secondary_none-editable_true-base.png
diff --git a/...tarred_false-compact_true-header_image-secondary_button-editable_false-base.png b/...tarred_false-compact_true-header_image-secondary_button-editable_false-base.png
diff --git a/...starred_false-compact_true-header_image-secondary_button-editable_true-base.png b/...starred_false-compact_true-header_image-secondary_button-editable_true-base.png
diff --git a/...-starred_false-compact_true-header_image-secondary_none-editable_false-base.png b/...-starred_false-compact_true-header_image-secondary_none-editable_false-base.png
diff --git a/...e-starred_false-compact_true-header_image-secondary_none-editable_true-base.png b/...e-starred_false-compact_true-header_image-secondary_none-editable_true-base.png
diff --git a/...starred_false-compact_true-header_none-secondary_button-editable_false-base.png b/...starred_false-compact_true-header_none-secondary_button-editable_false-base.png
diff --git a/...-starred_false-compact_true-header_none-secondary_button-editable_true-base.png b/...-starred_false-compact_true-header_none-secondary_button-editable_true-base.png
diff --git a/...e-starred_false-compact_true-header_none-secondary_none-editable_false-base.png b/...e-starred_false-compact_true-header_none-secondary_none-editable_false-base.png
diff --git a/...ue-starred_false-compact_true-header_none-secondary_none-editable_true-base.png b/...ue-starred_false-compact_true-header_none-secondary_none-editable_true-base.png
diff --git a/...starred_true-compact_true-header_image-secondary_button-editable_false-base.png b/...starred_true-compact_true-header_image-secondary_button-editable_false-base.png
diff --git a/...-starred_true-compact_true-header_image-secondary_button-editable_true-base.png b/...-starred_true-compact_true-header_image-secondary_button-editable_true-base.png
diff --git a/...e-starred_true-compact_true-header_image-secondary_none-editable_false-base.png b/...e-starred_true-compact_true-header_image-secondary_none-editable_false-base.png
diff --git a/...ue-starred_true-compact_true-header_image-secondary_none-editable_true-base.png b/...ue-starred_true-compact_true-header_image-secondary_none-editable_true-base.png
diff --git a/...-starred_true-compact_true-header_none-secondary_button-editable_false-base.png b/...-starred_true-compact_true-header_none-secondary_button-editable_false-base.png
diff --git a/...e-starred_true-compact_true-header_none-secondary_button-editable_true-base.png b/...e-starred_true-compact_true-header_none-secondary_button-editable_true-base.png
diff --git a/...ue-starred_true-compact_true-header_none-secondary_none-editable_false-base.png b/...ue-starred_true-compact_true-header_none-secondary_none-editable_false-base.png
diff --git a/...rue-starred_true-compact_true-header_none-secondary_none-editable_true-base.png b/...rue-starred_true-compact_true-header_none-secondary_none-editable_true-base.png
diff --git a/...arred_false-compact_false-header_image-secondary_button-editable_false-base.png b/...arred_false-compact_false-header_image-secondary_button-editable_false-base.png
diff --git a/...tarred_false-compact_false-header_image-secondary_button-editable_true-base.png b/...tarred_false-compact_false-header_image-secondary_button-editable_true-base.png
diff --git a/...starred_false-compact_false-header_image-secondary_none-editable_false-base.png b/...starred_false-compact_false-header_image-secondary_none-editable_false-base.png
diff --git a/...-starred_false-compact_false-header_image-secondary_none-editable_true-base.png b/...-starred_false-compact_false-header_image-secondary_none-editable_true-base.png
diff --git a/...tarred_false-compact_false-header_none-secondary_button-editable_false-base.png b/...tarred_false-compact_false-header_none-secondary_button-editable_false-base.png
diff --git a/...starred_false-compact_false-header_none-secondary_button-editable_true-base.png b/...starred_false-compact_false-header_none-secondary_button-editable_true-base.png
diff --git a/...-starred_false-compact_false-header_none-secondary_none-editable_false-base.png b/...-starred_false-compact_false-header_none-secondary_none-editable_false-base.png
diff --git a/...l-starred_false-compact_false-header_none-secondary_none-editable_true-base.png b/...l-starred_false-compact_false-header_none-secondary_none-editable_true-base.png
diff --git a/...tarred_true-compact_false-header_image-secondary_button-editable_false-base.png b/...tarred_true-compact_false-header_image-secondary_button-editable_false-base.png
diff --git a/...starred_true-compact_false-header_image-secondary_button-editable_true-base.png b/...starred_true-compact_false-header_image-secondary_button-editable_true-base.png
diff --git a/...-starred_true-compact_false-header_image-secondary_none-editable_false-base.png b/...-starred_true-compact_false-header_image-secondary_none-editable_false-base.png
diff --git a/...l-starred_true-compact_false-header_image-secondary_none-editable_true-base.png b/...l-starred_true-compact_false-header_image-secondary_none-editable_true-base.png
diff --git a/...starred_true-compact_false-header_none-secondary_button-editable_false-base.png b/...starred_true-compact_false-header_none-secondary_button-editable_false-base.png
diff --git a/...-starred_true-compact_false-header_none-secondary_button-editable_true-base.png b/...-starred_true-compact_false-header_none-secondary_button-editable_true-base.png
diff --git a/...l-starred_true-compact_false-header_none-secondary_none-editable_false-base.png b/...l-starred_true-compact_false-header_none-secondary_none-editable_false-base.png
diff --git a/...ll-starred_true-compact_false-header_none-secondary_none-editable_true-base.png b/...ll-starred_true-compact_false-header_none-secondary_none-editable_true-base.png
diff --git a/...arred_false-compact_false-header_image-secondary_button-editable_false-base.png b/...arred_false-compact_false-header_image-secondary_button-editable_false-base.png
diff --git a/...tarred_false-compact_false-header_image-secondary_button-editable_true-base.png b/...tarred_false-compact_false-header_image-secondary_button-editable_true-base.png
diff --git a/...starred_false-compact_false-header_image-secondary_none-editable_false-base.png b/...starred_false-compact_false-header_image-secondary_none-editable_false-base.png
diff --git a/...-starred_false-compact_false-header_image-secondary_none-editable_true-base.png b/...-starred_false-compact_false-header_image-secondary_none-editable_true-base.png
diff --git a/...tarred_false-compact_false-header_none-secondary_button-editable_false-base.png b/...tarred_false-compact_false-header_none-secondary_button-editable_false-base.png
diff --git a/...starred_false-compact_false-header_none-secondary_button-editable_true-base.png b/...starred_false-compact_false-header_none-secondary_button-editable_true-base.png
diff --git a/...-starred_false-compact_false-header_none-secondary_none-editable_false-base.png b/...-starred_false-compact_false-header_none-secondary_none-editable_false-base.png
diff --git a/...e-starred_false-compact_false-header_none-secondary_none-editable_true-base.png b/...e-starred_false-compact_false-header_none-secondary_none-editable_true-base.png
diff --git a/...tarred_true-compact_false-header_image-secondary_button-editable_false-base.png b/...tarred_true-compact_false-header_image-secondary_button-editable_false-base.png
diff --git a/...starred_true-compact_false-header_image-secondary_button-editable_true-base.png b/...starred_true-compact_false-header_image-secondary_button-editable_true-base.png
diff --git a/...-starred_true-compact_false-header_image-secondary_none-editable_false-base.png b/...-starred_true-compact_false-header_image-secondary_none-editable_false-base.png
diff --git a/...e-starred_true-compact_false-header_image-secondary_none-editable_true-base.png b/...e-starred_true-compact_false-header_image-secondary_none-editable_true-base.png
diff --git a/...starred_true-compact_false-header_none-secondary_button-editable_false-base.png b/...starred_true-compact_false-header_none-secondary_button-editable_false-base.png
diff --git a/...-starred_true-compact_false-header_none-secondary_button-editable_true-base.png b/...-starred_true-compact_false-header_none-secondary_button-editable_true-base.png
diff --git a/...e-starred_true-compact_false-header_none-secondary_none-editable_false-base.png b/...e-starred_true-compact_false-header_none-secondary_none-editable_false-base.png
diff --git a/...ue-starred_true-compact_false-header_none-secondary_none-editable_true-base.png b/...ue-starred_true-compact_false-header_none-secondary_none-editable_true-base.png
diff --git a/src/components/AppSidebar/AppSidebar.vue b/src/components/AppSidebar/AppSidebar.vue
@@ -184,13 +184,18 @@ include a standard-header like it's used by the files app.
 						<div v-if="canStar || $slots['tertiary-actions']" class="app-sidebar-header__tertiary-actions">
 							<slot name="tertiary-actions">
 								<a v-if="canStar"
-									:class="{
-										'icon-starred': isStarred && !starLoading,
-										'icon-star': !isStarred && !starLoading,
-										'icon-loading-small': starLoading,
-									}"
 									class="app-sidebar-header__star"
-									@click.prevent="toggleStarred" />
+									@click.prevent="toggleStarred">
+									<span v-if="starLoading" class="icon-loading-small" />
+									<Star v-else
+										:class="{
+											'star--starred': isStarred,
+											'star--star': !isStarred,
+										}"
+										class="star"
+										:size="20"
+										decorative />
+								</a>
 							</slot>
 						</div>
 
@@ -269,6 +274,7 @@ import { t } from '../../l10n'
 import { directive as ClickOutside } from 'v-click-outside'
 
 import Close from 'vue-material-design-icons/Close.vue'
+import Star from 'vue-material-design-icons/Star.vue'
 
 export default {
 	name: 'AppSidebar',
@@ -278,6 +284,7 @@ export default {
 		AppSidebarTabs,
 		EmptyContent,
 		Close,
+		Star,
 	},
 
 	directives: {
@@ -791,7 +798,31 @@ $top-buttons-spacing: 6px;
 				display: block;
 				width: $clickable-area;
 				height: $clickable-area;
-				padding: $icon-margin;
+
+				.icon-loading-small {
+					display: block;
+					width: $clickable-area;
+					height: $clickable-area;
+				}
+
+				.star {
+					width: $clickable-area;
+					height: $clickable-area;
+					&--star {
+						color: #000;
+						opacity: .5;
+						&:hover {
+							color: #FC0;
+						}
+					}
+					&--starred {
+						color: #FC0;
+						&:hover {
+							color: #000;
+							opacity: .5;
+						}
+					}
+				}
 			}
 		}