v0.19 add icons

assets/css/style.scss

@@ -101,3 +101,7 @@ $info: #0a8299;
 		max-width: 205px;
 	}
 }
+
+.icon {
+	width: 1.15rem;
+}

assets/img/clipboard.svg

-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" x="0px" y="0px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"><path d="M19,2h-4.2c-0.4-1.2-1.5-2-2.8-2S9.6,0.8,9.2,2H5C3.9,2,3,2.9,3,4v16c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V4  C21,2.9,20.1,2,19,2z M12,2c0.6,0,1,0.4,1,1c0,0.6-0.4,1-1,1s-1-0.4-1-1C11,2.4,11.4,2,12,2z M19,20H5V4h2v2h10V4h2V20z"/></svg>
\ No newline at end of file

components/badge/Danger.vue

@@ -7,7 +7,7 @@
 			$options.filters.dateStatus(limitDate) != 'success' &&
 			['MEMBER', 'MISSING'].includes(memberStatus)
 		"
-		>⚠
+		><outline-exclamation-icon class="icon" />
 		<span class="sr-only" v-if="title">{{ title }}</span>
 	</span>
 </template>

components/btn/Clipboard.vue

@@ -3,9 +3,11 @@
 		<div class="input-group-prepend">
 			<button
 				id="btncopy"
-				class="btn btn-outline-secondary px-4 py-1"
+				class="btn btn-secondary px-4 py-1"
 				type="button"
-				@click="copyText"></button>
+				@click="copyText">
+				<outline-clipboard-copy-icon class="icon" />
+			</button>
 		</div>
 		<input
 			type="text"
@@ -42,10 +44,5 @@ export default {
 <style lang="scss">
 .clipboard {
 	max-width: 500px;
-
-	button {
-		background: url("~assets/img/clipboard.svg") no-repeat 50% 50% #fff;
-		background-size: 40%;
-	}
 }
 </style>

components/btn/Pagination.vue

@@ -3,7 +3,7 @@
 		<button
 			class="btn"
 			:class="{
-				'btn-primary': currentPage > 1,
+				'btn-info': currentPage > 1,
 				'btn-secondary': currentPage == 1
 			}"
 			@click="prevPage"
@@ -16,7 +16,7 @@
 		<button
 			class="btn"
 			:class="{
-				'btn-primary': currentPage * pageSize < arrayLength,
+				'btn-info': currentPage * pageSize < arrayLength,
 				'btn-secondary': currentPage * pageSize >= arrayLength
 			}"
 			@click="nextPage"

components/btn/Search.vue

+<template>
+	<div>
+		<div class="input-group mb-3">
+			<div class="input-group-prepend">
+				<span class="input-group-text"
+					><outline-search-icon class="icon"
+				/></span>
+			</div>
+			<input
+				type="text"
+				class="form-control"
+				:value="value"
+				autocomplete="off"
+				@input="$emit('input', $event.target.value)"
+				:placeholder="$t('recherche.title')"
+				:aria-label="$t('recherche.title')"
+				aria-describedby="rechHelp" />
+		</div>
+		<small v-if="help" id="rechHelp" class="form-text text-muted text-center">{{
+			help
+		}}</small>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		value: {
+			type: String
+		},
+		help: {
+			type: String
+		}
+	}
+}
+</script>

components/btn/Sort.vue

 <template>
-	<button
-		class="px-1 py-2 w-100 h-100 d-flex align-items-center justify-content-center">
-		<span>{{ title }}</span>
-		<span class="ml-2 d-flex flex-column">
-			<span
-				class="up"
-				:class="{
-					sorted: currentSortDir == 'desc' && currentSort == fieldName,
-					invisible: currentSortDir == 'asc' && currentSort == fieldName
-				}">
-				▲
-			</span>
-			<span
-				class="down"
-				:class="{
-					sorted: currentSortDir == 'asc' && currentSort == fieldName,
-					invisible: currentSortDir == 'desc' && currentSort == fieldName
-				}">
-				▼
-			</span>
-		</span>
-	</button>
+	<div class="btn-sort px-2" tabindex="0">
+		{{ title }}
+		<outline-sort-ascending-icon
+			class="ml-2 icon"
+			v-if="currentSortDir == 'desc' && currentSort == fieldName" />
+		<outline-sort-descending-icon
+			class="ml-2 icon"
+			v-if="currentSortDir == 'asc' && currentSort == fieldName" />
+	</div>
 </template>
 
 <script>
@@ -49,16 +36,18 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.up,
-.down {
-	line-height: 10px;
-	font-size: 1.1rem;
-	transform: scale(1.5, 1);
-	opacity: 0.3;
-}
+<style lang="scss">
+.btn-sort {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	min-height: 50px;
+	cursor: pointer;
+	background: var(--info);
+	color: white;
 
-.sorted {
-	opacity: 1;
+	&:focus {
+		background: #086375;
+	}
 }
 </style>

components/certif/List.vue

@@ -4,7 +4,7 @@
 			type="text"
 			v-if="certifs.length > 5"
 			v-model="search"
-			class="form-control w-75 mx-auto mb-2"
+			class="form-control w-75 mx-auto my-2"
 			:placeholder="$t('recherche.title')" />
 		<table class="table table-striped table-hover">
 			<thead class="thead-light">

components/member/Card.vue

@@ -3,20 +3,23 @@
 		<div class="card-body">
 			<div
 				class="uid-wrapper d-flex align-items-center justify-content-between mb-4">
-				<h2 class="card-title text-center">
+				<h2 class="card-title text-center d-flex align-items-center">
 					<span class="text-truncate d-inline-block">
 						{{ hash.uid }}
 					</span>
-					<BadgeStatus :membre="hash" />
+					<BadgeStatus class="ml-2" :membre="hash" />
 				</h2>
 				<button
 					id="favori"
 					class="btn btn-info"
-					:class="{
-						add: !$favourites.list.includes(hash.uid),
-						remove: $favourites.list.includes(hash.uid)
-					}"
-					@click="$favourites.toggleFavourite(hash.uid, $event)"></button>
+					@click="$favourites.toggleFavourite(hash.uid, $event)">
+					<outline-user-add-icon
+						class="icon"
+						v-if="!$favourites.list.includes(hash.uid)" />
+					<outline-user-remove-icon
+						class="icon"
+						v-if="$favourites.list.includes(hash.uid)" />
+				</button>
 			</div>
 			<BtnClipboard :textContent="hash.pubkey" />
 			<div class="table-responsive">
@@ -159,19 +162,8 @@ export default {
 }
 
 #favori {
-	background-size: 75%;
-	background-repeat: no-repeat;
-	background-position: center;
 	width: 50px;
 	height: 50px;
-
-	&.add {
-		background-image: url("~/assets/img/favori_add.png");
-	}
-
-	&.remove {
-		background-image: url("~/assets/img/favori_remove.png");
-	}
 }
 
 .member {

components/member/List.vue

@@ -2,8 +2,13 @@
 	<div class="table-responsive pb-3">
 		<table class="table table-striped table-hover text-center">
 			<thead class="thead-light">
-				<tr class="h-100">
-					<th class="p-0 h-100" scope="col" @click="sort('uid')">
+				<tr class="border-left">
+					<th
+						class="p-0 border-right"
+						scope="col"
+						@click="sort('uid')"
+						@keyup.enter="sort('uid')"
+						@keyup.space="sort('uid')">
 						<BtnSort
 							fieldName="uid"
 							title="UID"
@@ -12,7 +17,7 @@
 					</th>
 					<th
 						scope="col"
-						class="d-none d-md-table-cell p-0"
+						class="d-none d-md-table-cell p-0 border-right"
 						@click="sort('pubkey')"
 						v-if="['search', 'favoris'].includes(type)">
 						<BtnSort
@@ -23,7 +28,7 @@
 					</th>
 					<th
 						scope="col"
-						class="d-none d-sm-table-cell p-0"
+						class="d-none d-sm-table-cell p-0 border-right"
 						@click="sort('date_membership')"
 						v-if="['adhesion', 'favoris', 'search'].includes(type)">
 						<BtnSort
@@ -38,7 +43,7 @@
 					</th>
 					<th
 						scope="col"
-						class="d-none p-0"
+						class="d-none p-0 border-right"
 						:class="{
 							'd-sm-table-cell': type == 'certif',
 							'd-md-table-cell': type != 'certif'
@@ -55,7 +60,7 @@
 							:currentSort="currentSort"
 							:currentSortDir="currentSortDir" />
 					</th>
-					<th v-if="type == 'favoris'"></th>
+					<th class="border-right" v-if="type == 'favoris'"></th>
 				</tr>
 			</thead>
 			<tbody>
@@ -116,7 +121,7 @@
 							v-if="$favourites.list.includes(member.uid)"
 							@click="$favourites.toggleFavourite(member.uid, $event)"
 							:title="$t('favoris.supprimer')">
-							X
+							<outline-trash-icon class="icon" />
 						</button>
 					</td>
 				</tr>

components/navigation/menu/Sidebar.vue

@@ -5,7 +5,7 @@
 				<img :src="$icon(512)" alt="Accueil" class="logo" />
 				<div>
 					<h1 class="h3">
-						Wotwizard <small><span class="small">v0.18</span></small>
+						Wotwizard <small><span class="small">v0.19</span></small>
 					</h1>
 					<small class="text-muted">{{ $t("slogan") }}</small>
 				</div>

layouts/default.vue

@@ -6,7 +6,7 @@
 			class="scrollToTop bg-primary position-fixed text-white d-flex align-items-center justify-content-center rounded"
 			href="#"
 			@click="scrollToTop($event)">
-			↑
+			<outline-chevron-double-up-icon class="icon" />
 		</a>
 	</div>
 </template>

nuxt.config.js

@@ -36,7 +36,9 @@ export default {
 	// Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
 	buildModules: [
 		// https://go.nuxtjs.dev/pwa
-		"@nuxtjs/pwa"
+		"@nuxtjs/pwa",
+		// https://github.com/whardier/nuxt-hero-icons
+		"@nuxt-hero-icons/outline/nuxt"
 	],
 
 	// Modules: https://go.nuxtjs.dev/config-modules

package.json

@@ -14,6 +14,7 @@
 		"nuxt-generate": "nuxt generate"
 	},
 	"dependencies": {
+		"@nuxt-hero-icons/outline": "^1.0.1",
 		"@nuxtjs/apollo": "^4.0.1-rc.5",
 		"@nuxtjs/i18n": "^7.2.0",
 		"@nuxtjs/pwa": "^3.3.5",

pages/favoris.vue

@@ -17,7 +17,7 @@
 						<input
 							type="text"
 							v-model="search"
-							class="form-control col-sm-6 col-md-5 col-lg-4 col-xl-3 mx-auto mb-2"
+							class="form-control col-sm-6 col-md-5 col-lg-4 col-xl-3 mx-auto mb-3"
 							:placeholder="$t('recherche.title')" />
 						<MemberList
 							defaultSort="date_membership"

pages/lexique.vue

@@ -3,13 +3,7 @@
 		<div class="rech-lexique row mb-4">
 			<div class="col-md-6 mx-auto">
 				<h2 class="text-center my-5 font-weight-light">{{ $t("lexique") }}</h2>
-				<div class="form-group">
-					<input
-						v-model="search"
-						type="text"
-						class="form-control"
-						:placeholder="$t('recherche.title')" />
-				</div>
+				<BtnSearch v-model="search" />
 			</div>
 		</div>
 		<div class="table-responsive">

pages/membres/index.vue

@@ -2,19 +2,8 @@
 	<main class="container">
 		<h2 class="text-center my-5 font-weight-light">{{ $t("membres") }}</h2>
 		<div class="row mb-4">
-			<div class="col-sm-8 col-md-6 col-lg-5 m-auto text-center">
-				<label for="rech" class="form-label">{{ $t("recherche.title") }}</label>
-				<input
-					type="text"
-					class="form-control"
-					id="rech"
-					aria-describedby="rechHelp"
-					v-model="param"
-					autocomplete="off"
-					@keyup="save" />
-				<small id="rechHelp" class="form-text text-muted">{{
-					$t("recherche.desc")
-				}}</small>
+			<div class="col-sm-8 col-md-6 col-lg-5 m-auto">
+				<BtnSearch v-model="param" :help="$t('recherche.desc')" />
 			</div>
 		</div>
 		<NavigationLoader :isLoading="$apollo.queries.idSearch.loading" />