Feature/470/split appnavigationitem into small components

.eslintrc.js

@@ -21,10 +21,7 @@ module.exports = {
 		'plugin:nextcloud/recommended',
 		'standard'
 	],
-	plugins: [
-		'node',
-		'vue',
-	],
+	plugins: ['node', 'vue'],
 	rules: {
 		// space before function ()
 		'space-before-function-paren': ['error', 'never'],
@@ -36,7 +33,7 @@ module.exports = {
 		'brace-style': 'error',
 		// tabs only
 		indent: ['error', 'tab'],
-		'no-tabs': 0,
+		'no-tabs': ['off'],
 		'vue/html-indent': ['error', 'tab'],
 		// only debug console
 		'no-console': ['error', { allow: ['error', 'warn', 'debug'] }],
@@ -53,10 +50,13 @@ module.exports = {
 		// https://vuejs.org/v2/style-guide/#Single-file-component-filename-casing-strongly-recommended
 		'vue/component-name-in-template-casing': ['error', 'PascalCase'],
 		// force name
-		'vue/match-component-file-name': ['error', {
-			'extensions': ['jsx', 'vue', 'js'],
-			'shouldMatchCase': true
-		 }],
+		'vue/match-component-file-name': [
+			'error',
+			{
+				extensions: ['jsx', 'vue', 'js'],
+				shouldMatchCase: true
+			}
+		],
 		// space before self-closing elements
 		'vue/html-closing-bracket-spacing': 'error',
 		// no ending html tag on a new line

src/assets/variables.scss

@@ -47,3 +47,11 @@ $opacity_full: 1;
 // menu round background hover feedback
 // good looking on dark AND white bg
 $action-background-hover: rgba(127, 127, 127, .25);
+
+// various structure data used in the 
+// `AppNavigation` component
+$header-height: 50px;
+$navigation-width: 300px;
+
+// mobile breakpoint
+$breakpoint-mobile: 1024px;

src/components/ActionLink/ActionLink.vue

@@ -122,6 +122,5 @@ export default {
 @import '~Assets/action';
 @include action-active;
 @include action-item('link');
-@include action--disabled;
 
 </style>

src/components/Actions/Actions.vue

@@ -276,13 +276,21 @@ export default {
 			this.opened = false
 			this.offsetX = 0
 		},
+
+		/**
+		 * Run when the user open the menu
+		 * if align=center, we automatically
+		 * shift the popup if it's out of bound
+		 */
 		onOpen() {
 			this.offsetX = 0
-			const isOut = IsOutOfViewport(this.$refs.menu)
-			if (isOut.any) {
-				this.offsetX = isOut.offsetX > 0
-					? Math.round(isOut.offsetX) + 5
-					: Math.round(isOut.offsetX) - 5
+			if (this.menuAlign === 'center') {
+				const isOut = IsOutOfViewport(this.$refs.menu)
+				if (isOut.any) {
+					this.offsetX = isOut.offsetX > 0
+						? Math.round(isOut.offsetX) + 5
+						: Math.round(isOut.offsetX) - 5
+				}
 			}
 		},
 
@@ -446,7 +454,7 @@ $arrow-margin: ($clickable-area - 2 * $arrow-width)  / 2;
 
 		// make sure to not have the menu right
 		// on the edge of the window
-		margin: 10px;
+		margin-bottom: 10px;
 		margin-top: -5px;
 
 		transform: translateX(50%);

src/components/AppNavigation/AppNavigation.vue

@@ -2,6 +2,7 @@
  - @copyright Copyright (c) 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
  -
  - @author Christoph Wurst <christoph@winzerhof-wurst.at>
+ - @author Marco Ambrosini <marcoambrosini@pm.me>
  -
  - @license GNU AGPL version 3 or any later version
  -
@@ -20,7 +21,7 @@
  -
  -->
 <template>
-	<div id="app-navigation">
+	<div id="app-navigation" class="vue">
 		<slot />
 	</div>
 </template>
@@ -30,13 +31,50 @@ export default {
 	name: 'AppNavigation'
 }
 </script>
-<style lang="scss">
+
+<style lang="scss" scoped>
+@import '../assets/variables.scss';
+
 #app-navigation {
 	will-change: transform;
 	transition: transform var(--animation-quick);
+	width: $navigation-width;
+	position: fixed;
+	top: $header-height;
+	left: 0;
+	z-index: 500;
+	overflow-y: auto;
+	overflow-x: hidden;
+	// Do not use vh because of mobile headers
+	// are included in the calculation
+	height: calc(100% - #{$header-height});
+	box-sizing: border-box;
+	background-color: var(--color-main-background);
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+	border-right: 1px solid var(--color-border);
+	display: flex;
+	flex-direction: column;
+	flex-grow: 0;
+	flex-shrink: 0;
 }
+
+//list of navigation items
+ul {
+	position: relative;
+	height: 100%;
+	width: inherit;
+	overflow-x: hidden;
+	overflow-y: auto;
+	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
+}
+
 // mobile view only
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: $breakpoint-mobile) {
 	// if navigation is shown
 	.nav-open #app-navigation {
 		transform: translateX(0);

src/components/AppNavigationCaption/AppNavigationCaption.vue

@@ -1,6 +1,6 @@
 <template>
-	<li class="app-navigation-caption--item">
-		{{ text }}
+	<li class="app-navigation-caption">
+		{{ title }}
 	</li>
 </template>
 
@@ -9,15 +9,16 @@
 export default {
 	name: 'AppNavigationCaption',
 	props: {
-		text: {
+		title: {
 			type: String,
 			required: true
 		}
 	}
 }
 </script>
+
 <style lang="scss" scoped>
-.app-navigation-caption--item {
+.app-navigation-caption {
 	font-weight: bold;
 	color: var(--color-text-maxcontrast);
 	line-height: $clickable-area;
@@ -27,10 +28,12 @@ export default {
 	text-overflow: ellipsis;
 	opacity: 0.7;
 	box-shadow: none !important;
-	pointer-events: none;
+	order: 1;
+	flex-shrink: 0;
 }
 
-.app-navigation-caption--item:not(:first-child) {
+// extra top space if it's not the first item on the list
+.app-navigation-caption:not(:first-child) {
 	margin-top: $clickable-area / 2;
 }
 </style>

src/components/AppNavigationCounter/AppNavigationCounter.vue

@@ -1,5 +1,5 @@
 <!--
- - @copyright Copyright (c) 2019 Marco Ambrosini <ma12co@pm.me>
+ - @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@pm.me>
  -
  - @author Marco Ambrosini <marcoambrosini@pm.me>
  -
@@ -25,26 +25,23 @@
 ### Normal Counter
 
 ```
-<AppNavigationCounter :highlighted="false">
-your number or string
-</AppNavigationCounter>
+<AppNavigationCounter>314+</AppNavigationCounter>
 ```
 
 ### Highlighted Counter (i.e. mentions)
 
 ```
-<AppNavigationCounter :highlighted="true">
-your number or string
-</AppNavigationCounter>
+<AppNavigationCounter :highlighted="true">@admin</AppNavigationCounter>
+<AppNavigationCounter :highlighted="true">314+</AppNavigationCounter>
 ```
 
 </docs>
 
 <template>
-	<li :class="{ highlighted }"
-		class="app-navigation-entry-utils-counter">
-		<span><slot /></span>
-	</li>
+	<div :class="{ 'app-navigation-entry__counter--highlighted': highlighted }"
+		class="app-navigation-entry__counter">
+		<slot />
+	</div>
 </template>
 
 <script>
@@ -62,25 +59,20 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.app-navigation-entry__counter {
+	overflow: hidden;
+	max-width: $clickable-area;
+	margin: 4px;
+	padding: 0 4px;
+	text-align: center;
+	text-overflow: ellipsis;
+	line-height: 1em;
 
-	.app-navigation-entry-utils-counter {
-		overflow: hidden;
-		text-align: right;
-		font-size: 9px;
-		line-height: $clickable-area;
-		padding: 0 12px; /* Same padding as all li > a in the app-navigation */
-
-	}
-
-	.highlighted {
-		padding: 0;
-		text-align: center;
-		span {
-			padding: 2px 5px;
-			border-radius: 10px;
-			background-color: var(--color-primary);
-			color: var(--color-primary-text);
-		}
+	&--highlighted {
+		padding: 4px 6px;
+		color: var(--color-primary-text);
+		border-radius: 10px;
+		background-color: var(--color-primary);
 	}
-
+}
 </style>

src/components/AppNavigationCounter/index.js

@@ -1,5 +1,5 @@
 /**
- * @copyright Copyright (c) 2019 Marco Ambrosini <ma12co@pm.me>
+ * @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@pm.me>
  *
  * @author Marco Ambrosini <marcoambrosini@pm.me>
  *

src/components/AppNavigationIconBullet/AppNavigationIconBullet.vue

@@ -0,0 +1,95 @@
+<!--
+  - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @author John Molakvoæ <skjnldsv@protonmail.com>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<docs>
+### Bullet
+This component is made to be used inside of the [AppNavigationItem](#AppNavigationItem) component slot: `icon`.
+
+```
+<AppNavigationIconBullet slot="icon" color="0082c9" />
+<AppNavigationIconBullet slot="icon" color="#0082c9" />
+
+```
+
+### AppNavigationItem example
+```
+<AppNavigationItem  title="Entry 2" :pinned="true">
+	<AppNavigationIconBullet slot="icon" color="0082c9" />
+</AppNavigationItem>
+```
+</docs>
+
+<template>
+	<div class="app-navigation-entry__icon-bullet" @click="onClick">
+		<div :style="{ backgroundColor: formattedColor }" />
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'AppNavigationIconBullet',
+
+	props: {
+		color: {
+			type: String,
+			required: true,
+			validator: function(color) {
+				// #000, 000, #0082c9 and 0082c9
+				return /^#?([0-9A-F]{3}){1,2}$/i.test(color)
+			}
+		}
+	},
+
+	computed: {
+		formattedColor() {
+			if (this.color.startsWith('#')) {
+				return this.color
+			}
+			return '#' + this.color
+		}
+	},
+
+	methods: {
+		onClick(e) {
+			this.$emit('click', e)
+		}
+	}
+
+}
+</script>
+
+<style lang="scss" scoped>
+.app-navigation-entry__icon-bullet {
+	display: block;
+	// there is 2 margins
+	padding: $icon-margin + 1px;
+	div {
+		width: $icon-size - 2px;
+		height: $icon-size - 2px;
+		cursor: pointer;
+		transition: background 100ms ease-in-out;
+		border: none;
+		border-radius: 50%;
+	}
+}
+
+</style>