From 60f11dde405894ea8e5e870334dc61feb8f8ef4c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e=20Poussard?= <tpoussard@neogeo.fr>
Date: Fri, 7 Jan 2022 18:20:26 +0100
Subject: [PATCH] improve button styles, display message & guard routes
---
src/App.vue | 9 +-
src/router/index.js | 6 +-
src/views/project/Project_detail.vue | 145 +++++++++++++++++----------
3 files changed, 98 insertions(+), 62 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index a350dd8e..baf1424a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -120,7 +120,7 @@
</div>
<div class="desktop flex push-right-desktop">
- <router-link v-if="user" to="/my_account/" class="item">
+ <router-link v-if="user" :to="{name: 'my_account'}" class="item">
{{ userFullname || user.username || "Utilisateur inconnu" }}
</router-link>
<div
@@ -163,7 +163,8 @@
class="ui info message"
>
<div class="header">
- <i class="info circle icon"></i> Informations
+ <i class="info circle icon"></i>
+ Informations
</div>
<ul class="list">
{{
@@ -186,8 +187,8 @@
<footer>
<div class="ui compact text menu">
- <router-link to="/mentions/" class="item">Mentions légales</router-link>
- <router-link to="/aide/" class="item">Aide</router-link>
+ <router-link :to="{name: 'mentions'}" class="item">Mentions légales</router-link>
+ <router-link :to="{name: 'aide'}" class="item">Aide</router-link>
<p class="item">Version {{ PACKAGE_VERSION }}</p>
</div>
</footer>
diff --git a/src/router/index.js b/src/router/index.js
index 4dafe78e..f335b9e0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -24,17 +24,17 @@ const routes = [
component: () => import(/* webpackChunkName: "login" */'../views/registration/Login.vue')
},
{
- path: '/my_account/',
+ path: `${projectBase === 'projet' ? '': '/' + projectBase}/my_account/`,
name: 'my_account',
component: () => import('../views/My_account.vue')
},
{
- path: '/mentions/',
+ path: `${projectBase === 'projet' ? '': '/' + projectBase}/mentions/`,
name: 'mentions',
component: () => import('../views/flatpages/with_right_menu.vue')
},
{
- path: '/aide/',
+ path: `${projectBase === 'projet' ? '': '/' + projectBase}/aide/`,
name: 'aide',
component: () => import('../views/flatpages/Default.vue')
},
diff --git a/src/views/project/Project_detail.vue b/src/views/project/Project_detail.vue
index 3682133c..9cf071f4 100644
--- a/src/views/project/Project_detail.vue
+++ b/src/views/project/Project_detail.vue
@@ -3,9 +3,6 @@
<div v-frag v-if="permissions && permissions.can_view_project && project">
<div id="message" class="fullwidth">
<div v-if="tempMessage" class="ui positive message">
- <!-- <i class="close icon"></i> -->
- <!-- <div class="header">You are eligible for a reward</div> -->
-
<p><i class="check icon"></i> {{ tempMessage }}</p>
</div>
</div>
@@ -48,63 +45,83 @@
>{{ project.nb_published_features_comments }}
</div>
</div>
- <div class="ten wide column">
- <h1 class="ui header">
- <div class="content">
- {{ project.title }}
- <div v-if="arraysOffline.length > 0">
- {{ arraysOffline.length }} modification<span v-if="arraysOffline.length>1">s</span> en attente
+ <div class="ten wide column important-flex space-between">
+ <div>
+ <h1 class="ui header">
+ {{ project.title }}
+ </h1>
+ <div class="ui hidden divider"></div>
+ <div class="sub header">
+ {{ project.description }}
+ </div>
+ </div>
+
+ <div class="content flex flex-column-right">
+ <div class="flex flex-column-right">
+ <div class="ui icon right compact buttons flex-column-right">
+ <div>
+ <a
+ v-if="
+ user &&
+ permissions &&
+ permissions.can_view_project &&
+ isOffline() !== true
+ "
+ id="subscribe-button"
+ class="ui button button-hover-green"
+ data-tooltip="S'abonner au projet"
+ data-position="top center"
+ data-variation="mini"
+ @click="isModalOpen = true"
+ >
+ <i class="inverted grey envelope icon"></i>
+ </a>
+ <router-link
+ v-if="
+ permissions &&
+ permissions.can_update_project &&
+ isOffline() !== true
+ "
+ :to="{ name: 'project_edit', params: { slug: project.slug } }"
+ class="ui button button-hover-orange"
+ data-tooltip="Modifier le projet"
+ data-position="top center"
+ data-variation="mini"
+ >
+ <i class="inverted grey pencil alternate icon"></i>
+ </router-link>
+ </div>
<button
- :disabled="isOffline()"
- @click="sendOfflineFeatures()"
- class="ui fluid teal icon button"
+ v-if="user && user.is_administrator && !isSharedProject && project.generate_share_link"
+ class="ui teal left labeled icon button"
+ @click="copyLink"
>
- <i class="upload icon"></i> Envoyer au serveur
- </button>
- </div>
- <div class="ui icon right floated compact buttons">
- <a
- v-if="
- user &&
- permissions &&
- permissions.can_view_project &&
- isOffline() !== true
- "
- id="subscribe-button"
- class="ui button button-hover-green"
- data-tooltip="S'abonner au projet"
- data-position="top center"
- data-variation="mini"
- @click="isModalOpen = true"
- >
- <i class="inverted grey envelope icon"></i>
- </a>
- <router-link
- v-if="
- permissions &&
- permissions.can_update_project &&
- isOffline() !== true
- "
- :to="{ name: 'project_edit', params: { slug: project.slug } }"
- class="ui button button-hover-orange"
- data-tooltip="Modifier le projet"
- data-position="top center"
- data-variation="mini"
- >
- <i class="inverted grey pencil alternate icon"></i>
- </router-link>
- <button
- v-if="!isSharedProject && project.generate_share_link" class="ui button teal" @click="copyLink">
- <i class="ui icon clipboard"></i>
+ <i class="left icon share square"></i>
Copier le lien de partage
</button>
</div>
- <div class="ui hidden divider"></div>
- <div class="sub header">
- {{ project.description }}
+ <div v-if="confirmMsg">
+ <div class="ui positive tiny-margin message">
+ <span>
+ Le lien a été copié dans le presse-papier
+ </span>
+
+ <i class="close icon" @click="confirmMsg = ''" />
+ </div>
</div>
</div>
- </h1>
+ </div>
+ </div>
+ <div v-if="arraysOffline.length > 0">
+ {{ arraysOffline.length }} modification<span v-if="arraysOffline.length>1">s</span> en attente
+ <button
+ :disabled="isOffline()"
+ @click="sendOfflineFeatures()"
+ class="ui fluid labeled teal icon button"
+ >
+ <i class="upload icon"></i>
+ Envoyer au serveur
+ </button>
</div>
</div>
@@ -647,6 +664,7 @@ export default {
importMessage: null,
arraysOffline: [],
arraysOfflineErrors: [],
+ confirmMsg: false,
geojsonImport: [],
fileToImport: { name: "", size: 0 },
slug: this.$route.params.slug,
@@ -804,7 +822,10 @@ export default {
return "?ver=" + Math.random();
},
getRouteUrl(url) {
- return "/" + url.replace(this.$store.state.configuration.BASE_URL, ""); // remove duplicate /geocontrib
+ if (this.isSharedProject) {
+ url = url.replace("projet", "projet-partage")
+ }
+ return url.replace(this.$store.state.configuration.BASE_URL, ""); //* remove duplicate /geocontrib
},
isOffline() {
return navigator.onLine === false;
@@ -821,6 +842,7 @@ export default {
const sharedLink = window.location.href.replace("projet", "projet-partage");
navigator.clipboard.writeText(sharedLink).then(()=> {
console.log("success")
+ this.confirmMsg = true;
}, () => {
console.log("failed")
}
@@ -1030,7 +1052,6 @@ export default {
/* // ! missing style in semantic.min.css, je ne comprends pas comment... */
.ui.right.floated.button {
float: right;
- margin: 0 0 0 1em;
}
.feature-type-container {
@@ -1073,6 +1094,14 @@ export default {
.text-left {
text-align: left !important;
}
+.space-between {
+ justify-content: space-between;
+}
+
+.flex-column-right {
+ flex-direction: column !important;
+ align-items: flex-end;
+}
.import-message {
width: fit-content;
@@ -1080,3 +1109,9 @@ export default {
color: teal;
}
</style>
+
+<style scoped>
+.ui.button, .ui.button .button, .tiny-margin {
+ margin: 0.1rem 0 0.1rem 0.1rem !important;
+}
+</style>
\ No newline at end of file
--
GitLab