Merge pull request #1248 from nextcloud/enhancement/allow-year-removal

Enhancement/allow year removal

.eslintrc.js

@@ -27,6 +27,7 @@ module.exports = {
 		'plugin:node/recommended',
 		'plugin:vue/essential',
 		'plugin:vue/recommended',
+		'plugin:nextcloud/recommended',
 		'standard'
 	],
 	settings: {
@@ -73,8 +74,14 @@ module.exports = {
 		// es6 import/export and require
 		'node/no-unpublished-require': ['off'],
 		'node/no-unsupported-features/es-syntax': ['off'],
-		// kebab case components for vuejs
+		// PascalCase components names for vuejs
+		// 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
+		 }],
 		// space before self-closing elements
 		'vue/html-closing-bracket-spacing': 'error',
 		// no ending html tag on a new line

css/ContactDetails.scss

@@ -21,42 +21,43 @@
  */
 
 #contact-details {
-
+	$grid-column-gap: 20px;
+	$grid-column-width: 350px;
 	// header
 	header {
-		height: 100px;
 		display: flex;
-		font-weight: bold;
 		align-items: center;
+		height: 100px;
+		font-weight: bold;
 
 		// ORG-TITLE-NAME
 		#contact-header-infos {
 			display: flex;
-			flex-direction: column;
 			flex: 1 1 auto; // shrink avatar before this one
+			flex-direction: column;
 			h2,
 			#details-org-container {
 				display: flex;
 				flex-wrap: wrap;
 				margin: 0;
 			}
 			input {
-				font-size: inherit;
-				color: #fff !important;
-				text-shadow: 0 0 2px var(--color-box-shadow);
-				background: transparent;
-				text-overflow: ellipsis;
 				overflow: hidden;
-				white-space: nowrap;
-				border: none;
-				margin: 0;
-				padding: 4px 5px;
 				flex: 1 1;
 				min-width: 100px;
 				max-width: 100%;
+				margin: 0;
+				padding: 4px 5px;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+				color: #fff !important;
+				border: none;
+				background: transparent;
+				text-shadow: 0 0 2px var(--color-box-shadow);
+				font-size: inherit;
 				&::placeholder {
-					color: #fff !important;
 					opacity: .8;
+					color: #fff !important;
 				}
 			}
 			#contact-org {
@@ -76,45 +77,43 @@
 				}
 			}
 			.header-icon {
-				height: 44px;
 				width: 44px;
+				height: 44px;
 				padding: 14px;
-				border-radius: 22px;
 				cursor: pointer;
-				background-size: 16px;
 				opacity: .7;
+				border-radius: 22px;
+				background-size: 16px;
 				&:hover,
 				&:focus {
 					opacity: 1;
 				}
 				&.header-icon--pulse {
-					margin: 8px;
 					width: 16px;
 					height: 16px;
+					margin: 8px;
 				}
 			}
 		}
 	}
 
-	$grid-column-gap: 20px;
-	$grid-column-width: 350px;
-
 	// contact details
 	section.contact-details {
 		display: grid;
+		min-height: 200px;
+		padding: 20px $grid-column-gap;
 		/* unquote is a strange hack to avoid removal of the comma by the scss compiler */
 		grid-template-columns: repeat(auto-fit, minmax(unquote('#{$grid-column-width}'), 1fr));
 		grid-column-gap: $grid-column-gap;
-		padding: 20px $grid-column-gap;
-		min-height: 200px;
 	}
 
 	// single column fix, better visual
 	@media only screen and (max-width: $navigation-width + $list-min-width + 2 * $grid-column-gap +$grid-column-width) {
 		section.contact-details {
+			padding: 10px;
+
 			grid-template-columns: 1fr;
 			grid-column-gap: 10px;
-			padding: 10px;
 		}
 	}
 }
@@ -124,9 +123,9 @@
 	right: 22px;
 	bottom: 0;
 	height: 44px;
-	line-height: 44px;
-	color: var(--color-text-lighter);
 	opacity: .5;
+	color: var(--color-text-lighter);
+	line-height: 44px;
 }
 
 #qrcode-modal {

css/ContactDetailsAvatar.scss

@@ -37,37 +37,37 @@
 		margin-left: auto;
 	}
 	&__background {
-		opacity: .2;
 		z-index: 0;
-		left: 0;
 		top: 50px;
+		left: 0;
+		opacity: .2;
 	}
 	&__photo,
 	&__options {
+		overflow: hidden;
 		width: 100%;
 		height: 100%;
 		border-radius: 50%;
-		overflow: hidden;
 	}
 	&__photo {
 		z-index: 10;
-		background-size: cover;
+		cursor: pointer;
 		background-repeat: no-repeat;
 		background-position: center;
-		cursor: pointer;
+		background-size: cover;
 	}
 	&__options {
-		top: 0;
-		z-index: 2;
 		position: absolute;
-		background-color: rgba(0, 0, 0, 0.2);
+		z-index: 2;
+		top: 0;
+		background-color: rgba(0, 0, 0, .2);
 	}
 	.contact-avatar-options {
+		display: block;
 		width: 100%;
 		height: 100%;
-		display: block;
 		opacity: .5;
-		background-color: rgba(0, 0, 0, 0.2);
+		background-color: rgba(0, 0, 0, .2);
 		&:hover,
 		&:active,
 		&:focus {
@@ -103,4 +103,3 @@
 		}
 	}
 }
-

css/ContactsList.scss

@@ -22,16 +22,16 @@
 
 #app-details-toggle {
 	position: fixed;
-	display: inline-block;
+	z-index: 149;
 	left: 0;
+	display: inline-block;
 	width: 44px;
 	height: 44px;
-	z-index: 149;
-	background-color: var(--color-background-darker);
+	margin-top: 44px; // under the show navigation button
 	cursor: pointer;
-	opacity: 0.6;
 	transform: rotate(180deg);
-	margin-top: 44px; // under the show navigation button
+	opacity: .6;
+	background-color: var(--color-background-darker);
 }
 
 
@@ -41,10 +41,10 @@
 }
 
 .vue-recycle-scroller__item-view {
-	// same as app-content-list-item
-	height: 68px;
 	// TODO: find better solution?
 	// https://github.com/Akryum/vue-virtual-scroller/issues/70
 	// hack to not show the transition
 	overflow: hidden;
-}
+	// same as app-content-list-item
+	height: 68px;
+}

css/ContactsListItem.scss

@@ -45,7 +45,7 @@
 		left: 0;
 		width: 100%;
 	}
-	
+
 	&.delete-slide-left-enter,
 	&.delete-slide-left-leave-to {
 		left: 100%;
@@ -58,9 +58,9 @@
 		position: absolute;
 		top: 0;
 		left: 0;
-		height: inherit;
 		width: inherit;
-		background-size: cover;
+		height: inherit;
 		cursor: pointer;
+		background-size: cover;
 	}
 }

css/ImportScreen.scss

@@ -21,9 +21,9 @@
  */
 
 .import-screen {
-	margin: 50px;
 	width: auto;
 	min-width: 30vw;
+	margin: 50px;
 	&__header {
 		padding-top: 20px;
 	}