diff options
18 files changed, 106 insertions, 59 deletions
diff --git a/src/App.scss b/src/App.scss index 126a3297..06915e16 100644 --- a/src/App.scss +++ b/src/App.scss @@ -188,7 +188,7 @@ input, textarea, .select, .input { opacity: 0.5; } - .icon-down-open { + .select-down-icon { position: absolute; top: 0; bottom: 0; @@ -368,7 +368,9 @@ i[class*=icon-], .svg-inline--fa { flex-wrap: wrap; .nav-icon { - margin-left: 0.4em; + margin-left: 0.2em; + width: 2em; + text-align: center; } &.right { diff --git a/src/App.vue b/src/App.vue index 0276c6a6..5efaf717 100644 --- a/src/App.vue +++ b/src/App.vue @@ -42,36 +42,42 @@ <div class="item right"> <search-bar v-if="currentUser || !privateMode" - class="nav-icon mobile-hidden" + class="mobile-hidden" @toggled="onSearchBarToggled" @click.stop.native /> <a href="#" - class="mobile-hidden" + class="mobile-hidden nav-icon" @click.stop="openSettingsModal" > - <i - class="button-icon icon-cog nav-icon" + <FAIcon + fixed-width + size="lg" + class="button-icon" icon="cog" :title="$t('nav.preferences')" /> </a> <a v-if="currentUser && currentUser.role === 'admin'" href="/pleroma/admin/#/login-pleroma" - class="mobile-hidden" + class="mobile-hidden nav-icon" target="_blank" - ><i - class="button-icon icon-gauge nav-icon" + ><FAIcon + fixed-width + size="lg" + class="button-icon" icon="tachometer-alt" :title="$t('nav.administration')" /></a> <a v-if="currentUser" href="#" - class="mobile-hidden" + class="mobile-hidden nav-icon" @click.prevent="logout" - ><i - class="button-icon icon-logout nav-icon" + ><FAIcon + fixed-width + size="lg" + class="button-icon" icon="sign-out-alt" :title="$t('login.logout')" /></a> </div> diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue index 40aed190..6070ab22 100644 --- a/src/components/font_control/font_control.vue +++ b/src/components/font_control/font_control.vue @@ -41,7 +41,7 @@ {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }} </option> </select> - <FAIcon class="icon-down-open" icon="chevron-down" /> + <FAIcon class="select-down-icon" icon="chevron-down" /> </label> <input v-if="isCustom" diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue index 2a3d4cbb..76bdcdfe 100644 --- a/src/components/interface_language_switcher/interface_language_switcher.vue +++ b/src/components/interface_language_switcher/interface_language_switcher.vue @@ -19,7 +19,7 @@ {{ languageNames[i] }} </option> </select> - <FAIcon class="icon-down-open" icon="chevron-down" /> + <FAIcon class="select-down-icon" icon="chevron-down" /> </label> </div> </template> diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue index 3a8a2f42..8c4ada89 100644 --- a/src/components/poll/poll_form.vue +++ b/src/components/poll/poll_form.vue @@ -56,7 +56,7 @@ <option value="single">{{ $t('polls.single_choice') }}</option> <option value="multiple">{{ $t('polls.multiple_choices') }}</option> </select> - <FAIcon class="icon-down-open" icon="chevron-down"/> + <FAIcon class="select-down-icon" icon="chevron-down"/> </label> </div> <div @@ -84,7 +84,7 @@ {{ $t(`time.${unit}_short`, ['']) }} </option> </select> - <FAIcon class="icon-down-open" icon="chevron-down"/> + <FAIcon class="select-down-icon" icon="chevron-down"/> </label> </div> </div> diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 7f7ac72f..817b2fa0 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -199,7 +199,7 @@ {{ $t(`post_status.content_type["${postFormat}"]`) }} </option> </select> - <FAIcon class="icon-down-open" icon="chevron-down"/> + <FAIcon class="select-down-icon" icon="chevron-down"/> </label> </div> <div diff --git a/src/components/search_bar/search_bar.js b/src/components/search_bar/search_bar.js index 7ae8b21b..551649c7 100644 --- a/src/components/search_bar/search_bar.js +++ b/src/components/search_bar/search_bar.js @@ -13,8 +13,7 @@ const SearchBar = { data: () => ({ searchTerm: undefined, hidden: true, - error: false, - loading: false + error: false }), watch: { '$route': function (route) { diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue index ecc0febf..fbbbbfe0 100644 --- a/src/components/search_bar/search_bar.vue +++ b/src/components/search_bar/search_bar.vue @@ -1,17 +1,17 @@ <template> <div> <div class="search-bar-container"> - <i - v-if="loading" - class="icon-spin4 finder-icon animate-spin-slow" - /> <a v-if="hidden" href="#" + class="nav-icon" :title="$t('nav.search')" - ><i - class="button-icon icon-search" - @click.prevent.stop="toggleHidden" + ><FAIcon + fixed-width + size="lg" + class="button-icon" + icon="search" + @click.prevent.stop="toggleHidden" /></a> <template v-else> <input @@ -27,12 +27,20 @@ class="btn search-button" @click="find(searchTerm)" > - <FAIcon icon="search" /> + <FAIcon + fixed-width + icon="search" + /> </button> - <FAIcon - class="button-icon" icon="times" - @click.prevent.stop="toggleHidden" - /> + <span> + <FAIcon + size="lg" + fixed-width + icon="times" + class="cancel-icon" + @click.prevent.stop="toggleHidden" + /> + </span> </template> </div> </div> @@ -60,13 +68,10 @@ max-width: calc(100% - 30px - 30px - 20px); } - .search-button { - margin-left: .5em; - margin-right: .5em; - } - - .icon-cancel { + .cancel-icon { cursor: pointer; + color: $fallback--text; + color: var(--btnTopBarText, $fallback--text); } } diff --git a/src/components/settings_modal/settings_modal_content.js b/src/components/settings_modal/settings_modal_content.js index ef1a5ffa..9dcf1b5a 100644 --- a/src/components/settings_modal/settings_modal_content.js +++ b/src/components/settings_modal/settings_modal_content.js @@ -10,6 +10,29 @@ import GeneralTab from './tabs/general_tab.vue' import VersionTab from './tabs/version_tab.vue' import ThemeTab from './tabs/theme_tab/theme_tab.vue' +import { library } from '@fortawesome/fontawesome-svg-core' +import { + faWrench, + faUser, + faFilter, + faPaintBrush, + faBell, + faDownload, + faEyeSlash, + faInfo +} from '@fortawesome/free-solid-svg-icons' + +library.add( + faWrench, + faUser, + faFilter, + faPaintBrush, + faBell, + faDownload, + faEyeSlash, + faInfo +) + const SettingsModalContent = { components: { TabSwitcher, diff --git a/src/components/settings_modal/settings_modal_content.vue b/src/components/settings_modal/settings_modal_content.vue index bc30a0ff..c9ed2a38 100644 --- a/src/components/settings_modal/settings_modal_content.vue +++ b/src/components/settings_modal/settings_modal_content.vue @@ -37,7 +37,7 @@ </div> <div :label="$t('settings.theme')" - icon="brush" + icon="paint-brush" data-tab-name="theme" > <ThemeTab /> @@ -45,7 +45,7 @@ <div v-if="isLoggedIn" :label="$t('settings.notifications')" - icon="bell-ringing-o" + icon="bell" data-tab-name="notifications" > <NotificationsTab /> @@ -62,14 +62,14 @@ v-if="isLoggedIn" :label="$t('settings.mutes_and_blocks')" :fullHeight="true" - icon="eye-off" + icon="eye-slash" data-tab-name="mutesAndBlocks" > <MutesAndBlocksTab /> </div> <div :label="$t('settings.version.title')" - icon="info-circled" + icon="info" data-tab-name="version" > <VersionTab /> diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue index 786f3618..ff1a129b 100644 --- a/src/components/settings_modal/tabs/filtering_tab.vue +++ b/src/components/settings_modal/tabs/filtering_tab.vue @@ -53,7 +53,7 @@ <option value="following">{{ $t('settings.reply_visibility_following') }}</option> <option value="self">{{ $t('settings.reply_visibility_self') }}</option> </select> - <FAIcon class="icon-down-open" icon="chevron-down" /> + <FAIcon class="select-down-icon" icon="chevron-down" /> </label> </div> <div> diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue index 2ab6b314..99d3a0dc 100644 --- a/src/components/settings_modal/tabs/general_tab.vue +++ b/src/components/settings_modal/tabs/general_tab.vue @@ -103,7 +103,7 @@ {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }} </option> </select> - <FAIcon class="icon-down-open" icon="chevron-down" /> + <FAIcon class="select-down-icon" icon="chevron-down" /> </label> </div> </li> @@ -127,7 +127,7 @@ {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }} </option> </select> - <FAIcon class="icon-down-open" icon="chevron-down" /> + <FAIcon class="select-down-icon" icon="chevron-down" /> </label> </div> </li> diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue index c8cb2665..65863c54 100644 --- a/src/components/settings_modal/tabs/theme_tab/preview.vue +++ b/src/components/settings_modal/tabs/theme_tab/preview.vue @@ -39,19 +39,23 @@ </i18n> <div class="icons"> - <i + <FAIcon + fixed-width style="color: var(--cBlue)" - class="button-icon icon-reply" + class="button-icon" icon="reply" /> - <i + <FAIcon + fixed-width style="color: var(--cGreen)" - class="button-icon icon-retweet" + class="button-icon" icon="retweet" /> - <i + <FAIcon + fixed-width style="color: var(--cOrange)" - class="button-icon icon-star" + class="button-icon" icon="star" /> - <i + <FAIcon + fixed-width style="color: var(--cRed)" class="button-icon" icon="times" /> @@ -106,11 +110,17 @@ <script> import { library } from '@fortawesome/fontawesome-svg-core' import { - faTimes + faTimes, + faStar, + faRetweet, + faReply } from '@fortawesome/free-solid-svg-icons' library.add( - faTimes + faTimes, + faStar, + faRetweet, + faReply ) </script> diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue index fb8b16ae..9cc1c392 100644 --- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue +++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue @@ -80,7 +80,7 @@ {{ style[0] || style.name }} </option> </select> - <FAIcon class="icon-down-open" icon="chevron-down" /> + <FAIcon class="select-down-icon" icon="chevron-down" /> </label> </div> </template> @@ -907,7 +907,7 @@ {{ $t('settings.style.shadows.components.' + shadow) }} </option> </select> - <FAIcon class="icon-down-open" icon="chevron-down" /> + <FAIcon class="select-down-icon" icon="chevron-down" /> </label> </div> <div class="override"> diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue index 1f63f3f2..32220ae8 100644 --- a/src/components/shadow_control/shadow_control.vue +++ b/src/components/shadow_control/shadow_control.vue @@ -78,7 +78,7 @@ {{ $t('settings.style.shadows.shadow_id', { value: index }) }} </option> </select> - <FAIcon icon="chevron-down" class="icon-down-open" /> + <FAIcon icon="chevron-down" class="select-down-icon" /> </label> <button class="btn btn-default" diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js index 9c1da354..6e6e8193 100644 --- a/src/components/tab_switcher/tab_switcher.js +++ b/src/components/tab_switcher/tab_switcher.js @@ -1,5 +1,6 @@ import Vue from 'vue' import { mapState } from 'vuex' +import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome' import './tab_switcher.scss' @@ -107,7 +108,7 @@ export default Vue.component('tab-switcher', { class={classesTab.join(' ')} type="button" > - {!slot.data.attrs.icon ? '' : (<i class={'tab-icon icon-' + slot.data.attrs.icon}/>)} + {!slot.data.attrs.icon ? '' : (<FAIcon class="tab-icon" size="2x" fixed-width icon={slot.data.attrs.icon}/>)} <span class="text"> {slot.data.attrs.label} </span> diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index d2ef4857..cd8fff6f 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -4,7 +4,8 @@ display: flex; .tab-icon { - font-size: 2em; + width: 100%; + margin: 0.2em 0; display: block; } diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 4f7df789..6c35c781 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -136,7 +136,7 @@ <option value="striped">Striped bg</option> <option value="side">Side stripe</option> </select> - <FAIcon class="icon-down-open" icon="chevron-down" /> + <FAIcon class="select-down-icon" icon="chevron-down" /> </label> </div> </div> |