Mercurial > gemma
changeset 2382:c28971cd70ce
client: indicator for imports waiting for review
The main menu button and the staging area menu item now show an indicator for open imports
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 25 Feb 2019 08:35:47 +0100 |
parents | 99274fed6f3d |
children | 8d025f85a3fe |
files | client/src/components/Sidebar.vue |
diffstat | 1 files changed, 152 insertions(+), 123 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Sidebar.vue Fri Feb 22 18:02:23 2019 +0100 +++ b/client/src/components/Sidebar.vue Mon Feb 25 08:35:47 2019 +0100 @@ -1,143 +1,151 @@ <template> - <div :class="sidebarStyle"> - <div - @click="$store.commit('application/showSidebar', !showSidebar)" - class="menubutton ui-element d-print-none p-2 bg-white rounded position-absolute d-flex justify-content-center" - > - <font-awesome-icon class="fa-fw" icon="bars"></font-awesome-icon> - </div> - <div class="menu text-nowrap text-left"> - <router-link to="/"> - <font-awesome-icon - class="fa-fw mr-2" - fixed-width - icon="map-marked-alt" - ></font-awesome-icon> - <span class="fix-trans-space" v-translate>Map</span> - </router-link> - <router-link to="/bottlenecks"> - <font-awesome-icon - class="fa-fw mr-2" - fixed-width - icon="ship" - ></font-awesome-icon> - <span class="fix-trans-space" v-translate>Bottlenecks</span> - </router-link> - <div v-if="isWaterwayAdmin"> - <router-link to="/review"> + <div class="position-relative"> + <span class="indicator" v-if="!showSidebar && staging.length"> + {{ staging.length }} + </span> + <div :class="sidebarStyle"> + <div + @click="$store.commit('application/showSidebar', !showSidebar)" + class="menubutton ui-element d-print-none p-2 bg-white rounded position-absolute d-flex justify-content-center" + > + <font-awesome-icon class="fa-fw" icon="bars"></font-awesome-icon> + </div> + <div class="menu text-nowrap text-left"> + <router-link to="/"> <font-awesome-icon class="fa-fw mr-2" fixed-width - icon="clipboard-check" + icon="map-marked-alt" ></font-awesome-icon> - <span class="fix-trans-space" v-translate>Staging area</span> - </router-link> - </div> - <div v-if="isSysAdmin"> - <router-link to="/stretches"> - <font-awesome-icon - class="fa-fw mr-2" - fixed-width - icon="road" - ></font-awesome-icon> - <span class="fix-trans-space" v-translate>Define stretches</span> + <span class="fix-trans-space" v-translate>Map</span> </router-link> - </div> - <div v-if="isWaterwayAdmin"> - <small class="text-muted pl-3"> <translate>Import</translate> </small> - <hr class="m-0" /> - <router-link to="/importsoundingresults"> - <font-awesome-icon - class="fa-fw mr-2" - fixed-width - icon="upload" - ></font-awesome-icon> - <span class="fix-trans-space" v-translate - >Import soundingresults</span - > - </router-link> - <router-link to="/importapprovedgaugemeasurement"> + <router-link to="/bottlenecks"> <font-awesome-icon class="fa-fw mr-2" fixed-width - icon="upload" + icon="ship" ></font-awesome-icon> - <span class="fix-trans-space" v-translate - >Import approved gaugemeasurements</span - > - </router-link> - <router-link to="/importwaterwayprofiles"> - <font-awesome-icon - class="fa-fw mr-2" - fixed-width - icon="upload" - ></font-awesome-icon> - <span class="fix-trans-space" v-translate - >Import waterway profiles</span - > + <span class="fix-trans-space" v-translate>Bottlenecks</span> </router-link> - <router-link to="/importschedule"> - <font-awesome-icon - class="fa-fw mr-2" - fixed-width - icon="clock" - ></font-awesome-icon> - <translate class="fix-trans-space">Imports</translate> - </router-link> - <small class="text-muted pl-3"> - <translate>Systemadministration</translate> - </small> + <div v-if="isWaterwayAdmin"> + <router-link to="/review" class="position-relative"> + <font-awesome-icon + class="fa-fw mr-2" + fixed-width + icon="clipboard-check" + ></font-awesome-icon> + <span class="fix-trans-space" v-translate>Staging area</span> + <span class="indicator" v-if="showSidebar && staging.length"> + {{ staging.length }} + </span> + </router-link> + </div> + <div v-if="isSysAdmin"> + <router-link to="/stretches"> + <font-awesome-icon + class="fa-fw mr-2" + fixed-width + icon="road" + ></font-awesome-icon> + <span class="fix-trans-space" v-translate>Define stretches</span> + </router-link> + </div> + <div v-if="isWaterwayAdmin"> + <small class="text-muted pl-3"> <translate>Import</translate> </small> + <hr class="m-0" /> + <router-link to="/importsoundingresults"> + <font-awesome-icon + class="fa-fw mr-2" + fixed-width + icon="upload" + ></font-awesome-icon> + <span class="fix-trans-space" v-translate + >Import soundingresults</span + > + </router-link> + <router-link to="/importapprovedgaugemeasurement"> + <font-awesome-icon + class="fa-fw mr-2" + fixed-width + icon="upload" + ></font-awesome-icon> + <span class="fix-trans-space" v-translate + >Import approved gaugemeasurements</span + > + </router-link> + <router-link to="/importwaterwayprofiles"> + <font-awesome-icon + class="fa-fw mr-2" + fixed-width + icon="upload" + ></font-awesome-icon> + <span class="fix-trans-space" v-translate + >Import waterway profiles</span + > + </router-link> + <router-link to="/importschedule"> + <font-awesome-icon + class="fa-fw mr-2" + fixed-width + icon="clock" + ></font-awesome-icon> + <translate class="fix-trans-space">Imports</translate> + </router-link> + <small class="text-muted pl-3"> + <translate>Systemadministration</translate> + </small> + <hr class="m-0" /> + </div> + <div v-if="isSysAdmin"> + <router-link to="/usermanagement"> + <font-awesome-icon + class="fa-fw mr-2" + fixed-width + icon="users-cog" + ></font-awesome-icon> + <span class="fix-trans-space" v-translate>Users</span> + </router-link> + </div> + <div v-if="isWaterwayAdmin"> + <router-link to="/systemconfiguration"> + <font-awesome-icon + class="fa-fw mr-2" + fixed-width + icon="wrench" + ></font-awesome-icon> + <span class="fix-trans-space" v-translate>Configuration</span> + </router-link> + </div> + <div v-if="isSysAdmin"> + <router-link to="/logs"> + <font-awesome-icon + class="fa-fw mr-2" + fixed-width + icon="book" + ></font-awesome-icon> + <span class="fix-trans-space" v-translate>Logs</span> + </router-link> + </div> + <div v-if="isWaterwayAdmin"> + <router-link to="/importqueue"> + <font-awesome-icon + class="fa-fw mr-2" + fixed-width + icon="tasks" + ></font-awesome-icon> + <span class="fix-trans-space" v-translate>Importqueue</span> + </router-link> + </div> <hr class="m-0" /> - </div> - <div v-if="isSysAdmin"> - <router-link to="/usermanagement"> + <a @click="logoff" href="#" class="logout"> <font-awesome-icon class="fa-fw mr-2" fixed-width - icon="users-cog" - ></font-awesome-icon> - <span class="fix-trans-space" v-translate>Users</span> - </router-link> - </div> - <div v-if="isWaterwayAdmin"> - <router-link to="/systemconfiguration"> - <font-awesome-icon - class="fa-fw mr-2" - fixed-width - icon="wrench" - ></font-awesome-icon> - <span class="fix-trans-space" v-translate>Configuration</span> - </router-link> - </div> - <div v-if="isSysAdmin"> - <router-link to="/logs"> - <font-awesome-icon - class="fa-fw mr-2" - fixed-width - icon="book" + icon="power-off" ></font-awesome-icon> - <span class="fix-trans-space" v-translate>Logs</span> - </router-link> + <span class="fix-trans-space" v-translate>Logout</span> {{ user }} + </a> </div> - <div v-if="isWaterwayAdmin"> - <router-link to="/importqueue"> - <font-awesome-icon - class="fa-fw mr-2" - fixed-width - icon="tasks" - ></font-awesome-icon> - <span class="fix-trans-space" v-translate>Importqueue</span> - </router-link> - </div> - <hr class="m-0" /> - <a @click="logoff" href="#" class="logout"> - <font-awesome-icon - class="fa-fw mr-2" - fixed-width - icon="power-off" - ></font-awesome-icon> - <span class="fix-trans-space" v-translate>Logout</span> {{ user }} - </a> </div> </div> </template> @@ -166,6 +174,7 @@ computed: { ...mapGetters("user", ["isSysAdmin", "isWaterwayAdmin"]), ...mapState("user", ["user"]), + ...mapState("imports", ["staging"]), ...mapState("application", [ "showSidebar", "showSearchbarLastState", @@ -213,12 +222,32 @@ color: #666; } +.indicator { + font-size: 11px; + line-height: 11px; + padding: 2px 4px 1px; + position: absolute; + top: 18px; + left: 0px; + z-index: 10; + color: #fff; + background: #17a2b8; + border-top-right-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; +} + .menu a { display: block; text-align: left; padding: 0.5rem 1rem; color: #333; text-decoration: none; + .indicator { + left: auto; + right: 10px; + top: 10px; + border-radius: 0.25rem; + } } .menu a svg path {