design: Fixes to make portal page design close to figma mockups (#5383)

2022-09-02 18:07:17 +05:30 · 2022-09-02 18:07:17 +05:30 · a9801a3c76
commit a9801a3c76
parent 8bdd229adb
9 changed files with 197 additions and 141 deletions
--- a/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
+++ b/app/javascript/dashboard/components/layout/sidebarComponents/SecondaryNavItem.vue
@ -1,13 +1,19 @@
 <template>
  <li class="sidebar-item">
    <div v-if="hasSubMenu" class="secondary-menu--wrap">
-      <span class="secondary-menu--title fs-small">
+      <span class="secondary-menu--header fs-small">
        {{ $t(`SIDEBAR.${menuItem.label}`) }}
      </span>
      <div v-if="isHelpCenterSidebar" class="submenu-icons">
-        <div class="submenu-icon" @click="onClickOpen">
+        <woot-button
+          size="tiny"
+          variant="clear"
+          color-scheme="secondary"
+          class="submenu-icon"
+          @click="onClickOpen"
+        >
          <fluent-icon icon="add" size="16" />
-        </div>
+        </woot-button>
      </div>
    </div>
    <router-link
@ -214,13 +220,22 @@ export default {
 .secondary-menu--wrap {
  display: flex;
  justify-content: space-between;
+  margin-top: var(--space-small);
 }

+.secondary-menu--header {
+  color: var(--s-700);
+  display: flex;
+  font-weight: var(--font-weight-bold);
+  line-height: var(--space-normal);
+  margin: var(--space-small) 0;
+  padding: 0 var(--space-small);
+}
 .secondary-menu--title {
  color: var(--s-600);
  display: flex;
-  font-weight: var(--font-weight-bold);
-  line-height: var(--space-two);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--space-normal);
  margin: var(--space-small) 0;
  padding: 0 var(--space-small);
 }
@ -232,6 +247,7 @@ export default {
  padding: var(--space-small);
  font-weight: var(--font-weight-medium);
  border-radius: var(--border-radius-normal);
+  color: var(--s-700);

  &:hover {
    background: var(--s-25);
@ -323,19 +339,14 @@ export default {
  align-items: center;

  .submenu-icon {
+    padding: 0;
    margin-left: var(--space-small);
-    color: var(--s-600);
-
-    &:hover {
-      cursor: pointer;
-      color: var(--w-500);
-    }
  }
 }

 .empty-text {
-  color: var(--s-600);
+  color: var(--s-500);
  font-size: var(--font-size-small);
-  margin: var(--space-smaller) 0;
+  margin: var(--space-smaller);
 }
 </style>
--- a/app/javascript/dashboard/components/ui/Label.vue
+++ b/app/javascript/dashboard/components/ui/Label.vue
@ -72,7 +72,9 @@ export default {
      return this.color || getContrastingTextColor(this.bgColor);
    },
    labelClass() {
-      return `label ${this.colorScheme} ${this.small ? 'small' : ''}`;
+      return `label ${this.colorScheme} ${this.variant} ${
+        this.small ? 'small' : ''
+      }`;
    },
    labelStyle() {
      if (this.bgColor) {
@ -146,6 +148,9 @@ export default {
    a {
      color: var(--w-900);
    }
+    .label-color-dot {
+      background: var(--w-600);
+    }
  }
  &.secondary {
    background: var(--s-100);
@ -154,6 +159,9 @@ export default {
    a {
      color: var(--s-900);
    }
+    .label-color-dot {
+      background: var(--s-600);
+    }
  }
  &.success {
    background: var(--g-100);
@ -162,6 +170,9 @@ export default {
    a {
      color: var(--g-900);
    }
+    .label-color-dot {
+      background: var(--g-600);
+    }
  }
  &.alert {
    background: var(--r-100);
@ -170,6 +181,9 @@ export default {
    a {
      color: var(--r-900);
    }
+    .label-color-dot {
+      background: var(--r-600);
+    }
  }
  &.warning {
    background: var(--y-100);
@ -178,6 +192,15 @@ export default {
    a {
      color: var(--y-900);
    }
+    .label-color-dot {
+      background: var(--y-900);
+    }
+  }
+
+  &.smooth {
+    background: transparent;
+    border: 1px solid var(--s-75);
+    color: var(--s-800);
  }
 }

--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
@ -93,6 +93,7 @@ export default {
  max-height: var(--space-jumbo);
  border: 0px solid transparent;
  padding: 0;
+  color: var(--s-900);
 }

 ::v-deep {
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleItem.vue
@ -1,13 +1,13 @@
 <template>
-  <tr>
+  <tr class="row--article-block">
    <td>
-      <div class="row--article-block">
+      <div class="article-content-wrap">
        <div class="article-block">
-          <h6 class="sub-block-title text-truncate">
-            <router-link class="article-name" :to="articleUrl(id)">
+          <router-link :to="articleUrl(id)">
+            <h6 class="sub-block-title text-truncate">
              {{ title }}
-            </router-link>
-          </h6>
+            </h6>
+          </router-link>
          <div class="author">
            <span class="by">{{ $t('HELP_CENTER.TABLE.COLUMNS.BY') }}</span>
            <span class="name">{{ articleAuthorName }}</span>
@ -15,22 +15,35 @@
        </div>
      </div>
    </td>
-    <td>{{ category.name }}</td>
-    <td>{{ readCount }}</td>
    <td>
-      <Label :title="status" :color-scheme="labelColor" />
+      <span class="fs-small">{{ category.name }}</span>
+    </td>
+    <td>
+      <span class="fs-small">
+        {{ readCount }}
+      </span>
+    </td>
+    <td>
+      <div>
+        <woot-label
+          :title="status"
+          size="small"
+          variant="smooth"
+          :color-scheme="labelColor"
+        />
+      </div>
+    </td>
+    <td>
+      <span class="fs-small">
+        {{ lastUpdatedAt }}
+      </span>
    </td>
-    <td>{{ lastUpdatedAt }}</td>
  </tr>
 </template>
 <script>
-import Label from 'dashboard/components/ui/Label';
 import timeMixin from 'dashboard/mixins/time';
 import portalMixin from '../mixins/portalMixin';
 export default {
-  components: {
-    Label,
-  },
  mixins: [timeMixin, portalMixin],

  props: {
@ -95,25 +108,25 @@ td {
  padding-left: 0;
 }
 .row--article-block {
-  align-items: center;
-  display: flex;
-  text-align: left;
-
+  border-bottom-color: transparent;
+  .article-content-wrap {
+    align-items: center;
+    display: flex;
+    text-align: left;
+  }
  .article-block {
    min-width: 0;
  }

  .sub-block-title {
    margin-bottom: 0;
+    line-height: var(--space-medium);
+    height: var(--space-medium);
+    &:hover {
+      text-decoration: underline;
+    }
  }

-  .article-name {
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-default);
-    margin: 0;
-    text-transform: capitalize;
-    color: var(--s-900);
-  }
  .author {
    .by {
      font-weight: var(--font-weight-normal);
@ -123,7 +136,7 @@ td {
    .name {
      font-weight: var(--font-weight-medium);
      color: var(--s-600);
-      font-size: var(--font-size-mini);
+      font-size: var(--font-size-small);
    }
  }
 }
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Header/ArticleHeader.vue
@ -82,6 +82,7 @@
      <woot-button
        class-names="article--buttons"
        size="small"
+        icon="add"
        color-scheme="primary"
        @click="onClickNewArticlePage"
      >
@ -152,7 +153,8 @@ export default {
  align-items: center;
  justify-content: space-between;
  width: 100%;
-  height: var(--space-larger);
+  height: var(--space-jumbo);
+  padding-top: var(--space-small);
 }
 .header-left--wrap {
  display: flex;
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalPopover.vue
@ -5,15 +5,24 @@
        <h2 class="block-title">
          {{ $t('HELP_CENTER.PORTAL.POPOVER.TITLE') }}
        </h2>
-        <woot-button
-          variant="smooth"
-          color-scheme="secondary"
-          icon="settings"
-          size="small"
-          @click="openPortalPage"
-        >
-          {{ $t('HELP_CENTER.PORTAL.POPOVER.PORTAL_SETTINGS') }}
-        </woot-button>
+        <div>
+          <woot-button
+            variant="smooth"
+            color-scheme="secondary"
+            icon="settings"
+            size="small"
+            @click="openPortalPage"
+          >
+            {{ $t('HELP_CENTER.PORTAL.POPOVER.PORTAL_SETTINGS') }}
+          </woot-button>
+          <woot-button
+            variant="clear"
+            color-scheme="secondary"
+            icon="dismiss"
+            size="small"
+            @click="closePortalPopover"
+          />
+        </div>
      </div>
      <p class="subtitle">
        {{ $t('HELP_CENTER.PORTAL.POPOVER.SUBTITLE') }}
@ -22,7 +31,7 @@
    <div>
      <portal-switch
        v-for="portal in portals"
-        :key="portal.slug"
+        :key="portal.id"
        :portal="portal"
        :active="portal.slug === activePortalSlug"
        @open-portal-page="onPortalSelect"
@ -78,7 +87,7 @@ export default {
 <style lang="scss" scoped>
 .portal-popover__container {
  position: absolute;
-  overflow: scroll;
+  overflow-y: scroll;
  max-height: 96vh;
  padding: var(--space-normal);
  background-color: var(--white);
@ -92,7 +101,7 @@ export default {
      display: flex;
      align-items: center;
      justify-content: space-between;
-      margin-bottom: var(--space-smaller);
+      margin-bottom: var(--space-normal);

      .new-popover-link {
        display: flex;
@ -111,6 +120,7 @@ export default {
      .subtitle {
        font-size: var(--font-size-mini);
        color: var(--s-600);
+        margin-top: var(--space-small);
      }
    }
  }
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/PortalSwitch.vue
@ -4,7 +4,7 @@
    <div class="actions-container">
      <header>
        <div>
-          <h2 class="portal-title">{{ portal.name }}</h2>
+          <h3 class="text-block-title portal-title">{{ portal.name }}</h3>
          <p class="portal-count">
            {{ articlesCount }}
            {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }}
@ -15,32 +15,40 @@
        }}</span>
      </header>
      <div class="portal-locales">
-        <h2 class="locale-title">
+        <h5 class="locale-title">
          {{ $t('HELP_CENTER.PORTAL.CHOOSE_LOCALE_LABEL') }}
-        </h2>
+        </h5>
        <ul>
          <li v-for="locale in locales" :key="locale.code">
-            <label :for="`locale-${locale.code}`" class="locale-item">
-              <input
-                :id="`locale-${locale.code}`"
-                v-model="selectedLocale"
-                type="radio"
-                name="locale"
-                :value="locale.code"
-                :checked="isLocaleActive(locale.code)"
-                @click="() => onClick(locale.code, portal)"
-              />
-              <div>
-                <p>{{ localeName(locale.code) }}</p>
-                <span>
-                  {{ locale.articles_count }}
-                  {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }} -
-                  {{ locale.code }}
-                </span>
+            <woot-button
+              class="locale-item"
+              variant="clear"
+              size="large"
+              color-scheme="secondary"
+              @click="event => onClick(event, locale.code, portal)"
+            >
+              <div class="locale-content">
+                <input
+                  :id="`locale-${locale.code}`"
+                  v-model="selectedLocale"
+                  type="radio"
+                  name="locale"
+                  :value="locale.code"
+                  class="locale__radio"
+                  :checked="isLocaleActive(locale.code)"
+                />
+                <div>
+                  <p>{{ localeName(locale.code) }}</p>
+                  <span>
+                    {{ locale.articles_count }}
+                    {{ $t('HELP_CENTER.PORTAL.ARTICLES_LABEL') }} -
+                    {{ locale.code }}
+                  </span>
+                </div>
              </div>
-            </label>
+            </woot-button>
          </li>
-          <li>
+          <li class="add-locale-wrap">
            <a>+ {{ $t('HELP_CENTER.PORTAL.ADD_NEW_LOCALE') }}</a>
          </li>
        </ul>
@ -84,7 +92,8 @@ export default {
    this.selectedLocale = this.locale || this.portal?.meta?.default_locale;
  },
  methods: {
-    onClick(code, portal) {
+    onClick(event, code, portal) {
+      event.preventDefault();
      this.$router.push({
        name: 'list_all_locale_articles',
        params: {
@ -136,10 +145,8 @@ export default {
      }

      .portal-title {
-        color: var(--s-900);
-        font-size: var(--font-size-medium);
-        font-weight: var(--font-weight-bold);
        margin-bottom: 0;
+        color: var(--s-700);
      }

      .portal-count {
@ -156,39 +163,46 @@ export default {
        font-weight: var(--font-weight-medium);
      }

+      .locale-content {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        width: 100%;
+      }
+
      ul {
        list-style: none;
        padding: 0;
        margin: 0;
+      }

-        .locale-item {
-          display: flex;
-          align-items: flex-start;
-          margin-bottom: var(--space-smaller);
-          cursor: pointer;
-          padding: var(--space-smaller);
-          border-radius: var(--border-radius-normal);
+      .locale-item {
+        display: flex;
+        align-items: flex-start;
+        margin-bottom: var(--space-smaller);
+        padding: var(--space-smaller);
+        border-radius: var(--border-radius-normal);

-          &:hover {
-            background-color: var(--w-25);
-          }
-
-          p {
-            margin-bottom: 0;
-          }
-
-          span {
-            color: var(--s-500);
-            font-size: var(--font-size-small);
-          }
+        p {
+          margin-bottom: 0;
+          text-align: left;
        }
+
+        span {
+          color: var(--s-500);
+          font-size: var(--font-size-small);
+        }
+      }
+
+      .locale__radio {
+        width: var(--space-large);
+        margin-top: var(--space-tiny);
+      }
+
+      .add-locale-wrap {
+        margin-top: var(--spacing-small);
      }
    }
  }
 }
-label > [type='radio'] {
-  margin-bottom: 0;
-  margin-top: var(--space-smaller);
-  margin-right: var(--space-one);
-}
 </style>
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/Sidebar/SidebarHeader.vue
@ -2,13 +2,13 @@
  <div class="sidebar-header--wrap">
    <div class="header-left--side">
      <thumbnail
-        size="40px"
+        size="32px"
        :src="thumbnailSrc"
        :username="headerTitle"
        variant="square"
      />
      <div class="header-title--wrap">
-        <h4 class="sub-block-title title-view text-truncate">
+        <h4 class="text-block-title title-view text-truncate">
          {{ headerTitle }}
        </h4>
        <span class="sub-title--view">{{ subTitle }}</span>
@ -16,28 +16,19 @@
    </div>
    <div class="header-right--side">
      <woot-button
-        variant="link"
+        variant="clear"
        color-scheme="secondary"
+        size="small"
+        icon="arrow-up-right"
        @click="popoutHelpCenter"
-      >
-        <fluent-icon
-          icon="arrow-up-right"
-          size="28px"
-          class="pop-out--icon"
-          @click="popoutHelpCenter"
-        />
-      </woot-button>
+      />
      <woot-button
-        variant="link"
+        variant="clear"
+        size="small"
        color-scheme="secondary"
+        icon="arrow-swap"
        @click="openPortalPopover"
-      >
-        <fluent-icon
-          icon="arrow-swap"
-          size="28px"
-          class="portal-switch--icon"
-        />
-      </woot-button>
+      />
    </div>
  </div>
 </template>
@ -79,7 +70,9 @@ export default {
  height: var(--space-jumbo);
  align-items: center;
  justify-content: space-between;
-  padding: var(--space-small) 0 var(--space-normal) 0;
+  padding: var(--space-normal);
+  margin: var(--space-minus-small);
+  margin-bottom: var(--space-small);
  border-bottom: 1px solid var(--color-border-light);
 }

@ -93,11 +86,15 @@ export default {
 .title-view {
  width: var(--space-mega);
  margin-bottom: var(--space-zero);
+  height: var(--space-normal);
+  line-height: var(--space-normal);
 }

 .sub-title--view {
  font-size: var(--font-size-mini);
-  color: var(--b-600);
+  color: var(--s-600);
+  height: var(--space-normal);
+  line-height: var(--space-normal);
 }

 .header-left--side {
@ -107,21 +104,6 @@ export default {

 .header-right--side {
  display: flex;
-  align-items: center;
-}
-
-.pop-out--icon {
-  padding: var(--space-smaller);
-}
-
-.portal-switch--icon {
-  padding: var(--space-smaller);
-  margin-left: var(--space-small);
-
-  &:hover {
-    cursor: pointer;
-    background: var(--s-50);
-    border-radius: var(--border-radius-normal);
-  }
+  align-items: flex-end;
 }
 </style>
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/pages/articles/ListAllArticles.vue
@ -147,7 +147,7 @@ export default {

 <style lang="scss" scoped>
 .container {
-  padding: var(--space-small) var(--space-normal);
+  padding: 0 var(--space-normal);
  width: 100%;
  .articles--loader {
    align-items: center;