Merge pull request #483 from YunoHost/list-group-item

New list-group-item styling for diagnosis

app/src/components/MessageListGroup.vue

@@ -4,15 +4,17 @@
     :class="{ 'fixed-height': fixedHeight, 'bordered': bordered }"
     @scroll="onScroll"
   >
-    <b-list-group-item
+    <yuno-list-group-item
       v-if="limit && messages.length > limit"
       variant="info" v-t="'api.partial_logs'"
     />
 
-    <b-list-group-item v-for="({ color, text }, i) in reducedMessages" :key="i">
-      <span class="status" :class="'bg-' + color" />
+    <yuno-list-group-item
+      v-for="({ color, text }, i) in reducedMessages" :key="i"
+      :variant="color" size="xs"
+    >
       <span v-html="text" />
-    </b-list-group-item>
+    </yuno-list-group-item>
   </b-list-group>
 </template>
 
@@ -75,18 +77,4 @@ export default {
   border: $card-border-width solid $card-border-color;
   @include border-radius($card-border-radius);
 }
-
-.list-group-item {
-  font-size: $font-size-sm;
-  padding: $tooltip-padding-y $tooltip-padding-x;
-  padding-left: 1rem;
-}
-
-.status {
-  position: absolute;
-  width: .4rem;
-  height: 100%;
-  top: 0;
-  left: 0;
-}
 </style>

app/src/components/globals/YunoListGroupItem.vue

@@ -0,0 +1,115 @@
+<template>
+  <b-list-group-item
+    class="yuno-list-group-item" :class="_class"
+    v-bind="$attrs"
+  >
+    <div v-if="!noStatus" class="yuno-list-group-item-status">
+      <icon
+        v-if="_icon" :iname="_icon"
+        :class="['icon-' + variant]"
+      />
+    </div>
+
+    <div class="yuno-list-group-item-content">
+      <slot name="default" />
+    </div>
+  </b-list-group-item>
+</template>
+
+<script>
+import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
+
+export default {
+  name: 'YunoListGroupItem',
+
+  props: {
+    variant: { type: String, default: 'white' },
+    icon: { type: String, default: null },
+    noIcon: { type: Boolean, default: false },
+    noStatus: { type: Boolean, default: false },
+    size: { type: String, default: 'md' },
+    faded: { type: Boolean, default: false }
+  },
+
+  computed: {
+    _icon () {
+      return this.noIcon ? null : this.icon || DEFAULT_STATUS_ICON[this.variant]
+    },
+
+    _class () {
+      const baseClass = 'yuno-list-group-item-'
+      return [
+         baseClass + this.size,
+         baseClass + this.variant,
+        { [baseClass + 'faded']: this.faded }
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.yuno-list-group-item {
+  display: flex;
+  padding: 0;
+
+  &-status {
+    width: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &-content {
+    width: 100%;
+    padding: $list-group-item-padding-y $list-group-item-padding-x;
+  }
+
+  @each $color, $value in $theme-colors {
+    &-#{$color} {
+      color: theme-color-level($color, 6);
+
+      [dark-theme="true"] & {
+        color: theme-color-level($color, -6);
+      }
+
+      .yuno-list-group-item-status {
+        background-color: $value;
+        color: color-yiq($value);
+      }
+    }
+  }
+
+  &-sm,
+  &-xs {
+    font-size: $font-size-sm;
+
+    .yuno-list-group-item-status {
+      width: 1.25rem;
+    }
+
+    .yuno-list-group-item-content {
+      padding: $tooltip-padding-y $tooltip-padding-x;
+    }
+  }
+
+  &-xs {
+    .yuno-list-group-item-status {
+      width: .4rem;
+
+      .icon {
+        display: none;
+      }
+    }
+
+    .yuno-list-group-item-content {
+      color: $black;
+    }
+  }
+
+  &-faded > * {
+    opacity: .5;
+  }
+}
+</style>

app/src/helpers/yunohostArguments.js

@@ -18,6 +18,15 @@ const NO_VALUE_FIELDS = [
   'ButtonItem'
 ]
 
+export const DEFAULT_STATUS_ICON = {
+  [null]: null,
+  danger: 'times',
+  error: 'times',
+  info: 'info',
+  success: 'check',
+  warning: 'warning'
+}
+
 /**
  * Tries to find a translation corresponding to the user's locale/fallback locale in a
  * Yunohost argument or simply return the string if it's not an object literal.

app/src/views/diagnosis/Diagnosis.vue

@@ -52,12 +52,12 @@
 
       <b-list-group flush>
         <!-- REPORT ITEM -->
-        <b-list-group-item
+        <yuno-list-group-item
           v-for="(item, i) in report.items" :key="i"
-          :variant="item.variant"
+          :variant="item.variant" :icon="item.icon" :faded="item.ignored"
         >
           <div class="item-button d-flex align-items-center">
-            <icon :iname="item.icon" class="mr-1" /> <p class="mb-0 mr-2" v-html="item.summary" />
+            <p class="mb-0 mr-2" v-html="item.summary" />
 
             <div class="d-flex flex-column flex-lg-row ml-auto">
               <b-button
@@ -72,9 +72,10 @@
               >
                 <icon iname="bell-slash" /> {{ $t('ignore') }}
               </b-button>
+
               <b-button
                 v-if="item.details"
-                size="sm" :variant="'outline-' + (theme ? 'light' : 'dark')" class="ml-lg-2 mt-2 mt-lg-0"
+                size="sm" variant="outline-dark" class="ml-lg-2 mt-2 mt-lg-0"
                 v-b-toggle="`collapse-${report.id}-item-${i}`"
               >
                 <icon iname="level-down" /> {{ $t('details') }}
@@ -87,7 +88,7 @@
               <li v-for="(detail, index) in item.details" :key="index" v-html="detail" />
             </ul>
           </b-collapse>
-        </b-list-group-item>
+        </yuno-list-group-item>
       </b-list-group>
     </card>
 
@@ -108,6 +109,7 @@ import { mapGetters } from 'vuex'
 
 import api from '@/api'
 import { distanceToNow } from '@/helpers/filters/date'
+import { DEFAULT_STATUS_ICON } from '@/helpers/yunohostArguments'
 
 export default {
   name: 'Diagnosis',
@@ -127,34 +129,6 @@ export default {
   },
 
   methods: {
-    formatReportItem (report, item) {
-      let issue = false
-      let icon = ''
-      const status = item.variant = item.status.toLowerCase()
-
-      if (status === 'success') {
-        icon = 'check-circle'
-      } else if (status === 'info') {
-        icon = 'info-circle'
-      } else if (item.ignored) {
-        icon = status !== 'error' ? status : 'times'
-        item.variant = 'light'
-        report.ignoreds++
-      } else if (status === 'warning') {
-        icon = status
-        issue = true
-        report.warnings++
-      } else if (status === 'error') {
-        item.variant = 'danger'
-        icon = 'times'
-        issue = true
-        report.errors++
-      }
-
-      item.issue = issue
-      item.icon = icon
-    },
-
     onQueriesResponse (_, reportsData) {
       if (reportsData === null) {
         this.reports = null
@@ -168,8 +142,23 @@ export default {
         report.ignoreds = 0
 
         for (const item of report.items) {
-          this.formatReportItem(report, item)
+          const status = item.variant = item.status.toLowerCase()
+          item.icon = DEFAULT_STATUS_ICON[status]
+          item.issue = false
+
+          if (item.ignored) {
+            item.variant = 'light'
+            report.ignoreds++
+          } else if (status === 'warning') {
+            item.issue = true
+            report.warnings++
+          } else if (status === 'error') {
+            item.variant = 'danger'
+            item.issue = true
+            report.errors++
           }
+        }
+
         report.noIssues = report.warnings + report.errors === 0
       }
       this.reports = reports
@@ -224,6 +213,10 @@ p.last-time-run {
   margin: .75rem 1rem;
 }
 
+.list-group {
+  border-top: $list-group-border-width solid $list-group-border-color;
+}
+
 .item-button {
   button {
     min-width: 6rem;