sam/pleroma-fe
sam/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

more replacements + small renames

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/App.scss
View file

@ -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 {

26
src/App.vue
View file

@ -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>

2
src/components/font_control/font_control.vue
View file

@ -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"

2
src/components/interface_language_switcher/interface_language_switcher.vue
View file

@ -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>

4
src/components/poll/poll_form.vue
View file

@ -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>

2
src/components/post_status_form/post_status_form.vue
View file

@ -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

3
src/components/search_bar/search_bar.js
View file

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

41
src/components/search_bar/search_bar.vue
View file

@ -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);
}
}

23
src/components/settings_modal/settings_modal_content.js
View file

@ -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,

8
src/components/settings_modal/settings_modal_content.vue
View file

@ -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 />

2
src/components/settings_modal/tabs/filtering_tab.vue
View file

@ -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>

4
src/components/settings_modal/tabs/general_tab.vue
View file

@ -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>

28
src/components/settings_modal/tabs/theme_tab/preview.vue
View file

@ -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>

4
src/components/settings_modal/tabs/theme_tab/theme_tab.vue
View file

@ -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">

2
src/components/shadow_control/shadow_control.vue
View file

@ -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"

3
src/components/tab_switcher/tab_switcher.js
View file

@ -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>

3
src/components/tab_switcher/tab_switcher.scss
View file

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

2
src/components/user_card/user_card.vue
View file

@ -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>