More stuff. Buttons in user card's corner now have MUCH bigger hitboxes

2020-10-20 22:13:19 +03:00 · 2020-10-20 22:13:19 +03:00 · b19c2eb0fb
parent 046c60cb61
commit b19c2eb0fb
32 changed files with 188 additions and 82 deletions
--- a/src/App.scss
+++ b/src/App.scss
@ -85,7 +85,7 @@ button {
  font-family: sans-serif;
  font-family: var(--interfaceFont, sans-serif);

-  i[class*=icon-] {
+  i[class*=icon-], .svg-inline--fa {
    color: $fallback--text;
    color: var(--btnText, $fallback--text);
  }
@ -389,7 +389,7 @@ i[class*=icon-], .svg-inline--fa  {
  box-sizing: border-box;

  button {
-    &, i[class*=icon-] {
+    &, i[class*=icon-], svg {
      color: $fallback--text;
      color: var(--btnTopBarText, $fallback--text);
    }
@ -463,7 +463,7 @@ i[class*=icon-], .svg-inline--fa  {
    flex-basis: 970px;
    height: 50px;

-    a, a i {
+    a, a i, a svg {
      color: $fallback--link;
      color: var(--topBarLink, $fallback--link);
    }
--- a/src/components/account_actions/account_actions.js
+++ b/src/components/account_actions/account_actions.js
@ -1,6 +1,14 @@
 import { mapState } from 'vuex'
 import ProgressButton from '../progress_button/progress_button.vue'
 import Popover from '../popover/popover.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faEllipsisV
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faEllipsisV
+)

 const AccountActions = {
  props: [
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@ -1,5 +1,5 @@
 <template>
-  <div class="account-actions">
+  <div class="AccountActions">
    <Popover
      trigger="click"
      placement="bottom"
@ -63,7 +63,7 @@
        slot="trigger"
        class="btn btn-default ellipsis-button"
      >
-        <i class="icon-ellipsis trigger-button" />
+        <FAIcon class="icon" icon="ellipsis-v" />
      </div>
    </Popover>
  </div>
@ -73,22 +73,22 @@

 <style lang="scss">
@import '../../_variables.scss';
-.account-actions {
-  margin: 0 .8em;
-}
-
-.account-actions button.dropdown-item {
+.AccountActions {
+  button.dropdown-item {
    margin-left: 0;
-}
+  }

-.account-actions .trigger-button {
+  .ellipsis-button {
+    cursor: pointer;
+    width: 2.5em;
+    margin: -0.5em 0;
+    padding: 0.5em 0;
+    text-align: center;
+
+    &:not(:hover) .icon {
      color: $fallback--lightText;
      color: var(--lightText, $fallback--lightText);
-  opacity: .8;
-  cursor: pointer;
-  &:hover {
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    }
  }
 }
 </style>
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@ -9,11 +9,13 @@ import { promiseInterval } from '../../services/promise_interval/promise_interva
 import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faChevronDown
+  faChevronDown,
+  faChevronLeft
 } from '@fortawesome/free-solid-svg-icons'

 library.add(
-  faChevronDown
+  faChevronDown,
+  faChevronLeft
 )

 const BOTTOMED_OUT_OFFSET = 10
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@ -58,12 +58,8 @@

  .go-back-button {
    cursor: pointer;
-    margin-right: 1.4em;
-
-    i {
-      display: flex;
-      align-items: center;
-    }
+    margin-right: 1.7em;
+    margin-left: 0.3em;
  }

  .jump-to-bottom-button {
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@ -14,7 +14,7 @@
            class="go-back-button"
            @click="goBack"
          >
-            <i class="button-icon icon-left-open" />
+            <FAIcon size="lg" icon="chevron-left" />
          </a>
          <div class="title text-center">
            <ChatTitle
--- a/src/components/chat_message/chat_message.js
+++ b/src/components/chat_message/chat_message.js
@ -9,11 +9,13 @@ import ChatMessageDate from '../chat_message_date/chat_message_date.vue'
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faTimes
+  faTimes,
+  faEllipsisH
 } from '@fortawesome/free-solid-svg-icons'

 library.add(
-  faTimes
+  faTimes,
+  faEllipsisH
 )

 const ChatMessage = {
--- a/src/components/chat_message/chat_message.scss
+++ b/src/components/chat_message/chat_message.scss
@ -24,7 +24,7 @@
    }
  }

-  .icon-ellipsis {
+  .menu-icon {
    cursor: pointer;

    &:hover, .extra-button-popover.open & {
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@ -62,9 +62,10 @@
                </div>
                <button
                  slot="trigger"
+                  class="menu-icon"
                  :title="$t('chats.more')"
                >
-                  <i class="icon-ellipsis" />
+                  <FAIcon icon="ellipsis-h" />
                </button>
              </Popover>
            </div>
--- a/src/components/chat_new/chat_new.js
+++ b/src/components/chat_new/chat_new.js
@ -1,6 +1,16 @@
 import { mapState, mapGetters } from 'vuex'
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faSearch,
+  faChevronLeft
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faSearch,
+  faChevronLeft
+)

 const chatNew = {
  components: {
--- a/src/components/chat_new/chat_new.scss
+++ b/src/components/chat_new/chat_new.scss
@ -8,9 +8,7 @@
    }
  }

-  .icon-search {
-    font-size: 1.5em;
-    float: right;
+  .search-icon {
    margin-right: 0.3em;
  }

@ -25,5 +23,7 @@

  .go-back-button {
    cursor: pointer;
+    margin-right: 1.7em;
+    margin-left: 0.3em;
  }
 }
--- a/src/components/chat_new/chat_new.vue
+++ b/src/components/chat_new/chat_new.vue
@ -11,12 +11,12 @@
        class="go-back-button"
        @click="goBack"
      >
-        <i class="button-icon icon-left-open" />
+        <FAIcon size="lg" icon="chevron-left" />
      </a>
    </div>
    <div class="input-wrap">
      <div class="input-search">
-        <i class="button-icon icon-search" />
+        <FAIcon size="lg" class="search-icon button-icon" icon="search" />
      </div>
      <input
        ref="search"
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@ -3,6 +3,16 @@ import VideoAttachment from '../video_attachment/video_attachment.vue'
 import Modal from '../modal/modal.vue'
 import fileTypeService from '../../services/file_type/file_type.service.js'
 import GestureService from '../../services/gesture_service/gesture_service'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faChevronLeft,
+  faChevronRight
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faChevronLeft,
+  faChevronRight
+)

 const MediaModal = {
  components: {
--- a/src/components/media_modal/media_modal.vue
+++ b/src/components/media_modal/media_modal.vue
@ -34,7 +34,7 @@
      class="modal-view-button-arrow modal-view-button-arrow--prev"
      @click.stop.prevent="goPrev"
    >
-      <i class="icon-left-open arrow-icon" />
+      <FAIcon class="arrow-icon" icon="chevron-left" />
    </button>
    <button
      v-if="canNavigate"
@ -42,7 +42,7 @@
      class="modal-view-button-arrow modal-view-button-arrow--next"
      @click.stop.prevent="goNext"
    >
-      <i class="icon-right-open arrow-icon" />
+      <FAIcon class="arrow-icon" icon="chevron-right" />
    </button>
  </Modal>
 </template>
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@ -5,11 +5,15 @@ import GestureService from '../../services/gesture_service/gesture_service'
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faTimes
+  faTimes,
+  faBell,
+  faBars
 } from '@fortawesome/free-solid-svg-icons'

 library.add(
-  faTimes
+  faTimes,
+  faBell,
+  faBars
 )

 const MobileNav = {
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@ -15,7 +15,7 @@
            class="mobile-nav-button"
            @click.stop.prevent="toggleMobileSidebar()"
          >
-            <i class="button-icon icon-menu" />
+            <FAIcon size="lg" class="button-icon" icon="bars" />
            <div
              v-if="unreadChatCount"
              class="alert-dot"
@ -37,7 +37,7 @@
            href="#"
            @click.stop.prevent="openMobileNotifications()"
          >
-            <i class="button-icon icon-bell-alt" />
+            <FAIcon size="lg" class="button-icon" icon="bell" />
            <div
              v-if="unseenNotificationsCount"
              class="alert-dot"
@ -59,7 +59,7 @@
          class="mobile-nav-button"
          @click.stop.prevent="closeMobileNotifications()"
        >
-          <FAIcon class="button-icon" icon="times" />
+          <FAIcon size="lg" class="button-icon" icon="times" />
        </a>
      </div>
      <div
@ -91,9 +91,8 @@
 }

 .mobile-nav-button {
-  display: flex;
-  justify-content: center;
-  width: 50px;
+  text-align: center;
+  margin: 0 1em;
  position: relative;
  cursor: pointer;
 }
--- a/src/components/mobile_post_status_button/mobile_post_status_button.js
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.js
@ -1,4 +1,12 @@
 import { debounce } from 'lodash'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faPen
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faPen
+)

 const HIDDEN_FOR_PAGES = new Set([
  'chats',
--- a/src/components/mobile_post_status_button/mobile_post_status_button.vue
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.vue
@ -5,7 +5,7 @@
      :class="{ 'hidden': isHidden }"
      @click="openPostForm"
    >
-      <i class="icon-edit" />
+      <FAIcon icon="pen" />
    </button>
  </div>
 </template>
@ -39,7 +39,7 @@
    transform: translateY(150%);
  }

-  i {
+  svg {
    font-size: 1.5em;
    color: $fallback--text;
    color: var(--text, $fallback--text);
--- a/src/components/search/search.js
+++ b/src/components/search/search.js
@ -3,10 +3,14 @@ import Conversation from '../conversation/conversation.vue'
 import Status from '../status/status.vue'
 import map from 'lodash/map'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+import {
+  faCircleNotch,
+  faSearch
+} from '@fortawesome/free-solid-svg-icons'

 library.add(
-  faCircleNotch
+  faCircleNotch,
+  faSearch
 )

 const Search = {
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@ -17,7 +17,7 @@
        class="btn search-button"
        @click="newQuery(searchTerm)"
      >
-        <i class="icon-search" />
+        <FAIcon icon="search" />
      </button>
    </div>
    <div
--- a/src/components/search_bar/search_bar.js
+++ b/src/components/search_bar/search_bar.js
@ -1,10 +1,12 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faTimes
+  faTimes,
+  faSearch
 } from '@fortawesome/free-solid-svg-icons'

 library.add(
-  faTimes
+  faTimes,
+  faSearch
 )

 const SearchBar = {
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@ -27,7 +27,7 @@
          class="btn search-button"
          @click="find(searchTerm)"
        >
-          <i class="icon-search" />
+          <FAIcon icon="search" />
        </button>
        <FAIcon
          class="button-icon" icon="times"
--- a/src/components/settings_modal/settings_modal_content.scss
+++ b/src/components/settings_modal/settings_modal_content.scss
@ -31,7 +31,7 @@
    }

    .unavailable,
-    .unavailable i {
+    .unavailable svg {
      color: var(--cRed, $fallback--cRed);
      color: $fallback--cRed;
    }
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@ -4,11 +4,13 @@ import InterfaceLanguageSwitcher from 'src/components/interface_language_switche
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faChevronDown
+  faChevronDown,
+  faGlobe
 } from '@fortawesome/free-solid-svg-icons'

 library.add(
-  faChevronDown
+  faChevronDown,
+  faGlobe
 )

 const GeneralTab = {
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@ -222,7 +222,7 @@
                v-if="!loopSilentAvailable"
                class="unavailable"
              >
-                <i class="icon-globe" />! {{ $t('settings.limited_availability') }}
+                <FAIcon icon="globe" />! {{ $t('settings.limited_availability') }}
              </div>
            </li>
          </ul>
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@ -10,11 +10,13 @@ import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
-  faTimes
+  faTimes,
+  faPlus
 } from '@fortawesome/free-solid-svg-icons'

 library.add(
-  faTimes
+  faTimes,
+  faPlus
 )

 const ProfileTab = {
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@ -139,7 +139,7 @@
          class="add-field faint"
          @click="addField"
        >
-          <i class="icon-plus" />
+          <FAIcon icon="plus" />
          {{ $t("settings.profile_fields.add_field") }}
        </a>
      </div>
--- a/src/components/side_drawer/side_drawer.js
+++ b/src/components/side_drawer/side_drawer.js
@ -2,6 +2,34 @@ import { mapState, mapGetters } from 'vuex'
 import UserCard from '../user_card/user_card.vue'
 import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
 import GestureService from '../../services/gesture_service/gesture_service'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faSignInAlt,
+  faSignOutAlt,
+  faHome,
+  faComments,
+  faBell,
+  faUserPlus,
+  faBullhorn,
+  faSearch,
+  faTachometerAlt,
+  faCog,
+  faInfoCircle
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faSignInAlt,
+  faSignOutAlt,
+  faHome,
+  faComments,
+  faBell,
+  faUserPlus,
+  faBullhorn,
+  faSearch,
+  faTachometerAlt,
+  faCog,
+  faInfoCircle
+)

 const SideDrawer = {
  props: [ 'logout' ],
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@ -36,7 +36,7 @@
          @click="toggleDrawer"
        >
          <router-link :to="{ name: 'login' }">
-            <i class="button-icon icon-login" /> {{ $t("login.login") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="sign-in-alt" /> {{ $t("login.login") }}
          </router-link>
        </li>
        <li
@ -44,7 +44,7 @@
          @click="toggleDrawer"
        >
          <router-link :to="{ name: timelinesRoute }">
-            <i class="button-icon icon-home-2" /> {{ $t("nav.timelines") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="home" /> {{ $t("nav.timelines") }}
          </router-link>
        </li>
        <li
@ -55,7 +55,7 @@
            :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
            style="position: relative"
          >
-            <i class="button-icon icon-chat" /> {{ $t("nav.chats") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="comments" /> {{ $t("nav.chats") }}
            <span
              v-if="unreadChatCount"
              class="badge badge-notification unread-chat-count"
@ -68,7 +68,7 @@
      <ul v-if="currentUser">
        <li @click="toggleDrawer">
          <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
-            <i class="button-icon icon-bell-alt" /> {{ $t("nav.interactions") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="bell" /> {{ $t("nav.interactions") }}
          </router-link>
        </li>
        <li
@ -76,7 +76,7 @@
          @click="toggleDrawer"
        >
          <router-link to="/friend-requests">
-            <i class="button-icon icon-user-plus" /> {{ $t("nav.friend_requests") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="user-plus" /> {{ $t("nav.friend_requests") }}
            <span
              v-if="followRequestCount > 0"
              class="badge follow-request-count"
@ -90,7 +90,7 @@
          @click="toggleDrawer"
        >
          <router-link :to="{ name: 'chat' }">
-            <i class="button-icon icon-megaphone" /> {{ $t("shoutbox.title") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="bullhorn" /> {{ $t("shoutbox.title") }}
          </router-link>
        </li>
      </ul>
@ -100,7 +100,7 @@
          @click="toggleDrawer"
        >
          <router-link :to="{ name: 'search' }">
-            <i class="button-icon icon-search" /> {{ $t("nav.search") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="search" /> {{ $t("nav.search") }}
          </router-link>
        </li>
        <li
@ -108,7 +108,7 @@
          @click="toggleDrawer"
        >
          <router-link :to="{ name: 'who-to-follow' }">
-            <i class="button-icon icon-user-plus" /> {{ $t("nav.who_to_follow") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="user-plus" /> {{ $t("nav.who_to_follow") }}
          </router-link>
        </li>
        <li @click="toggleDrawer">
@ -116,12 +116,12 @@
            href="#"
            @click="openSettingsModal"
          >
-            <i class="button-icon icon-cog" /> {{ $t("settings.settings") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="cog" /> {{ $t("settings.settings") }}
          </a>
        </li>
        <li @click="toggleDrawer">
          <router-link :to="{ name: 'about'}">
-            <i class="button-icon icon-info-circled" /> {{ $t("nav.about") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="info-circle" /> {{ $t("nav.about") }}
          </router-link>
        </li>
        <li
@ -132,7 +132,7 @@
            href="/pleroma/admin/#/login-pleroma"
            target="_blank"
          >
-            <i class="button-icon icon-gauge" /> {{ $t("nav.administration") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="tachometer-alt" /> {{ $t("nav.administration") }}
          </a>
        </li>
        <li
@ -143,7 +143,7 @@
            href="#"
            @click="doLogout"
          >
-            <i class="button-icon icon-logout" /> {{ $t("login.logout") }}
+            <FAIcon size="lg" fixed-width class="button-icon" icon="sign-out-alt" /> {{ $t("login.logout") }}
          </a>
        </li>
      </ul>
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@ -54,8 +54,9 @@
                v-if="isOtherUser && !user.is_local"
                :href="user.statusnet_profile_url"
                target="_blank"
+                class="external-link-button"
              >
-                <FAIcon class="usersettings" icon="external-link-alt" />
+                <FAIcon class="icon" icon="external-link-alt" />
              </a>
              <AccountActions
                v-if="isOtherUser && loggedIn"
@ -404,10 +405,17 @@
    }
  }

-  .usersettings {
+  .external-link-button {
+    cursor: pointer;
+    width: 2.5em;
+    text-align: center;
+    margin: -0.5em 0;
+    padding: 0.5em 0;
+
+    &:not(:hover) .icon {
      color: $fallback--lightText;
      color: var(--lightText, $fallback--lightText);
-    opacity: .8;
+    }
  }

  .user-summary {
--- a/src/hocs/with_load_more/with_load_more.js
+++ b/src/hocs/with_load_more/with_load_more.js
@ -3,6 +3,16 @@ import isEmpty from 'lodash/isEmpty'
 import { getComponentProps } from '../../services/component_utils/component_utils'
 import './with_load_more.scss'

+import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faCircleNotch
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
+
 const withLoadMore = ({
  fetch, // function to fetch entries and return a promise
  select, // function to select data from store
@ -82,7 +92,7 @@ const withLoadMore = ({
          </WrappedComponent>
          <div class="with-load-more-footer">
            {this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>}
-            {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>}
+            {!this.error && this.loading && <FAIcon spin icon="circle-notch"/>}
            {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>}
          </div>
        </div>
--- a/src/hocs/with_subscription/with_subscription.js
+++ b/src/hocs/with_subscription/with_subscription.js
@ -3,6 +3,16 @@ import isEmpty from 'lodash/isEmpty'
 import { getComponentProps } from '../../services/component_utils/component_utils'
 import './with_subscription.scss'

+import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faCircleNotch
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faCircleNotch
+)
+
 const withSubscription = ({
  fetch, // function to fetch entries and return a promise
  select, // function to select data from store
@ -72,7 +82,7 @@ const withSubscription = ({
          <div class="with-subscription-loading">
            {this.error
              ? <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a>
-              : <i class="icon-spin3 animate-spin"/>
+              : <FAIcon spin icon="circle-notch"/>
            }
          </div>
        )