chevrons-downs, settings

This commit is contained in:
Henry Jameson 2020-10-20 21:03:46 +03:00
parent 8b3a7ae8c0
commit e8650d3409
14 changed files with 97 additions and 20 deletions

View file

@ -7,6 +7,14 @@ import ChatTitle from '../chat_title/chat_title.vue'
import chatService from '../../services/chat_service/chat_service.js' import chatService from '../../services/chat_service/chat_service.js'
import { promiseInterval } from '../../services/promise_interval/promise_interval.js' import { promiseInterval } from '../../services/promise_interval/promise_interval.js'
import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js' import { getScrollPosition, getNewTopPosition, isBottomedOut, scrollableContainerHeight } from './chat_layout_utils.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faChevronDown
} from '@fortawesome/free-solid-svg-icons'
library.add(
faChevronDown
)
const BOTTOMED_OUT_OFFSET = 10 const BOTTOMED_OUT_OFFSET = 10
const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150 const JUMP_TO_BOTTOM_BUTTON_VISIBILITY_OFFSET = 150

View file

@ -58,14 +58,15 @@
:class="{ 'visible': jumpToBottomButtonVisible }" :class="{ 'visible': jumpToBottomButtonVisible }"
@click="scrollDown({ behavior: 'smooth' })" @click="scrollDown({ behavior: 'smooth' })"
> >
<i class="icon-down-open"> <span>
<FAIcon icon="chevron-down" />
<div <div
v-if="newMessageCount" v-if="newMessageCount"
class="badge badge-notification unread-chat-count unread-message-count" class="badge badge-notification unread-chat-count unread-message-count"
> >
{{ newMessageCount }} {{ newMessageCount }}
</div> </div>
</i> </span>
</div> </div>
<PostStatusForm <PostStatusForm
:disable-subject="true" :disable-subject="true"

View file

@ -8,13 +8,13 @@
class="rating" class="rating"
> >
<span v-if="contrast.aaa"> <span v-if="contrast.aaa">
<i class="icon-thumbs-up-alt" /> <FAIcon icon="thumbs-up" />
</span> </span>
<span v-if="!contrast.aaa && contrast.aa"> <span v-if="!contrast.aaa && contrast.aa">
<i class="icon-adjust" /> <FAIcon icon="adjust" />
</span> </span>
<span v-if="!contrast.aaa && !contrast.aa"> <span v-if="!contrast.aaa && !contrast.aa">
<i class="icon-attention" /> <FAIcon icon="exclamation-triangle" />
</span> </span>
</span> </span>
<span <span
@ -23,19 +23,32 @@
:title="hint_18pt" :title="hint_18pt"
> >
<span v-if="contrast.laaa"> <span v-if="contrast.laaa">
<i class="icon-thumbs-up-alt" /> <FAIcon icon="thumbs-up" />
</span> </span>
<span v-if="!contrast.laaa && contrast.laa"> <span v-if="!contrast.laaa && contrast.laa">
<i class="icon-adjust" /> <FAIcon icon="adjust" />
</span> </span>
<span v-if="!contrast.laaa && !contrast.laa"> <span v-if="!contrast.laaa && !contrast.laa">
<i class="icon-attention" /> <FAIcon icon="exclamation-triangle" />
</span> </span>
</span> </span>
</span> </span>
</template> </template>
<script> <script>
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faAdjust,
faExclamationTriangle,
faThumbsUp
} from '@fortawesome/free-solid-svg-icons'
library.add(
faAdjust,
faExclamationTriangle,
faThumbsUp
)
export default { export default {
props: { props: {
large: { large: {
@ -85,6 +98,7 @@ export default {
.rating { .rating {
display: inline-block; display: inline-block;
text-align: center; text-align: center;
margin-left: 0.5em;
} }
} }
</style> </style>

View file

@ -1,4 +1,12 @@
import { set } from 'vue' import { set } from 'vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faChevronDown
} from '@fortawesome/free-solid-svg-icons'
library.add(
faChevronDown
)
export default { export default {
props: [ props: [

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>
<i class="icon-down-open" /> <FAIcon class="icon-down-open" 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>
<i class="icon-down-open" /> <FAIcon class="icon-down-open" icon="chevron-down" />
</label> </label>
</div> </div>
</template> </template>
@ -28,6 +28,14 @@
import languagesObject from '../../i18n/messages' import languagesObject from '../../i18n/messages'
import ISO6391 from 'iso-639-1' import ISO6391 from 'iso-639-1'
import _ from 'lodash' import _ from 'lodash'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faChevronDown
} from '@fortawesome/free-solid-svg-icons'
library.add(
faChevronDown
)
export default { export default {
computed: { computed: {

View file

@ -2,6 +2,14 @@ import { filter, trim } from 'lodash'
import Checkbox from 'src/components/checkbox/checkbox.vue' import Checkbox from 'src/components/checkbox/checkbox.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js' import SharedComputedObject from '../helpers/shared_computed_object.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faChevronDown
} from '@fortawesome/free-solid-svg-icons'
library.add(
faChevronDown
)
const FilteringTab = { const FilteringTab = {
data () { data () {

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>
<i class="icon-down-open" /> <FAIcon class="icon-down-open" icon="chevron-down" />
</label> </label>
</div> </div>
<div> <div>

View file

@ -2,6 +2,14 @@ import Checkbox from 'src/components/checkbox/checkbox.vue'
import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue' import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
import SharedComputedObject from '../helpers/shared_computed_object.js' import SharedComputedObject from '../helpers/shared_computed_object.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faChevronDown
} from '@fortawesome/free-solid-svg-icons'
library.add(
faChevronDown
)
const GeneralTab = { const GeneralTab = {
data () { data () {

View file

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

View file

@ -35,6 +35,14 @@ import ExportImport from 'src/components/export_import/export_import.vue'
import Checkbox from 'src/components/checkbox/checkbox.vue' import Checkbox from 'src/components/checkbox/checkbox.vue'
import Preview from './preview.vue' import Preview from './preview.vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faChevronDown
} from '@fortawesome/free-solid-svg-icons'
library.add(
faChevronDown
)
// List of color values used in v1 // List of color values used in v1
const v1OnlyNames = [ const v1OnlyNames = [

View file

@ -80,7 +80,7 @@
{{ style[0] || style.name }} {{ style[0] || style.name }}
</option> </option>
</select> </select>
<i class="icon-down-open" /> <FAIcon class="icon-down-open" 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>
<i class="icon-down-open" /> <FAIcon class="icon-down-open" icon="chevron-down" />
</label> </label>
</div> </div>
<div class="override"> <div class="override">

View file

@ -2,6 +2,20 @@ import ColorInput from '../color_input/color_input.vue'
import OpacityInput from '../opacity_input/opacity_input.vue' import OpacityInput from '../opacity_input/opacity_input.vue'
import { getCssShadow } from '../../services/style_setter/style_setter.js' import { getCssShadow } from '../../services/style_setter/style_setter.js'
import { hex2rgb } from '../../services/color_convert/color_convert.js' import { hex2rgb } from '../../services/color_convert/color_convert.js'
import { library } from '@fortawesome/fontawesome-svg-core'
import {
faTimes,
faChevronDown,
faChevronUp,
faPlus
} from '@fortawesome/free-solid-svg-icons'
library.add(
faChevronDown,
faChevronUp,
faTimes,
faPlus
)
const toModel = (object = {}) => ({ const toModel = (object = {}) => ({
x: 0, x: 0,

View file

@ -78,35 +78,35 @@
{{ $t('settings.style.shadows.shadow_id', { value: index }) }} {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
</option> </option>
</select> </select>
<i class="icon-down-open" /> <FAIcon icon="chevron-down" class="icon-down-open" />
</label> </label>
<button <button
class="btn btn-default" class="btn btn-default"
:disabled="!ready || !present" :disabled="!ready || !present"
@click="del" @click="del"
> >
<i class="icon-cancel" /> <FAIcon fixed-width icon="times" />
</button> </button>
<button <button
class="btn btn-default" class="btn btn-default"
:disabled="!moveUpValid" :disabled="!moveUpValid"
@click="moveUp" @click="moveUp"
> >
<i class="icon-up-open" /> <FAIcon fixed-width icon="chevron-up" />
</button> </button>
<button <button
class="btn btn-default" class="btn btn-default"
:disabled="!moveDnValid" :disabled="!moveDnValid"
@click="moveDn" @click="moveDn"
> >
<i class="icon-down-open" /> <FAIcon fixed-width icon="chevron-down" />
</button> </button>
<button <button
class="btn btn-default" class="btn btn-default"
:disabled="usingFallback" :disabled="usingFallback"
@click="add" @click="add"
> >
<i class="icon-plus" /> <FAIcon fixed-width icon="plus" />
</button> </button>
</div> </div>
<div <div