Use vue-components for app-navigation

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
nextcloud · Jan 22, 2020 · ea33698 · ea33698
1 parent aef5522
commit ea33698
Show file tree

Hide file tree

Showing 5 changed files with 189 additions and 284 deletions.
diff --git a/css/src/style.scss b/css/src/style.scss
@@ -3,49 +3,30 @@
 	*/
 
 #app-navigation {
-	&:not(.vue) {
-		> ul > li {
-			> a {
-				background-position: inherit;
-			}
-			> .app-navigation-entry-edit {
-				padding-left: 5px !important;
-			}
-		}
-		.app-navigation-entry-menu {
-			ul {
-				align-items: unset;
-				li {
-					width: auto !important;
-				}
-			}
-		}
-	}
 	> ul {
 		> li {
-			background-image: unset;
-
-			> a {
-				background-image: unset;
-				background-position: inherit;
-			}
-
-			.sprite::before {
+			&.collection .app-navigation-entry-icon::before {
 				content: '';
 				position: absolute;
-				z-index: -1;
 				width: 16px;
 				height: 16px;
 				background: var(--icon-tasks-bw-000) no-repeat;
-				margin: 14px;
-				margin-left: -30px;
 				background-position: inherit;
 			}
 
-			&.active .app-navigation-entry-bullet {
-				height: 16px;
-				width: 16px;
-				margin: 14px;
+			&.list {
+				&.active .app-navigation-entry__icon-bullet > div {
+					height: 16px;
+					width: 16px;
+					margin: -1px;
+				}
+
+				&:not(.active) {
+					.app-navigation-entry__utils .action-item,
+					.calendar__share {
+						display: none;
+					}
+				}
 			}
 
 			&.edit {
@@ -61,20 +42,32 @@
 				}
 			}
 
-			&.animate-up {
-				display: none;
-			}
-
-			&.list:not(.active) {
-				.app-navigation-entry-utils-menu-button,
-				.calendar__share {
+			&.list, &.collection {
+				.task-item {
 					display: none;
 				}
 			}
 
-			&.list, &.collection {
-				.task-item {
-					display: none;
+			button {
+				&.icon-share {
+					opacity: 0.3 !important;
+				}
+
+				&.icon-shared,
+				&.icon-public {
+					opacity: 0.7 !important;
+				}
+
+				&.icon-share:active,
+				&.icon-share:focus,
+				&.icon-share:hover,
+				&.icon-shared:active,
+				&.icon-shared:focus,
+				&.icon-shared:hover,
+				&.icon-public:active,
+				&.icon-public:focus,
+				&.icon-public:hover {
+					opacity: 1 !important;
 				}
 			}
 
@@ -114,71 +107,6 @@
 		}
 	}
 
-	.app-navigation-entry-utils li {
-		font-size: 100%;
-	}
-
-	.app-navigation-entry-menu {
-		ul {
-			align-items: unset;
-		}
-
-		li {
-			float: inherit;
-			width: auto !important;
-			cursor: pointer;
-			height: 44px;
-
-			/*
-			 * rules for confirmation directive
-			 */
-			> a {
-				&:not(:empty).confirmation-confirm {
-					padding: 0 !important;
-				}
-
-				span.countdown {
-					background-color: inherit;
-					color: $white;
-					display: block;
-					text-align: center;
-					filter: alpha(opacity=100) !important;
-					opacity: 1 !important;
-				}
-			}
-
-			&:hover a {
-				opacity: 1 !important;
-			}
-
-			&.confirmed a {
-				&.confirmation-confirm {
-					display: inline-block !important;
-					opacity: 1;
-				}
-
-				&.confirmation-abort {
-					display: inline-block !important;
-					opacity: 1;
-				}
-			}
-
-			img {
-				cursor: pointer;
-				margin-right: 5px;
-				vertical-align: text-bottom;
-			}
-
-			span {
-				cursor: pointer;
-			}
-
-			button {
-				float: inherit;
-			}
-		}
-	}
-
 	> ul ul.colorpicker-list {
 		display: inline-flex;
 	}
@@ -237,39 +165,6 @@
 	}
 }
 
-.confirmation-default {
-	overflow: hidden;
-}
-
-.confirmed {
-	.confirmation-default {
-		display: none !important;
-	}
-
-	&.active {
-		.confirmation-confirm {
-			cursor: pointer !important;
-		}
-
-		.countdown {
-			visibility: hidden;
-		}
-	}
-}
-
-.confirmation-abort {
-	width: 50% !important;
-	display: none !important;
-	padding: 0 !important;
-	background-position: center !important;
-}
-
-.confirmation-confirm {
-	@extend .confirmation-abort;
-	background-color: $red !important;
-	cursor: default !important;
-}
-
 /**
 	* rules for settings area
 	*/
@@ -370,7 +265,7 @@
 		}
 	}
 
-	.content-wrapper {
+	> div {
 		padding: 6px 17px 75px;
 		box-sizing: border-box;
 		height: 100%;

diff --git a/src/app.vue b/src/app.vue
@@ -21,16 +21,16 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 
 <template>
 	<div id="content" class="app-tasks" @click="closeDetails($event)">
-		<div id="app-navigation">
+		<AppNavigation>
 			<TheList />
-			<TheSettings />
-		</div>
+			<AppNavigationSettings>
+				<TheSettings />
+			</AppNavigationSettings>
+		</AppNavigation>
 
-		<div id="app-content">
-			<div class="content-wrapper">
-				<RouterView />
-			</div>
-		</div>
+		<AppContent>
+			<RouterView />
+		</AppContent>
 
 		<div id="app-sidebar" :class="{disappear: $route.params.taskId === undefined}">
 			<RouterView name="details" />
@@ -40,6 +40,9 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 
 <script>
 import { mapState } from 'vuex'
+import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
+import AppContent from '@nextcloud/vue/dist/Components/AppContent'
+import AppNavigationSettings from '@nextcloud/vue/dist/Components/AppNavigationSettings'
 import TheList from './components/TheList'
 import TheSettings from './components/TheSettings'
 import client from './services/cdav.js'
@@ -49,6 +52,9 @@ export default {
 	components: {
 		TheSettings,
 		TheList,
+		AppNavigation,
+		AppContent,
+		AppNavigationSettings,
 	},
 	computed: {
 		...mapState({