Fix search placeholder animation & dark theme compatibility

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
nextcloud · Aug 7, 2020 · 7cb0022 · 7cb0022
1 parent 89ea1ab
commit 7cb0022
Show file tree

Hide file tree

Showing 29 changed files with 170 additions and 196 deletions.
diff --git a/apps/accessibility/css/dark.scss b/apps/accessibility/css/dark.scss
@@ -5,6 +5,9 @@ $color-main-background: #181818;
 $color-background-dark: lighten($color-main-background, 4%);
 $color-background-darker: lighten($color-main-background, 8%);
 
+$color-placeholder-light: lighten($color-main-background, 10%);
+$color-placeholder-dark: lighten($color-main-background, 20%);
+
 $color-text-maxcontrast: darken($color-main-text, 30%);
 $color-text-light: darken($color-main-text, 10%);
 $color-text-lighter: darken($color-main-text, 20%);

diff --git a/apps/accessibility/css/highcontrast.scss b/apps/accessibility/css/highcontrast.scss
@@ -5,6 +5,9 @@ $color-main-background: #fff;
 $color-background-dark: darken($color-main-background, 30%);
 $color-background-darker: darken($color-main-background, 30%);
 
+$color-placeholder-light: darken($color-main-background, 30%);
+$color-placeholder-dark: darken($color-main-background, 45%);
+
 $color-text-maxcontrast: $color-main-text;
 $color-text-light: $color-main-text;
 $color-text-lighter: $color-main-text;

diff --git a/core/css/css-variables.scss b/core/css/css-variables.scss
@@ -11,6 +11,9 @@
 	--color-background-dark: $color-background-dark;
 	--color-background-darker: $color-background-darker;
 
+	--color-placeholder-light: $color-placeholder-light;
+	--color-placeholder-dark: $color-placeholder-dark;
+
 	--color-primary: $color-primary;
 	--color-primary-light: $color-primary-light;
 	--color-primary-text: $color-primary-text;

diff --git a/core/css/icons.scss b/core/css/icons.scss
@@ -307,6 +307,7 @@ audio, canvas, embed, iframe, img, input, object, video {
 @include icon-black-white('upload', 'actions', 1, true);
 @include icon-black-white('user', 'actions', 1, true);
 @include icon-black-white('group', 'actions', 1, true);
+@include icon-black-white('filter', 'actions', 1, true);
 
 @include icon-black-white('video', 'actions', 2, true);
 .icon-video-white {

diff --git a/core/css/variables.scss b/core/css/variables.scss
@@ -40,6 +40,9 @@ $color-background-hover: nc-darken($color-main-background, 4%) !default;
 $color-background-dark: nc-darken($color-main-background, 7%) !default;
 $color-background-darker: nc-darken($color-main-background, 14%) !default;
 
+$color-placeholder-light: nc-darken($color-main-background, 10%) !default;
+$color-placeholder-dark: nc-darken($color-main-background, 20%) !default;
+
 $color-primary: #0082c9 !default;
 $color-primary-light: mix($color-primary, $color-main-background, 10%) !default;
 $color-primary-text: #ffffff !default;

diff --git a/core/img/actions/filter.svg b/core/img/actions/filter.svg
diff --git a/core/js/dist/files_client.js b/core/js/dist/files_client.js
diff --git a/core/js/dist/files_client.js.map b/core/js/dist/files_client.js.map
diff --git a/core/js/dist/files_fileinfo.js b/core/js/dist/files_fileinfo.js
diff --git a/core/js/dist/files_fileinfo.js.map b/core/js/dist/files_fileinfo.js.map
diff --git a/core/js/dist/files_iedavclient.js b/core/js/dist/files_iedavclient.js
diff --git a/core/js/dist/files_iedavclient.js.map b/core/js/dist/files_iedavclient.js.map
diff --git a/core/js/dist/install.js b/core/js/dist/install.js
diff --git a/core/js/dist/install.js.map b/core/js/dist/install.js.map
diff --git a/core/js/dist/login.js b/core/js/dist/login.js
diff --git a/core/js/dist/login.js.map b/core/js/dist/login.js.map
diff --git a/core/js/dist/main.js b/core/js/dist/main.js
diff --git a/core/js/dist/main.js.map b/core/js/dist/main.js.map
diff --git a/core/js/dist/maintenance.js b/core/js/dist/maintenance.js
diff --git a/core/js/dist/maintenance.js.map b/core/js/dist/maintenance.js.map
diff --git a/core/js/dist/recommendedapps.js b/core/js/dist/recommendedapps.js
diff --git a/core/js/dist/recommendedapps.js.map b/core/js/dist/recommendedapps.js.map
diff --git a/core/js/dist/unified-search.js b/core/js/dist/unified-search.js
diff --git a/core/js/dist/unified-search.js.map b/core/js/dist/unified-search.js.map
diff --git a/core/src/components/HeaderMenu.vue b/core/src/components/HeaderMenu.vue
@@ -20,7 +20,7 @@
   -
   -->
 <template>
-	<div v-click-outside="closeMenu" :class="{ 'header-menu--opened': opened }" class="header-menu">
+	<div v-click-outside="clickOutsideConfig" :class="{ 'header-menu--opened': opened }" class="header-menu">
 		<a class="header-menu__trigger"
 			href="#"
 			:aria-controls="`header-menu-${id}`"
@@ -44,6 +44,7 @@
 <script>
 import { directive as ClickOutside } from 'v-click-outside'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
+import excludeClickOutsideClasses from '@nextcloud/vue/dist/Mixins/excludeClickOutsideClasses'
 
 export default {
 	name: 'HeaderMenu',
@@ -52,6 +53,10 @@ export default {
 		ClickOutside,
 	},
 
+	mixins: [
+		excludeClickOutsideClasses,
+	],
+
 	props: {
 		id: {
 			type: String,
@@ -66,6 +71,10 @@ export default {
 	data() {
 		return {
 			opened: this.open,
+			clickOutsideConfig: {
+				handler: this.closeMenu,
+				middleware: this.clickOutsideMiddleware,
+			},
 		}
 	},
 

diff --git a/core/src/components/UnifiedSearch/SearchFilter.vue b/core/src/components/UnifiedSearch/SearchFilter.vue
diff --git a/core/src/components/UnifiedSearch/SearchResultPlaceholder.vue b/core/src/components/UnifiedSearch/SearchResultPlaceholder.vue
diff --git a/core/src/components/UnifiedSearch/SearchResultPlaceholders.vue b/core/src/components/UnifiedSearch/SearchResultPlaceholders.vue
@@ -0,0 +1,100 @@
+<template>
+	<ul>
+		<!-- Placeholder animation -->
+		<svg class="unified-search__result-placeholder-gradient">
+			<defs>
+				<linearGradient id="unified-search__result-placeholder-gradient">
+					<stop offset="0%" :stop-color="light">
+						<animate attributeName="stop-color"
+							:values="`${light}; ${light}; ${dark}; ${dark}; ${light}`"
+							dur="2s"
+							repeatCount="indefinite" />
+					</stop>
+					<stop offset="100%" :stop-color="dark">
+						<animate attributeName="stop-color"
+							:values="`${dark}; ${light}; ${light}; ${dark}; ${dark}`"
+							dur="2s"
+							repeatCount="indefinite" />
+					</stop>
+				</linearGradient>
+			</defs>
+		</svg>
+
+		<!-- Placeholders -->
+		<li v-for="placeholder in [1, 2, 3]" :key="placeholder">
+			<svg
+				class="unified-search__result-placeholder"
+				xmlns="http://www.w3.org/2000/svg"
+				fill="url(#unified-search__result-placeholder-gradient)">
+				<rect class="unified-search__result-placeholder-icon" />
+				<rect class="unified-search__result-placeholder-line-one" />
+				<rect class="unified-search__result-placeholder-line-two" :style="{width: `calc(${randWidth()}%)`}" />
+			</svg>
+		</li>
+	</ul>
+</template>
+
+<script>
+export default {
+	name: 'SearchResultPlaceholders',
+
+	data() {
+		return {
+			light: null,
+			dark: null,
+		}
+	},
+	mounted() {
+		const styles = getComputedStyle(document.documentElement)
+		this.dark = styles.getPropertyValue('--color-placeholder-dark')
+		this.light = styles.getPropertyValue('--color-placeholder-light')
+	},
+
+	methods: {
+		randWidth() {
+			return Math.floor(Math.random() * 20) + 30
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+$clickable-area: 44px;
+$margin: 10px;
+
+.unified-search__result-placeholder-gradient {
+	position: fixed;
+	height: 0;
+	width: 0;
+	z-index: -1;
+}
+
+.unified-search__result-placeholder {
+	width: calc(100% - 2 * #{$margin});
+	height: $clickable-area;
+	margin: $margin;
+
+	&-icon {
+		width: $clickable-area;
+		height: $clickable-area;
+		rx: var(--border-radius);
+		ry: var(--border-radius);
+	}
+
+	&-line-one,
+	&-line-two {
+		width: calc(100% - #{$margin + $clickable-area});
+		height: 1em;
+		x: $margin + $clickable-area;
+	}
+
+	&-line-one {
+		y: 5px;
+	}
+
+	&-line-two {
+		y: 25px;
+	}
+}
+
+</style>