Minor refactor to subscribers UI. Remove superfluous status column.

lmmendes · Oct 13, 2024 · 4a69f0a · 4a69f0a
1 parent 474f935
commit 4a69f0a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 22 deletions.
diff --git a/frontend/src/assets/style.scss b/frontend/src/assets/style.scss
@@ -584,37 +584,27 @@ body.is-noscroll {
   &:not(body) {
     background-color: #eee;
     font-size: 0.85em;
-    // border: 1px solid $color;
-    // box-shadow: 1px 1px 0 $color;
     color: $grey;
   }
 
   &.private, &.scheduled, &.paused, &.tx, &.api {
     $color: #ed7b00;
     color: $color;
-    background: #fff7e6;
-    // border: 1px solid lighten($color, 37%);
-    // box-shadow: 1px 1px 0 lighten($color, 37%);
+    background: lighten($color, 47);
   }
   &.public, &.running, &.list, &.campaign, &.user, &.primary {
     $color: $primary;
     color: lighten($color, 20%);
     background: #e6f7ff;
-    // border: 1px solid lighten($color, 42%);
-    // box-shadow: 1px 1px 0 lighten($color, 42%);
   }
   &.finished, &.enabled, &.status-confirmed {
     color: $green;
     background: #dcfce7;
-    // border: 1px solid lighten($color, 45%);
-    // box-shadow: 1px 1px 0 lighten($color, 45%);
   }
   &.blocklisted, &.cancelled, &.status-unsubscribed {
     $color: $red;
     color: $color;
     background: #fff1f0;
-    border: 1px solid lighten($color, 30%);
-    // box-shadow: 1px 1px 0 lighten($color, 30%);
   }
 
   sup {
@@ -718,6 +708,10 @@ section.lists {
   .toggle-advanced {
     margin-top: 10px;
   }
+
+  .blocklisted {
+    color: red;
+  }
 }
 
 .b-table.subscriptions {

diff --git a/frontend/src/views/Subscribers.vue b/frontend/src/views/Subscribers.vue
@@ -103,19 +103,14 @@
         </div>
       </template>
 
-      <b-table-column v-slot="props" field="status" :label="$t('globals.fields.status')" header-class="cy-status"
-        :td-attrs="$utils.tdID" sortable>
-        <a :href="`/subscribers/${props.row.id}`" @click.prevent="showEditForm(props.row)">
-          <b-tag :class="props.row.status">
-            {{ $t(`subscribers.status.${props.row.status}`) }}
-          </b-tag>
-        </a>
-      </b-table-column>
-
       <b-table-column v-slot="props" field="email" :label="$t('subscribers.email')" header-class="cy-email" sortable>
-        <a :href="`/subscribers/${props.row.id}`" @click.prevent="showEditForm(props.row)">
+        <a :href="`/subscribers/${props.row.id}`" @click.prevent="showEditForm(props.row)"
+          :class="{ 'blocklisted': props.row.status === 'blocklisted' }">
           {{ props.row.email }}
         </a>
+        <b-tag v-if="props.row.status !== 'enabled'" :class="props.row.status">
+          {{ $t(`subscribers.status.${props.row.status}`) }}
+        </b-tag>
         <b-taglist>
           <template v-for="l in props.row.lists">
             <router-link :to="`/subscribers/lists/${l.id}`" :key="l.id" style="padding-right:0.5em;">
@@ -131,7 +126,8 @@
       </b-table-column>
 
       <b-table-column v-slot="props" field="name" :label="$t('globals.fields.name')" header-class="cy-name" sortable>
-        <a :href="`/subscribers/${props.row.id}`" @click.prevent="showEditForm(props.row)">
+        <a :href="`/subscribers/${props.row.id}`" @click.prevent="showEditForm(props.row)"
+          :class="{ 'blocklisted': props.row.status === 'blocklisted' }">
           {{ props.row.name }}
         </a>
       </b-table-column>