replace ds-icon with base-icon

2025-12-12 23:35:58 +00:00 · 2019-11-19 12:26:07 +03:00 · 2019-11-19 12:26:07 +03:00 · 4e6572a042
commit 4e6572a042
parent 48398075c8
24 changed files with 78 additions and 44 deletions
--- a/webapp/assets/styles/main.scss
+++ b/webapp/assets/styles/main.scss
@ -160,7 +160,7 @@ hr {
    align-content: center;
    align-items: center;

-    .ds-icon {
+    .base-icon {
      padding-right: $space-xx-small;
    }
  }
--- a/webapp/components/Avatar/Avatar.spec.js
+++ b/webapp/components/Avatar/Avatar.spec.js
@ -25,7 +25,7 @@ describe('Avatar.vue', () => {
  it('renders an icon', () => {
    expect(
      Wrapper()
-        .find('.ds-icon')
+        .find('.base-icon')
        .exists(),
    ).toBe(true)
  })
--- a/webapp/components/AvatarMenu/AvatarMenu.vue
+++ b/webapp/components/AvatarMenu/AvatarMenu.vue
@ -12,7 +12,7 @@
        @click.prevent="toggleMenu"
      >
        <hc-avatar :user="user" />
-        <ds-icon size="xx-small" name="angle-down" />
+        <base-icon class="dropdown-arrow" name="angle-down" />
      </a>
    </template>
    <template #popover="{ closeMenu }">
@ -33,13 +33,13 @@
            :parents="item.parents"
            @click.native="closeMenu(false)"
          >
-            <ds-icon :name="item.route.icon" />
+            <base-icon :name="item.route.icon" />
            {{ item.route.name }}
          </ds-menu-item>
        </ds-menu>
        <hr />
        <nuxt-link class="logout-link" :to="{ name: 'logout' }">
-          <ds-icon name="sign-out" />
+          <base-icon name="sign-out" />
          {{ $t('login.logout') }}
        </nuxt-link>
      </div>
--- a/webapp/components/CategoriesSelect/CategoriesSelect.vue
+++ b/webapp/components/CategoriesSelect/CategoriesSelect.vue
@ -9,7 +9,7 @@
            :primary="isActive(category.id)"
            :disabled="isDisabled(category.id)"
          >
-            <ds-icon :name="category.icon" />
+            <base-icon :name="category.icon" />
            {{ $t(`contribution.category.name.${category.slug}`) }}
          </ds-button>
        </ds-flex-item>
--- a/webapp/components/Category/index.vue
+++ b/webapp/components/Category/index.vue
@ -1,6 +1,6 @@
 <template>
-  <ds-tag>
-    <ds-icon size="large" :name="icon" />
+  <ds-tag class="category-tag">
+    <base-icon :name="icon" />
    {{ name }}
  </ds-tag>
 </template>
@ -14,3 +14,15 @@ export default {
  },
 }
 </script>
+
+<style lang="scss">
+.category-tag {
+  display: inline-flex;
+  align-items: center;
+
+  > .base-icon {
+    margin-right: $space-xx-small;
+    font-size: $font-size-base;
+  }
+}
+</style>
--- a/webapp/components/Comment/Comment.vue
+++ b/webapp/components/Comment/Comment.vue
@ -3,7 +3,7 @@
    <ds-card>
      <ds-space margin-bottom="base" />
      <ds-text style="padding-left: 40px; font-weight: bold;" color="soft">
-        <ds-icon name="ban" />
+        <base-icon name="ban" />
        {{ this.$t('comment.content.unavailable-placeholder') }}
      </ds-text>
      <ds-space margin-bottom="base" />
--- a/webapp/components/CommentList/CommentList.vue
+++ b/webapp/components/CommentList/CommentList.vue
@ -2,7 +2,7 @@
  <div id="comments">
    <h3 style="margin-top: -10px;">
      <span>
-        <ds-icon name="comments" />
+        <base-icon name="comments" />
        <ds-tag
          v-if="post.comments.length"
          style="margin-top: -4px; margin-left: -12px; position: absolute;"
--- a/webapp/components/ContentMenu.vue
+++ b/webapp/components/ContentMenu.vue
@ -3,7 +3,7 @@
    <template slot="default" slot-scope="{ toggleMenu }">
      <slot name="button" :toggleMenu="toggleMenu">
        <ds-button class="content-menu-trigger" size="small" ghost @click.prevent="toggleMenu">
-          <ds-icon name="ellipsis-v" />
+          <base-icon name="ellipsis-v" />
        </ds-button>
      </slot>
    </template>
@ -16,7 +16,7 @@
          :parents="item.parents"
          @click.stop.prevent="openItem(item.route, toggleMenu)"
        >
-          <ds-icon :name="item.route.icon" />
+          <base-icon :name="item.route.icon" />
          {{ item.route.name }}
        </ds-menu-item>
      </ds-menu>
--- a/webapp/components/DeleteData/DeleteData.vue
+++ b/webapp/components/DeleteData/DeleteData.vue
@ -5,7 +5,7 @@
      <ds-container>
        <ds-flex>
          <ds-flex-item :width="{ base: '22%', sm: '12%', md: '12%', lg: '8%' }">
-            <ds-icon name="warning" size="xxx-large" class="delete-warning-icon" />
+            <base-icon name="warning" class="delete-warning-icon" />
          </ds-flex-item>
          <ds-flex-item :width="{ base: '78%', sm: '88%', md: '88%', lg: '92%' }">
            <ds-heading>{{ $t('settings.deleteUserAccount.name') }}</ds-heading>
@ -134,6 +134,7 @@ export default {
 <style lang="scss">
 .delete-warning-icon {
  color: $color-danger;
+  font-size: $font-size-xxx-large;
 }

 .checkbox-container {
--- a/webapp/components/DropdownFilter/DropdownFilter.vue
+++ b/webapp/components/DropdownFilter/DropdownFilter.vue
@ -9,9 +9,9 @@
      href="#"
      @click.prevent="toggleMenu()"
    >
-      <ds-icon style="margin-right: 2px;" name="filter" />
-      <label for="dropdown">{{ selected }}</label>
-      <ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
+      <base-icon name="filter" />
+      <label class="label" for="dropdown">{{ selected }}</label>
+      <base-icon class="dropdown-arrow" name="angle-down" />
    </a>
    <ds-menu
      slot="popover"
@ -59,7 +59,16 @@ export default {
  height: 100%;
  padding: $space-xx-small;
  color: $text-color-soft;
+
+  > .label {
+    margin: 0 $space-xx-small;
+  }
 }
+
+.dropdown-arrow {
+  font-size: $font-size-xx-small;
+}
+
 .dropdown-menu {
  user-select: none;
  display: flex;
--- a/webapp/components/FilterPosts/FilterPosts.vue
+++ b/webapp/components/FilterPosts/FilterPosts.vue
@ -8,7 +8,7 @@
      slot-scope="{ toggleMenu }"
      @click.prevent="toggleMenu()"
    >
-      <ds-icon size="xx-small" name="angle-down" />
+      <base-icon class="dropdown-arrow" name="angle-down" />
    </ds-button>
    <template slot="popover">
      <ds-container>
--- a/webapp/components/LocaleSwitch/LocaleSwitch.vue
+++ b/webapp/components/LocaleSwitch/LocaleSwitch.vue
@ -7,9 +7,9 @@
      href="#"
      @click.prevent="toggleMenu()"
    >
-      <ds-icon style="margin-right: 2px;" name="globe" />
-      {{ current.code.toUpperCase() }}
-      <ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
+      <base-icon name="globe" />
+      <span class="label">{{ current.code.toUpperCase() }}</span>
+      <base-icon class="dropdown-arrow" name="angle-down" />
    </a>
    <ds-menu
      slot="popover"
@ -124,6 +124,10 @@ export default {
  height: 100%;
  padding: $space-xx-small;
  color: $text-color-soft;
+
+  > .label {
+    margin: 0 $space-xx-small;
+  }
 }

 nav.locale-menu-popover {
--- a/webapp/components/NotificationsTable/NotificationsTable.vue
+++ b/webapp/components/NotificationsTable/NotificationsTable.vue
@ -1,12 +1,12 @@
 <template>
  <ds-table v-if="notifications && notifications.length" :data="notifications" :fields="fields">
    <template #icon="scope">
-      <ds-icon
+      <base-icon
        v-if="scope.row.from.post"
        name="comment"
        v-tooltip="{ content: $t('notifications.comment'), placement: 'right' }"
      />
-      <ds-icon
+      <base-icon
        v-else
        name="bookmark"
        v-tooltip="{ content: $t('notifications.post'), placement: 'right' }"
--- a/webapp/components/PostCard/PostCard.vue
+++ b/webapp/components/PostCard/PostCard.vue
@ -47,13 +47,13 @@
        <div style="display: inline-block; float: right">
          <!-- Shouts Count -->
          <span :style="{ opacity: post.shoutedCount ? 1 : 0.5 }">
-            <ds-icon name="bullhorn" />
+            <base-icon name="bullhorn" />
            <small>{{ post.shoutedCount }}</small>
          </span>
          &nbsp;
          <!-- Comments Count -->
          <span :style="{ opacity: post.commentsCount ? 1 : 0.5 }">
-            <ds-icon name="comments" />
+            <base-icon name="comments" />
            <small>{{ post.commentsCount }}</small>
          </span>
          <!-- Menu -->
--- a/webapp/components/SearchInput.vue
+++ b/webapp/components/SearchInput.vue
@ -47,11 +47,11 @@
                    <ds-text size="small" color="softer" class="search-meta">
                      <span style="text-align: right;">
                        <b>{{ option.commentsCount }}</b>
-                        <ds-icon name="comments" />
+                        <base-icon name="comments" />
                      </span>
                      <span style="width: 36px; display: inline-block; text-align: right;">
                        <b>{{ option.shoutedCount }}</b>
-                        <ds-icon name="bullhorn" />
+                        <base-icon name="bullhorn" />
                      </span>
                    </ds-text>
                  </ds-flex-item>
@ -239,7 +239,7 @@ export default {
    white-space: nowrap;
    word-wrap: none;

-    .ds-icon {
+    .base-icon {
      vertical-align: sub;
    }
  }
--- a/webapp/components/TeaserImage/TeaserImage.vue
+++ b/webapp/components/TeaserImage/TeaserImage.vue
@ -27,7 +27,7 @@
          'hc-drag-marker-update-post': contribution,
        }"
      >
-        <ds-icon name="image" size="xxx-large" />
+        <base-icon name="image" />
      </div>
    </div>
  </vue-dropzone>
--- a/webapp/components/Upload/index.vue
+++ b/webapp/components/Upload/index.vue
@ -12,7 +12,7 @@
        <slot></slot>
        <div class="hc-attachments-upload-area">
          <div class="hc-drag-marker">
-            <ds-icon v-if="hover" name="image" size="xxx-large" />
+            <base-icon v-if="hover" name="image" />
          </div>
        </div>
      </div>
--- a/webapp/components/User/User.vue
+++ b/webapp/components/User/User.vue
@ -11,10 +11,10 @@
        <div @mouseover="openMenu(true)" @mouseleave="closeMenu(true)">
          <hc-avatar class="avatar" :user="user" />
          <div>
-            <ds-text>
+            <ds-text class="userinfo">
              <b class="username">{{ userName | truncate(18) }}</b>
              <ds-text v-if="dateTime" size="small" color="soft">
-                <ds-icon name="clock" />
+                <base-icon name="clock" />
                <client-only>
                  <hc-relative-date-time :date-time="dateTime" />
                </client-only>
@ -39,7 +39,7 @@
          style="margin-top: 5px"
          bold
        >
-          <ds-icon name="map-marker" />
+          <base-icon name="map-marker" />
          {{ user.location.name }}
        </ds-text>
        <ds-flex style="margin-top: -10px">
@ -156,6 +156,17 @@ export default {
  vertical-align: middle;
 }

+.userinfo {
+  display: flex;
+  align-items: center;
+
+  > .ds-text {
+    display: flex;
+    align-items: center;
+    margin-left: $space-xx-small;
+  }
+}
+
 .user {
  white-space: nowrap;
  position: relative;
--- a/webapp/components/_new/generic/BaseIcon.vue
+++ b/webapp/components/_new/generic/BaseIcon.vue
@ -39,7 +39,7 @@ export default {
  display: inline-flex;

  > .svg {
-    height: 1em;
+    height: 1.2em;
    fill: currentColor;
  }
 }
--- a/webapp/pages/admin/categories.vue
+++ b/webapp/pages/admin/categories.vue
@ -2,7 +2,7 @@
  <ds-card :header="$t('admin.categories.name')">
    <ds-table :data="Category" :fields="fields" condensed>
      <template slot="icon" slot-scope="scope">
-        <ds-icon :name="scope.row.icon" />
+        <base-icon :name="scope.row.icon" />
      </template>
    </ds-table>
  </ds-card>
--- a/webapp/pages/moderation/index.vue
+++ b/webapp/pages/moderation/index.vue
@ -5,17 +5,17 @@
      <!-- Icon -->
      <template slot="type" slot-scope="scope">
        <ds-text color="soft">
-          <ds-icon
+          <base-icon
            v-if="scope.row.type === 'Post'"
            v-tooltip="{ content: $t('report.contribution.type'), placement: 'right' }"
            name="bookmark"
          />
-          <ds-icon
+          <base-icon
            v-else-if="scope.row.type === 'Comment'"
            v-tooltip="{ content: $t('report.comment.type'), placement: 'right' }"
            name="comments"
          />
-          <ds-icon
+          <base-icon
            v-else-if="scope.row.type === 'User'"
            v-tooltip="{ content: $t('report.user.type'), placement: 'right' }"
            name="user"
--- a/webapp/pages/post/_id/_slug/more-info.vue
+++ b/webapp/pages/post/_id/_slug/more-info.vue
@ -3,10 +3,7 @@
    <h2 style="margin-bottom: .2em;">{{ $t('post.moreInfo.title') }}</h2>
    <p>{{ $t('post.moreInfo.description') }}</p>
    <ds-space />
-    <h3>
-      <!-- <ds-icon name="compass" /> -->
-      {{ $t('post.moreInfo.titleOfCategoriesSection') }}
-    </h3>
+    <h3>{{ $t('post.moreInfo.titleOfCategoriesSection') }}</h3>
    <hc-category
      v-for="category in post.categories"
      :key="category.id"
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@ -34,7 +34,7 @@
              {{ userSlug }}
            </ds-text>
            <ds-text v-if="user.location" align="center" color="soft" size="small">
-              <ds-icon name="map-marker" />
+              <base-icon name="map-marker" />
              {{ user.location.name }}
            </ds-text>
            <ds-text align="center" color="soft" size="small">
--- a/webapp/pages/settings/my-social-media.vue
+++ b/webapp/pages/settings/my-social-media.vue
@ -25,7 +25,7 @@
              </a>
              <span class="divider">|</span>
              <a name="edit" @click="handleEditSocialMedia(link)">
-                <ds-icon
+                <base-icon
                  :aria-label="$t('actions.edit')"
                  class="icon-button"
                  name="edit"
@ -33,7 +33,7 @@
                />
              </a>
              <a name="delete" @click="handleDeleteSocialMedia(link)">
-                <ds-icon
+                <base-icon
                  :aria-label="$t('actions.delete')"
                  class="icon-button"
                  name="trash"