From 7ce154d5973019b5d3fe6d417e31f12786d82f2c Mon Sep 17 00:00:00 2001
From: Axolotle <nchesnais@mailoo.org>
Date: Wed, 25 Nov 2020 16:20:59 +0100
Subject: [PATCH] uniformize description list and buttons

---
 app/src/scss/main.scss                |  29 +++----
 app/src/views/app/AppInfo.vue         |  52 ++++++------
 app/src/views/service/ServiceInfo.vue | 111 +++++++++++++-------------
 app/src/views/tool/ToolLog.vue        |  13 ++-
 4 files changed, 103 insertions(+), 102 deletions(-)

diff --git a/app/src/scss/main.scss b/app/src/scss/main.scss
index e7740f69..d99303bf 100644
--- a/app/src/scss/main.scss
+++ b/app/src/scss/main.scss
@@ -61,27 +61,20 @@ body {
   display: block;
 }
 
-// <b-row /> elems with <b-col> inside and eventually .sep inside
+// Descriptive list (<b-row /> elems with <b-col> inside)
 .row-line {
-  &:hover > div > :first-child {
-    background-color: rgba(0, 0, 0, 0.05);
-    border-radius: 0.2rem;
-    padding: 0 .5rem;
-    margin-right: -.5rem;
-    margin-left: -.5rem;
+  @include media-breakpoint-up(md) {
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.05);
+      border-radius: 0.2rem;
+    }
   }
 
-  & > div {
-    align-self: flex-start;
-    display: flex;
-    align-items: center;
-    // display a dashed line between col items
-    .sep {
-      height: 0;
-      border-top: 1px dashed rgba(0, 0, 0, 0.25);
-      flex-grow: 1;
-      margin: 0 .75rem;
-    }
+  @include media-breakpoint-down(sm) {
+      flex-direction: column;
+      margin-bottom: 0.5rem;
+      padding-bottom: 0.5rem;
+      border-bottom: $border-width solid $card-border-color;
   }
 }
 
diff --git a/app/src/views/app/AppInfo.vue b/app/src/views/app/AppInfo.vue
index b9bfb972..167b87a8 100644
--- a/app/src/views/app/AppInfo.vue
+++ b/app/src/views/app/AppInfo.vue
@@ -10,26 +10,29 @@
         v-for="(value, prop) in info" :key="prop"
         no-gutters class="row-line"
       >
-        <b-col cols="5" md="3" xl="3">
+        <b-col cols="auto" md="3">
           <strong>{{ $t(prop) }}</strong>
-          <span class="sep" />
         </b-col>
         <b-col>
           <a v-if="prop === 'url'" :href="value" target="_blank">{{ value }}</a>
           <span v-else>{{ value }}</span>
         </b-col>
       </b-row>
-      <hr>
-
-      <!-- MANAGE USER/GROUP -->
-      <p class="mb-2">
-        <strong>{{ $t('app_info_access_desc') }}</strong>
-        <br>
-        {{ allowedGroups.length > 0 ? allowedGroups.join(', ') + '.' : $t('nobody') }}
-      </p>
-      <b-button size="sm" :to="{ name: 'group-list'}" variant="info">
-        <icon iname="key-modern" /> {{ $t('groups_and_permissions_manage') }}
-      </b-button>
+      <b-row no-gutters class="row-line">
+        <b-col cols="auto" md="3">
+          <strong>{{ $t('app_info_access_desc') }}</strong>
+          <span class="sep" />
+        </b-col>
+        <b-col>
+          {{ allowedGroups.length > 0 ? allowedGroups.join(', ') + '.' : $t('nobody') }}
+          <b-button
+            size="sm" :to="{ name: 'group-list'}" variant="info"
+            class="ml-2"
+          >
+            <icon iname="key-modern" /> {{ $t('groups_and_permissions_manage') }}
+          </b-button>
+        </b-col>
+      </b-row>
     </b-card>
 
     <!-- OPERATIONS -->
@@ -39,11 +42,11 @@
       </template>
 
       <!-- CHANGE PERMISSIONS LABEL -->
-      <b-form-group :label="$t('app_manage_label_and_tiles')" label-class="font-weight-bold" :description="$t('app_info_managelabel_desc')">
+      <b-form-group :label="$t('app_manage_label_and_tiles')" label-class="font-weight-bold">
         <form-field
           v-for="(perm, i) in app.permissions" :key="i"
           :label="perm.title" :label-for="'perm-' + i"
-          label-cols="0" label-class=""
+          label-cols="0" label-class="" class="m-0"
           :validation="$v.form.labels.$each[i] "
         >
           <template #default="{ self }">
@@ -237,10 +240,13 @@ export default {
 
   methods: {
     fetchData () {
-      this.$store.dispatch('FETCH', { uri: 'users/permissions?full', storeKey: 'permissions' }).then(a => {
-        console.log(a)
-      })
-      api.get(`apps/${this.id}?full`).then((app) => {
+      Promise.all([
+          api.get(`apps/${this.id}?full`),
+          this.$store.dispatch('FETCH_ALL', [
+            { uri: 'users/permissions?full', storeKey: 'permissions' },
+            { uri: 'domains' }
+          ])
+      ]).then(([app]) => {
         const form = { labels: [] }
 
         const mainPermission = app.permissions[this.id + '.main']
@@ -263,10 +269,8 @@ export default {
           }
         }
 
-        console.log(app.permissions)
         this.info = {
           id: this.id,
-          // FIXME permission
           label: mainPermission.label,
           description: app.description,
           version: app.version,
@@ -280,22 +284,18 @@ export default {
             path: app.settings.path.slice(1)
           }
         }
-        // FIXME permission
+
         this.form = form
         this.app = {
           domain: app.settings.domain,
           supports_change_url: app.supports_change_url,
-          // FIXME permission
           permissions
         }
       })
-
-      this.$store.dispatch('FETCH', { uri: 'domains' })
     },
 
     changeLabel (permName, data) {
       data.show_tile = data.show_tile ? 'True' : 'False'
-      console.log(permName, data)
       api.put('users/permissions/' + permName, data).then(this.fetchData)
     },
 
diff --git a/app/src/views/service/ServiceInfo.vue b/app/src/views/service/ServiceInfo.vue
index 12c9dc65..8cd294c9 100644
--- a/app/src/views/service/ServiceInfo.vue
+++ b/app/src/views/service/ServiceInfo.vue
@@ -1,72 +1,75 @@
 <template>
   <div class="service-info">
-    <div class="actions">
-      <div class="buttons ml-auto">
-        <template v-if="status === 'running'">
-          <b-button
-            variant="warning"
-            @click="action = 'restart'" v-b-modal.action-confirm-modal
-          >
-            <icon iname="refresh" /> {{ $t('restart') }}
-          </b-button>
-          <b-button
-            variant="danger" :disabled="critical"
-            @click="action = 'stop'" v-b-modal.action-confirm-modal
-          >
-            <icon iname="warning" /> {{ $t('stop') }}
-          </b-button>
-        </template>
-        <template v-else>
-          <b-button
-            variant="success"
-            @click="action = 'start'" v-b-modal.action-confirm-modal
-          >
-            <icon iname="play" /> {{ $t('start') }}
-          </b-button>
-        </template>
-        <b-button @click="shareLogs">
-          <icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
-        </b-button>
-      </div>
-    </div>
-
+    <!-- INFO CARD -->
     <b-card>
       <template v-slot:header>
-        <h2><icon iname="info-circle" /> {{ name }}</h2>
+        <div class="d-sm-flex">
+          <h2><icon iname="info-circle" /> {{ name }}</h2>
+          <div class="ml-auto mt-2 mt-sm-0">
+            <template v-if="status === 'running'">
+              <b-button variant="warning" @click="action = 'restart'" v-b-modal.action-confirm-modal>
+                <icon iname="refresh" /> {{ $t('restart') }}
+              </b-button>
+              <b-button
+                v-if="!critical" variant="danger" class="ml-2"
+                @click="action = 'stop'" v-b-modal.action-confirm-modal
+              >
+                <icon iname="warning" /> {{ $t('stop') }}
+              </b-button>
+            </template>
+            <b-button
+              v-else
+              variant="success" @click="action = 'start'" v-b-modal.action-confirm-modal
+            >
+              <icon iname="play" /> {{ $t('start') }}
+            </b-button>
+          </div>
+        </div>
       </template>
 
-      <dl>
-        <dt v-t="'description'" />
-        <dd>{{ description }}</dd>
-        <hr>
-
-        <dt v-t="'status'" />
-        <dd>
+      <b-row no-gutters class="row-line">
+        <b-col cols="auto" md="3"><strong v-t="'description'" /></b-col>
+        <b-col>{{ description }}</b-col>
+      </b-row>
+      <b-row no-gutters class="row-line">
+        <b-col cols="auto" md="3"><strong v-t="'status'" /></b-col>
+        <b-col>
           <span :class="status === 'running' ? 'text-success' : 'text-danger'">
             <icon :iname="status === 'running' ? 'check-circle' : 'times'" />
             {{ status }}
           </span>
           {{ $t('since') }} {{ last_state_change | distanceToNow }}
-        </dd>
-        <hr>
-
-        <dt v-t="'service_start_on_boot'" />
-        <dd :class="start_on_boot === 'enabled' ? 'text-success' : 'text-danger'">
-          {{ $t(start_on_boot) }}
-        </dd>
-        <hr>
-
-        <dt v-t="'configuration'" />
-        <dd :class="{ 'text-success': configuration === 'valid', 'text-danger': configuration === 'broken' }">
-          {{ $t(configuration) }}
-        </dd>
-      </dl>
+        </b-col>
+      </b-row>
+      <b-row no-gutters class="row-line">
+        <b-col cols="auto" md="3"><strong v-t="'service_start_on_boot'" /></b-col>
+        <b-col>
+          <span :class="start_on_boot === 'enabled' ? 'text-success' : 'text-danger'">
+            {{ $t(start_on_boot) }}
+          </span>
+        </b-col>
+      </b-row>
+      <b-row no-gutters class="row-line">
+        <b-col cols="auto" md="3"><strong v-t="'configuration'" /></b-col>
+        <b-col>
+          <span :class="{ 'text-success': configuration === 'valid', 'text-danger': configuration === 'broken' }">
+            {{ $t(configuration) }}
+          </span>
+        </b-col>
+      </b-row>
     </b-card>
 
+    <!-- LOGS CARD -->
     <b-card>
       <template v-slot:header>
-        <h2><icon iname="book" /> {{ $t('logs') }}</h2>
+        <div class="d-sm-flex justify-content-sm-between">
+          <h2><icon iname="book" /> {{ $t('logs') }}</h2>
+          <b-button variant="success" @click="shareLogs" class="mt-2 mt-sm-0">
+            <icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
+          </b-button>
+        </div>
       </template>
+
       <div class="w-100" v-for="{ filename, content} in logs" :key="filename">
         <h3>{{ filename }}</h3>
         <pre class="bg-light p-3"><code>{{ content }}</code></pre>
@@ -152,7 +155,7 @@ export default {
         : 'services/' + this.name
 
       // FIXME API doesn't return anything to the PUT so => json err
-      api.fetch(method, uri).then(() => {
+      api[method](uri).then(() => {
         this.fetchData()
       })
     },
diff --git a/app/src/views/tool/ToolLog.vue b/app/src/views/tool/ToolLog.vue
index 4913b6a2..75523183 100644
--- a/app/src/views/tool/ToolLog.vue
+++ b/app/src/views/tool/ToolLog.vue
@@ -10,9 +10,8 @@
         v-for="(value, prop) in info" :key="prop"
         no-gutters class="row-line"
       >
-        <b-col cols="5" md="3" xl="3">
+        <b-col cols="auto" md="3">
           <strong>{{ $t('logs_' + prop) }}</strong>
-          <span class="sep" />
         </b-col>
         <b-col>
           <span v-if="prop.endsWith('_at')">{{ value | readableDate }}</span>
@@ -41,19 +40,25 @@
       <template v-slot:header>
         <div class="d-sm-flex justify-content-sm-between">
           <h2><icon iname="file-text" /> {{ $t('logs') }}</h2>
-          <b-button @click="shareLogs">
+          <b-button @click="shareLogs" variant="success">
             <icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
           </b-button>
         </div>
       </template>
+
       <b-button
         v-if="moreLogsAvailable"
-        variant="info" class="w-100 rounded-0"
+        variant="white" class="w-100 rounded-0"
         @click="fetchData"
       >
         <icon iname="plus" /> {{ $t('logs_more') }}
       </b-button>
+
       <pre><code v-html="logs" /></pre>
+
+      <b-button @click="shareLogs" variant="success" class="w-100 rounded-0">
+        <icon iname="cloud-upload" /> {{ $t('logs_share_with_yunopaste') }}
+      </b-button>
     </b-card>
   </div>
 </template>