more replacements + small renames

This commit is contained in:
Henry Jameson 2020-10-20 22:54:43 +03:00
parent b19c2eb0fb
commit 3cbaa00449
18 changed files with 106 additions and 59 deletions

View file

@ -188,7 +188,7 @@ input, textarea, .select, .input {
opacity: 0.5; opacity: 0.5;
} }
.icon-down-open { .select-down-icon {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
@ -368,7 +368,9 @@ i[class*=icon-], .svg-inline--fa {
flex-wrap: wrap; flex-wrap: wrap;
.nav-icon { .nav-icon {
margin-left: 0.4em; margin-left: 0.2em;
width: 2em;
text-align: center;
} }
&.right { &.right {

View file

@ -42,36 +42,42 @@
<div class="item right"> <div class="item right">
<search-bar <search-bar
v-if="currentUser || !privateMode" v-if="currentUser || !privateMode"
class="nav-icon mobile-hidden" class="mobile-hidden"
@toggled="onSearchBarToggled" @toggled="onSearchBarToggled"
@click.stop.native @click.stop.native
/> />
<a <a
href="#" href="#"
class="mobile-hidden" class="mobile-hidden nav-icon"
@click.stop="openSettingsModal" @click.stop="openSettingsModal"
> >
<i <FAIcon
class="button-icon icon-cog nav-icon" fixed-width
size="lg"
class="button-icon" icon="cog"
:title="$t('nav.preferences')" :title="$t('nav.preferences')"
/> />
</a> </a>
<a <a
v-if="currentUser && currentUser.role === 'admin'" v-if="currentUser && currentUser.role === 'admin'"
href="/pleroma/admin/#/login-pleroma" href="/pleroma/admin/#/login-pleroma"
class="mobile-hidden" class="mobile-hidden nav-icon"
target="_blank" target="_blank"
><i ><FAIcon
class="button-icon icon-gauge nav-icon" fixed-width
size="lg"
class="button-icon" icon="tachometer-alt"
:title="$t('nav.administration')" :title="$t('nav.administration')"
/></a> /></a>
<a <a
v-if="currentUser" v-if="currentUser"
href="#" href="#"
class="mobile-hidden" class="mobile-hidden nav-icon"
@click.prevent="logout" @click.prevent="logout"
><i ><FAIcon
class="button-icon icon-logout nav-icon" fixed-width
size="lg"
class="button-icon" icon="sign-out-alt"
:title="$t('login.logout')" :title="$t('login.logout')"
/></a> /></a>
</div> </div>

View file

@ -41,7 +41,7 @@
{{ option === 'custom' ? $t('settings.style.fonts.custom') : option }} {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
</option> </option>
</select> </select>
<FAIcon class="icon-down-open" icon="chevron-down" /> <FAIcon class="select-down-icon" icon="chevron-down" />
</label> </label>
<input <input
v-if="isCustom" v-if="isCustom"

View file

@ -19,7 +19,7 @@
{{ languageNames[i] }} {{ languageNames[i] }}
</option> </option>
</select> </select>
<FAIcon class="icon-down-open" icon="chevron-down" /> <FAIcon class="select-down-icon" icon="chevron-down" />
</label> </label>
</div> </div>
</template> </template>

View file

@ -56,7 +56,7 @@
<option value="single">{{ $t('polls.single_choice') }}</option> <option value="single">{{ $t('polls.single_choice') }}</option>
<option value="multiple">{{ $t('polls.multiple_choices') }}</option> <option value="multiple">{{ $t('polls.multiple_choices') }}</option>
</select> </select>
<FAIcon class="icon-down-open" icon="chevron-down"/> <FAIcon class="select-down-icon" icon="chevron-down"/>
</label> </label>
</div> </div>
<div <div
@ -84,7 +84,7 @@
{{ $t(`time.${unit}_short`, ['']) }} {{ $t(`time.${unit}_short`, ['']) }}
</option> </option>
</select> </select>
<FAIcon class="icon-down-open" icon="chevron-down"/> <FAIcon class="select-down-icon" icon="chevron-down"/>
</label> </label>
</div> </div>
</div> </div>

View file

@ -199,7 +199,7 @@
{{ $t(`post_status.content_type["${postFormat}"]`) }} {{ $t(`post_status.content_type["${postFormat}"]`) }}
</option> </option>
</select> </select>
<FAIcon class="icon-down-open" icon="chevron-down"/> <FAIcon class="select-down-icon" icon="chevron-down"/>
</label> </label>
</div> </div>
<div <div

View file

@ -13,8 +13,7 @@ const SearchBar = {
data: () => ({ data: () => ({
searchTerm: undefined, searchTerm: undefined,
hidden: true, hidden: true,
error: false, error: false
loading: false
}), }),
watch: { watch: {
'$route': function (route) { '$route': function (route) {

View file

@ -1,17 +1,17 @@
<template> <template>
<div> <div>
<div class="search-bar-container"> <div class="search-bar-container">
<i
v-if="loading"
class="icon-spin4 finder-icon animate-spin-slow"
/>
<a <a
v-if="hidden" v-if="hidden"
href="#" href="#"
class="nav-icon"
:title="$t('nav.search')" :title="$t('nav.search')"
><i ><FAIcon
class="button-icon icon-search" fixed-width
@click.prevent.stop="toggleHidden" size="lg"
class="button-icon"
icon="search"
@click.prevent.stop="toggleHidden"
/></a> /></a>
<template v-else> <template v-else>
<input <input
@ -27,12 +27,20 @@
class="btn search-button" class="btn search-button"
@click="find(searchTerm)" @click="find(searchTerm)"
> >
<FAIcon icon="search" /> <FAIcon
fixed-width
icon="search"
/>
</button> </button>
<FAIcon <span>
class="button-icon" icon="times" <FAIcon
@click.prevent.stop="toggleHidden" size="lg"
/> fixed-width
icon="times"
class="cancel-icon"
@click.prevent.stop="toggleHidden"
/>
</span>
</template> </template>
</div> </div>
</div> </div>
@ -60,13 +68,10 @@
max-width: calc(100% - 30px - 30px - 20px); max-width: calc(100% - 30px - 30px - 20px);
} }
.search-button { .cancel-icon {
margin-left: .5em;
margin-right: .5em;
}
.icon-cancel {
cursor: pointer; cursor: pointer;
color: $fallback--text;
color: var(--btnTopBarText, $fallback--text);
} }
} }

View file

@ -10,6 +10,29 @@ import GeneralTab from './tabs/general_tab.vue'
import VersionTab from './tabs/version_tab.vue' import VersionTab from './tabs/version_tab.vue'
import ThemeTab from './tabs/theme_tab/theme_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 = { const SettingsModalContent = {
components: { components: {
TabSwitcher, TabSwitcher,

View file

@ -37,7 +37,7 @@
</div> </div>
<div <div
:label="$t('settings.theme')" :label="$t('settings.theme')"
icon="brush" icon="paint-brush"
data-tab-name="theme" data-tab-name="theme"
> >
<ThemeTab /> <ThemeTab />
@ -45,7 +45,7 @@
<div <div
v-if="isLoggedIn" v-if="isLoggedIn"
:label="$t('settings.notifications')" :label="$t('settings.notifications')"
icon="bell-ringing-o" icon="bell"
data-tab-name="notifications" data-tab-name="notifications"
> >
<NotificationsTab /> <NotificationsTab />
@ -62,14 +62,14 @@
v-if="isLoggedIn" v-if="isLoggedIn"
:label="$t('settings.mutes_and_blocks')" :label="$t('settings.mutes_and_blocks')"
:fullHeight="true" :fullHeight="true"
icon="eye-off" icon="eye-slash"
data-tab-name="mutesAndBlocks" data-tab-name="mutesAndBlocks"
> >
<MutesAndBlocksTab /> <MutesAndBlocksTab />
</div> </div>
<div <div
:label="$t('settings.version.title')" :label="$t('settings.version.title')"
icon="info-circled" icon="info"
data-tab-name="version" data-tab-name="version"
> >
<VersionTab /> <VersionTab />

View file

@ -53,7 +53,7 @@
<option value="following">{{ $t('settings.reply_visibility_following') }}</option> <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
<option value="self">{{ $t('settings.reply_visibility_self') }}</option> <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
</select> </select>
<FAIcon class="icon-down-open" icon="chevron-down" /> <FAIcon class="select-down-icon" icon="chevron-down" />
</label> </label>
</div> </div>
<div> <div>

View file

@ -103,7 +103,7 @@
{{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }} {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
</option> </option>
</select> </select>
<FAIcon class="icon-down-open" icon="chevron-down" /> <FAIcon class="select-down-icon" icon="chevron-down" />
</label> </label>
</div> </div>
</li> </li>
@ -127,7 +127,7 @@
{{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }} {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
</option> </option>
</select> </select>
<FAIcon class="icon-down-open" icon="chevron-down" /> <FAIcon class="select-down-icon" icon="chevron-down" />
</label> </label>
</div> </div>
</li> </li>

View file

@ -39,19 +39,23 @@
</i18n> </i18n>
<div class="icons"> <div class="icons">
<i <FAIcon
fixed-width
style="color: var(--cBlue)" style="color: var(--cBlue)"
class="button-icon icon-reply" class="button-icon" icon="reply"
/> />
<i <FAIcon
fixed-width
style="color: var(--cGreen)" style="color: var(--cGreen)"
class="button-icon icon-retweet" class="button-icon" icon="retweet"
/> />
<i <FAIcon
fixed-width
style="color: var(--cOrange)" style="color: var(--cOrange)"
class="button-icon icon-star" class="button-icon" icon="star"
/> />
<i <FAIcon
fixed-width
style="color: var(--cRed)" style="color: var(--cRed)"
class="button-icon" icon="times" class="button-icon" icon="times"
/> />
@ -106,11 +110,17 @@
<script> <script>
import { library } from '@fortawesome/fontawesome-svg-core' import { library } from '@fortawesome/fontawesome-svg-core'
import { import {
faTimes faTimes,
faStar,
faRetweet,
faReply
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
library.add( library.add(
faTimes faTimes,
faStar,
faRetweet,
faReply
) )
</script> </script>

View file

@ -80,7 +80,7 @@
{{ style[0] || style.name }} {{ style[0] || style.name }}
</option> </option>
</select> </select>
<FAIcon class="icon-down-open" icon="chevron-down" /> <FAIcon class="select-down-icon" icon="chevron-down" />
</label> </label>
</div> </div>
</template> </template>
@ -907,7 +907,7 @@
{{ $t('settings.style.shadows.components.' + shadow) }} {{ $t('settings.style.shadows.components.' + shadow) }}
</option> </option>
</select> </select>
<FAIcon class="icon-down-open" icon="chevron-down" /> <FAIcon class="select-down-icon" icon="chevron-down" />
</label> </label>
</div> </div>
<div class="override"> <div class="override">

View file

@ -78,7 +78,7 @@
{{ $t('settings.style.shadows.shadow_id', { value: index }) }} {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
</option> </option>
</select> </select>
<FAIcon icon="chevron-down" class="icon-down-open" /> <FAIcon icon="chevron-down" class="select-down-icon" />
</label> </label>
<button <button
class="btn btn-default" class="btn btn-default"

View file

@ -1,5 +1,6 @@
import Vue from 'vue' import Vue from 'vue'
import { mapState } from 'vuex' import { mapState } from 'vuex'
import { FontAwesomeIcon as FAIcon } from '@fortawesome/vue-fontawesome'
import './tab_switcher.scss' import './tab_switcher.scss'
@ -107,7 +108,7 @@ export default Vue.component('tab-switcher', {
class={classesTab.join(' ')} class={classesTab.join(' ')}
type="button" 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"> <span class="text">
{slot.data.attrs.label} {slot.data.attrs.label}
</span> </span>

View file

@ -4,7 +4,8 @@
display: flex; display: flex;
.tab-icon { .tab-icon {
font-size: 2em; width: 100%;
margin: 0.2em 0;
display: block; display: block;
} }

View file

@ -136,7 +136,7 @@
<option value="striped">Striped bg</option> <option value="striped">Striped bg</option>
<option value="side">Side stripe</option> <option value="side">Side stripe</option>
</select> </select>
<FAIcon class="icon-down-open" icon="chevron-down" /> <FAIcon class="select-down-icon" icon="chevron-down" />
</label> </label>
</div> </div>
</div> </div>