Merge remote-tracking branch 'origin/develop' into checkbox-goes-brrr
This commit is contained in:
Henry Jameson
commit
0631acb8ad
381 changed files with 22997 additions and 5736 deletions
|
|
@ -11,14 +11,14 @@
|
|||
<template v-if="relationship.following">
|
||||
<button
|
||||
v-if="relationship.showing_reblogs"
|
||||
class="btn button-default dropdown-item"
|
||||
class="dropdown-item menu-item"
|
||||
@click="hideRepeats"
|
||||
>
|
||||
{{ $t('user_card.hide_repeats') }}
|
||||
</button>
|
||||
<button
|
||||
v-if="!relationship.showing_reblogs"
|
||||
class="btn button-default dropdown-item"
|
||||
class="dropdown-item menu-item"
|
||||
@click="showRepeats"
|
||||
>
|
||||
{{ $t('user_card.show_repeats') }}
|
||||
|
|
@ -31,34 +31,34 @@
|
|||
<UserListMenu :user="user" />
|
||||
<button
|
||||
v-if="relationship.followed_by"
|
||||
class="btn button-default btn-block dropdown-item"
|
||||
class="dropdown-item menu-item"
|
||||
@click="removeUserFromFollowers"
|
||||
>
|
||||
{{ $t('user_card.remove_follower') }}
|
||||
</button>
|
||||
<button
|
||||
v-if="relationship.blocking"
|
||||
class="btn button-default btn-block dropdown-item"
|
||||
class="dropdown-item menu-item"
|
||||
@click="unblockUser"
|
||||
>
|
||||
{{ $t('user_card.unblock') }}
|
||||
</button>
|
||||
<button
|
||||
v-else
|
||||
class="btn button-default btn-block dropdown-item"
|
||||
class="dropdown-item menu-item"
|
||||
@click="blockUser"
|
||||
>
|
||||
{{ $t('user_card.block') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn button-default btn-block dropdown-item"
|
||||
class="dropdown-item menu-item"
|
||||
@click="reportUser"
|
||||
>
|
||||
{{ $t('user_card.report') }}
|
||||
</button>
|
||||
<button
|
||||
v-if="pleromaChatMessagesAvailable"
|
||||
class="btn button-default btn-block dropdown-item"
|
||||
class="dropdown-item menu-item"
|
||||
@click="openChat"
|
||||
>
|
||||
{{ $t('user_card.message') }}
|
||||
|
|
@ -122,19 +122,12 @@
|
|||
<script src="./account_actions.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.AccountActions {
|
||||
.ellipsis-button {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
53
src/components/alert.style.js
Normal file
53
src/components/alert.style.js
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
export default {
|
||||
name: 'Alert',
|
||||
selector: '.alert',
|
||||
validInnerComponents: [
|
||||
'Text',
|
||||
'Icon',
|
||||
'Link',
|
||||
'Border',
|
||||
'ButtonUnstyled'
|
||||
],
|
||||
variants: {
|
||||
normal: '.neutral',
|
||||
error: '.error',
|
||||
warning: '.warning',
|
||||
success: '.success'
|
||||
},
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
background: '--text',
|
||||
opacity: 0.5,
|
||||
blur: '9px'
|
||||
}
|
||||
},
|
||||
{
|
||||
parent: {
|
||||
component: 'Alert'
|
||||
},
|
||||
component: 'Border',
|
||||
directives: {
|
||||
textColor: '--parent'
|
||||
}
|
||||
},
|
||||
{
|
||||
variant: 'error',
|
||||
directives: {
|
||||
background: '--cRed'
|
||||
}
|
||||
},
|
||||
{
|
||||
variant: 'warning',
|
||||
directives: {
|
||||
background: '--cOrange'
|
||||
}
|
||||
},
|
||||
{
|
||||
variant: 'success',
|
||||
directives: {
|
||||
background: '--cGreen'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -99,16 +99,14 @@
|
|||
<script src="./announcement.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.announcement {
|
||||
border-bottom: 1px solid var(--border, $fallback--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
padding: var(--status-margin, $status-margin);
|
||||
padding: var(--status-margin);
|
||||
|
||||
.heading,
|
||||
.body {
|
||||
margin-bottom: var(--status-margin, $status-margin);
|
||||
margin-bottom: var(--status-margin);
|
||||
}
|
||||
|
||||
.footer {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<textarea
|
||||
ref="textarea"
|
||||
v-model="announcement.content"
|
||||
class="post-textarea"
|
||||
class="input post-textarea"
|
||||
rows="1"
|
||||
cols="1"
|
||||
:placeholder="$t('announcements.post_placeholder')"
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
<input
|
||||
id="announcement-start-time"
|
||||
v-model="announcement.startsAt"
|
||||
class="input"
|
||||
:type="announcement.allDay ? 'date' : 'datetime-local'"
|
||||
:disabled="disabled"
|
||||
>
|
||||
|
|
@ -23,6 +24,7 @@
|
|||
<input
|
||||
id="announcement-end-time"
|
||||
v-model="announcement.endsAt"
|
||||
class="input"
|
||||
:type="announcement.allDay ? 'date' : 'datetime-local'"
|
||||
:disabled="disabled"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -61,15 +61,13 @@
|
|||
<script src="./announcements_page.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.announcements-page {
|
||||
.post-form {
|
||||
padding: var(--status-margin, $status-margin);
|
||||
padding: var(--status-margin);
|
||||
|
||||
.heading,
|
||||
.body {
|
||||
margin-bottom: var(--status-margin, $status-margin);
|
||||
margin-bottom: var(--status-margin);
|
||||
}
|
||||
|
||||
.post-button {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import "../../variables";
|
||||
|
||||
.Attachment {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -9,10 +7,8 @@
|
|||
height: 100%;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: $fallback--attachmentRadius;
|
||||
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
|
||||
border-color: $fallback--border;
|
||||
border-color: var(--border, $fallback--border);
|
||||
border-radius: var(--roundness);
|
||||
border-color: var(--border);
|
||||
|
||||
.attachment-wrapper {
|
||||
flex: 1 1 auto;
|
||||
|
|
@ -84,6 +80,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
.video-container {
|
||||
border: none;
|
||||
outline: none;
|
||||
color: inherit;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.audio-container {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
|
@ -126,23 +129,12 @@
|
|||
|
||||
.attachment-button {
|
||||
padding: 0;
|
||||
border-radius: $fallback--tooltipRadius;
|
||||
border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
|
||||
border-radius: var(--roundness);
|
||||
text-align: center;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
margin-left: 0.5em;
|
||||
font-size: 1.25em;
|
||||
// TODO: theming? hard to theme with unknown background image color
|
||||
background: rgb(230 230 230 / 70%);
|
||||
|
||||
.svg-inline--fa {
|
||||
color: rgb(0 0 0 / 60%);
|
||||
}
|
||||
|
||||
&:hover .svg-inline--fa {
|
||||
color: rgb(0 0 0 / 90%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -217,8 +209,7 @@
|
|||
|
||||
&.-placeholder {
|
||||
display: inline-block;
|
||||
color: $fallback--link;
|
||||
color: var(--postLink, $fallback--link);
|
||||
color: var(--link);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
height: auto;
|
||||
|
|
|
|||
24
src/components/attachment/attachment.style.js
Normal file
24
src/components/attachment/attachment.style.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
export default {
|
||||
name: 'Attachment',
|
||||
selector: '.Attachment',
|
||||
validInnerComponents: [
|
||||
'Border',
|
||||
'ButtonUnstyled',
|
||||
'Input'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
roundness: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'ButtonUnstyled',
|
||||
parent: { component: 'Attachment' },
|
||||
directives: {
|
||||
background: '#FFFFFF',
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
v-if="edit"
|
||||
v-model="localDescription"
|
||||
type="text"
|
||||
class="description-field"
|
||||
class="input description-field"
|
||||
:placeholder="$t('post_status.media_description')"
|
||||
@keydown.enter.prevent=""
|
||||
>
|
||||
|
|
@ -175,7 +175,6 @@
|
|||
:is="videoTag"
|
||||
v-if="type === 'video' && !hidden"
|
||||
class="video-container"
|
||||
:class="{ 'button-unstyled': 'isModal' }"
|
||||
:href="attachment.url"
|
||||
@click.stop.prevent="openModal"
|
||||
>
|
||||
|
|
@ -253,7 +252,7 @@
|
|||
v-if="edit"
|
||||
v-model="localDescription"
|
||||
type="text"
|
||||
class="description-field"
|
||||
class="input description-field"
|
||||
:placeholder="$t('post_status.media_description')"
|
||||
@keydown.enter.prevent=""
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
<!-- FIXME THIS NEEDS TO BE REFACTORED TO USE POPOVER -->
|
||||
<template>
|
||||
<div
|
||||
v-click-outside="onClickOutside"
|
||||
|
|
@ -6,12 +7,12 @@
|
|||
<input
|
||||
v-model="term"
|
||||
:placeholder="placeholder"
|
||||
class="autosuggest-input"
|
||||
class="input autosuggest-input"
|
||||
@click="onInputClick"
|
||||
>
|
||||
<div
|
||||
v-if="resultsVisible && filtered.length > 0"
|
||||
class="autosuggest-results"
|
||||
class="panel autosuggest-results"
|
||||
>
|
||||
<slot
|
||||
v-for="item in filtered"
|
||||
|
|
@ -24,8 +25,6 @@
|
|||
<script src="./autosuggest.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.autosuggest {
|
||||
position: relative;
|
||||
|
||||
|
|
@ -40,18 +39,15 @@
|
|||
top: 100%;
|
||||
right: 0;
|
||||
max-height: 400px;
|
||||
background-color: $fallback--bg;
|
||||
background-color: var(--bg, $fallback--bg);
|
||||
background-color: var(--bg);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: $fallback--border;
|
||||
border-color: var(--border, $fallback--border);
|
||||
border-radius: $fallback--inputRadius;
|
||||
border-radius: var(--inputRadius, $fallback--inputRadius);
|
||||
border-color: var(--border);
|
||||
border-radius: var(--roundness);
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
|
||||
box-shadow: var(--panelShadow);
|
||||
box-shadow: var(--shadow);
|
||||
overflow-y: auto;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,8 +17,6 @@
|
|||
<script src="./avatar_list.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.avatars {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
|
|
@ -36,8 +34,7 @@
|
|||
}
|
||||
|
||||
.avatar-small {
|
||||
border-radius: $fallback--avatarAltRadius;
|
||||
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
|
||||
border-radius: var(--roundness);
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
}
|
||||
|
|
|
|||
30
src/components/badge.style.js
Normal file
30
src/components/badge.style.js
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
export default {
|
||||
name: 'Badge',
|
||||
selector: '.badge',
|
||||
validInnerComponents: [
|
||||
'Text',
|
||||
'Icon'
|
||||
],
|
||||
variants: {
|
||||
notification: '.-notification'
|
||||
},
|
||||
defaultRules: [
|
||||
{
|
||||
component: 'Root',
|
||||
directives: {
|
||||
'--badgeNotification': 'color | --cRed'
|
||||
}
|
||||
},
|
||||
{
|
||||
directives: {
|
||||
background: '--cGreen'
|
||||
}
|
||||
},
|
||||
{
|
||||
variant: 'notification',
|
||||
directives: {
|
||||
background: '--cRed'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -47,7 +47,6 @@
|
|||
display: flex;
|
||||
flex: 1 0;
|
||||
margin: 0;
|
||||
padding: 0.6em 1em;
|
||||
|
||||
--emoji-size: 14px;
|
||||
|
||||
|
|
|
|||
22
src/components/bookmark_folder_card/bookmark_folder_card.js
Normal file
22
src/components/bookmark_folder_card/bookmark_folder_card.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faEllipsisH
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faEllipsisH
|
||||
)
|
||||
|
||||
const BookmarkFolderCard = {
|
||||
props: [
|
||||
'folder',
|
||||
'allBookmarks'
|
||||
],
|
||||
computed: {
|
||||
firstLetter () {
|
||||
return this.folder ? this.folder.name[0] : null
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default BookmarkFolderCard
|
||||
111
src/components/bookmark_folder_card/bookmark_folder_card.vue
Normal file
111
src/components/bookmark_folder_card/bookmark_folder_card.vue
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
<template>
|
||||
<div
|
||||
v-if="allBookmarks"
|
||||
class="bookmark-folder-card"
|
||||
>
|
||||
<router-link
|
||||
:to="{ name: 'bookmarks' }"
|
||||
class="bookmark-folder-name"
|
||||
>
|
||||
<span class="icon">
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 menu-icon"
|
||||
icon="bookmark"
|
||||
/>
|
||||
</span>{{ $t('nav.all_bookmarks') }}
|
||||
</router-link>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="bookmark-folder-card"
|
||||
>
|
||||
<router-link
|
||||
:to="{ name: 'bookmark-folder', params: { id: folder.id } }"
|
||||
class="bookmark-folder-name"
|
||||
>
|
||||
<img
|
||||
v-if="folder.emoji_url"
|
||||
class="iconEmoji iconEmoji-image"
|
||||
:src="folder.emoji_url"
|
||||
:alt="folder.emoji"
|
||||
:title="folder.emoji"
|
||||
>
|
||||
<span
|
||||
v-else-if="folder.emoji"
|
||||
class="iconEmoji"
|
||||
>
|
||||
<span>
|
||||
{{ folder.emoji }}
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
v-else-if="firstLetter"
|
||||
class="icon iconLetter fa-scale-110"
|
||||
>{{ firstLetter }}</span>{{ folder.name }}
|
||||
</router-link>
|
||||
<router-link
|
||||
:to="{ name: 'bookmark-folder-edit', params: { id: folder.id } }"
|
||||
class="button-folder-edit"
|
||||
>
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="ellipsis-h"
|
||||
/>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./bookmark_folder_card.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
.bookmark-folder-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
a.bookmark-folder-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
|
||||
.icon,
|
||||
.iconLetter,
|
||||
.iconEmoji {
|
||||
display: inline-block;
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.icon,
|
||||
.iconLetter {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.iconEmoji {
|
||||
text-align: center;
|
||||
object-fit: contain;
|
||||
vertical-align: middle;
|
||||
|
||||
> span {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
img.iconEmoji {
|
||||
padding: 0.25em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.bookmark-folder-name,
|
||||
.button-folder-edit {
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
color: var(--link);
|
||||
}
|
||||
</style>
|
||||
80
src/components/bookmark_folder_edit/bookmark_folder_edit.js
Normal file
80
src/components/bookmark_folder_edit/bookmark_folder_edit.js
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
import EmojiPicker from '../emoji_picker/emoji_picker.vue'
|
||||
import apiService from '../../services/api/api.service'
|
||||
|
||||
const BookmarkFolderEdit = {
|
||||
data () {
|
||||
return {
|
||||
name: '',
|
||||
nameDraft: '',
|
||||
emoji: '',
|
||||
emojiUrl: null,
|
||||
emojiDraft: '',
|
||||
emojiUrlDraft: null,
|
||||
emojiPickerExpanded: false,
|
||||
reallyDelete: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
EmojiPicker
|
||||
},
|
||||
created () {
|
||||
if (!this.id) return
|
||||
const credentials = this.$store.state.users.currentUser.credentials
|
||||
apiService.fetchBookmarkFolders({ credentials })
|
||||
.then((folders) => {
|
||||
const folder = folders.find(folder => folder.id === this.id)
|
||||
if (!folder) return
|
||||
|
||||
this.nameDraft = this.name = folder.name
|
||||
this.emojiDraft = this.emoji = folder.emoji
|
||||
this.emojiUrlDraft = this.emojiUrl = folder.emoji_url
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
id () {
|
||||
return this.$route.params.id
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectEmoji (event) {
|
||||
this.emojiDraft = event.insertion
|
||||
this.emojiUrlDraft = event.insertionUrl
|
||||
},
|
||||
showEmojiPicker () {
|
||||
if (!this.emojiPickerExpanded) {
|
||||
this.$refs.picker.showPicker()
|
||||
}
|
||||
},
|
||||
onShowPicker () {
|
||||
this.emojiPickerExpanded = true
|
||||
},
|
||||
onClosePicker () {
|
||||
this.emojiPickerExpanded = false
|
||||
},
|
||||
updateFolder () {
|
||||
this.$store.dispatch('setBookmarkFolder', { folderId: this.id, name: this.nameDraft, emoji: this.emojiDraft })
|
||||
.then(() => {
|
||||
this.$router.push({ name: 'bookmark-folders' })
|
||||
})
|
||||
},
|
||||
createFolder () {
|
||||
this.$store.dispatch('createBookmarkFolder', { name: this.nameDraft, emoji: this.emojiDraft })
|
||||
.then(() => {
|
||||
this.$router.push({ name: 'bookmark-folders' })
|
||||
})
|
||||
.catch((e) => {
|
||||
this.$store.dispatch('pushGlobalNotice', {
|
||||
messageKey: 'bookmark_folders.error',
|
||||
messageArgs: [e.message],
|
||||
level: 'error'
|
||||
})
|
||||
})
|
||||
},
|
||||
deleteFolder () {
|
||||
this.$store.dispatch('deleteBookmarkFolder', { folderId: this.id })
|
||||
this.$router.push({ name: 'bookmark-folders' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default BookmarkFolderEdit
|
||||
198
src/components/bookmark_folder_edit/bookmark_folder_edit.vue
Normal file
198
src/components/bookmark_folder_edit/bookmark_folder_edit.vue
Normal file
|
|
@ -0,0 +1,198 @@
|
|||
<template>
|
||||
<div class="panel-default panel BookmarkFolderEdit">
|
||||
<div
|
||||
ref="header"
|
||||
class="panel-heading folder-edit-heading"
|
||||
>
|
||||
<button
|
||||
class="button-unstyled go-back-button"
|
||||
@click="$router.back"
|
||||
>
|
||||
<FAIcon
|
||||
size="lg"
|
||||
icon="chevron-left"
|
||||
/>
|
||||
</button>
|
||||
<div class="title">
|
||||
<i18n-t
|
||||
v-if="id"
|
||||
keypath="bookmark_folders.editing_folder"
|
||||
>
|
||||
<template #folderName>
|
||||
{{ name }}
|
||||
</template>
|
||||
</i18n-t>
|
||||
<i18n-t
|
||||
v-else
|
||||
keypath="bookmark_folders.creating_folder"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="input-wrap">
|
||||
<label for="folder-edit-title">{{ $t('bookmark_folders.emoji') }}</label>
|
||||
<button
|
||||
class="input input-emoji"
|
||||
:title="$t('bookmark_folder.emoji_pick')"
|
||||
@click="showEmojiPicker"
|
||||
>
|
||||
<img
|
||||
v-if="emojiUrlDraft"
|
||||
class="iconEmoji iconEmoji-image"
|
||||
:src="emojiUrlDraft"
|
||||
:alt="emojiDraft"
|
||||
:title="emojiDraft"
|
||||
>
|
||||
<span
|
||||
v-else-if="emojiDraft"
|
||||
class="iconEmoji"
|
||||
>
|
||||
<span>
|
||||
{{ emojiDraft }}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
<EmojiPicker
|
||||
ref="picker"
|
||||
class="emoji-picker-panel"
|
||||
@emoji="selectEmoji"
|
||||
@show="onShowPicker"
|
||||
@close="onClosePicker"
|
||||
/>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<label for="folder-edit-title">{{ $t('bookmark_folders.name') }}</label>
|
||||
<input
|
||||
id="folder-edit-title"
|
||||
ref="name"
|
||||
v-model="nameDraft"
|
||||
class="input"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<span class="spacer" />
|
||||
<button
|
||||
v-if="!id"
|
||||
class="btn button-default footer-button"
|
||||
@click="createFolder"
|
||||
>
|
||||
{{ $t('bookmark_folders.create') }}
|
||||
</button>
|
||||
<button
|
||||
v-else-if="!reallyDelete"
|
||||
class="btn button-default footer-button"
|
||||
@click="reallyDelete = true"
|
||||
>
|
||||
{{ $t('bookmark_folders.delete') }}
|
||||
</button>
|
||||
<template v-else>
|
||||
{{ $t('bookmark_folders.really_delete') }}
|
||||
<button
|
||||
class="btn button-default footer-button"
|
||||
@click="deleteFolder"
|
||||
>
|
||||
{{ $t('general.yes') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn button-default footer-button"
|
||||
@click="reallyDelete = false"
|
||||
>
|
||||
{{ $t('general.no') }}
|
||||
</button>
|
||||
</template>
|
||||
<div
|
||||
v-if="id && !reallyDelete"
|
||||
>
|
||||
<button
|
||||
class="btn button-default follow-button"
|
||||
@click="updateFolder"
|
||||
>
|
||||
{{ $t('bookmark_folders.update_folder') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./bookmark_folder_edit.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
.BookmarkFolderEdit {
|
||||
--panel-body-padding: 0.5em;
|
||||
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.folder-edit-heading {
|
||||
grid-template-columns: auto minmax(50%, 1fr);
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
display: flex;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.emoji-picker-panel {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
margin-top: 2px;
|
||||
|
||||
&.hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.input-emoji {
|
||||
height: 2.5em;
|
||||
width: 2.5em;
|
||||
padding: 0;
|
||||
|
||||
.iconEmoji {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
object-fit: contain;
|
||||
vertical-align: middle;
|
||||
height: 2.5em;
|
||||
width: 2.5em;
|
||||
|
||||
> span {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
img.iconEmoji {
|
||||
padding: 0.25em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.input-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.go-back-button {
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
height: 100%;
|
||||
align-self: start;
|
||||
width: var(--__panel-heading-height-inner);
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
|
||||
.panel-footer {
|
||||
grid-template-columns: minmax(10%, 1fr);
|
||||
|
||||
.footer-button {
|
||||
min-width: 9em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
27
src/components/bookmark_folders/bookmark_folders.js
Normal file
27
src/components/bookmark_folders/bookmark_folders.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
import BookmarkFolderCard from '../bookmark_folder_card/bookmark_folder_card.vue'
|
||||
|
||||
const BookmarkFolders = {
|
||||
data () {
|
||||
return {
|
||||
isNew: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
BookmarkFolderCard
|
||||
},
|
||||
computed: {
|
||||
bookmarkFolders () {
|
||||
return this.$store.state.bookmarkFolders.allFolders
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancelNewFolder () {
|
||||
this.isNew = false
|
||||
},
|
||||
newFolder () {
|
||||
this.isNew = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default BookmarkFolders
|
||||
37
src/components/bookmark_folders/bookmark_folders.vue
Normal file
37
src/components/bookmark_folders/bookmark_folders.vue
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<div class="Bookmark-folders panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<div class="title">
|
||||
{{ $t('nav.bookmark_folders') }}
|
||||
</div>
|
||||
<router-link
|
||||
:to="{ name: 'bookmark-folder-new' }"
|
||||
class="button-default btn new-folder-button"
|
||||
>
|
||||
{{ $t("bookmark_folders.new") }}
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<BookmarkFolderCard
|
||||
:all-bookmarks="true"
|
||||
class="list-item"
|
||||
/>
|
||||
<BookmarkFolderCard
|
||||
v-for="folder in bookmarkFolders.slice().reverse()"
|
||||
:key="folder"
|
||||
:folder="folder"
|
||||
class="list-item"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./bookmark_folders.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
.Bookmark-folders {
|
||||
.new-folder-button {
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { mapState } from 'vuex'
|
||||
import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
|
||||
import { getBookmarkFolderEntries } from 'src/components/navigation/filter.js'
|
||||
|
||||
export const BookmarkFoldersMenuContent = {
|
||||
components: {
|
||||
NavigationEntry
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
folders: getBookmarkFolderEntries
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default BookmarkFoldersMenuContent
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<ul>
|
||||
<NavigationEntry
|
||||
:item="{
|
||||
name: 'bookmarks',
|
||||
routeObject: { name: 'bookmarks' },
|
||||
label: 'nav.all_bookmarks',
|
||||
icon: 'bookmark'
|
||||
}"
|
||||
/>
|
||||
<NavigationEntry
|
||||
v-for="item in folders"
|
||||
:key="item.id"
|
||||
:item="item"
|
||||
/>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script src="./bookmark_folders_menu_content.js"></script>
|
||||
|
|
@ -1,16 +1,31 @@
|
|||
import Timeline from '../timeline/timeline.vue'
|
||||
|
||||
const Bookmarks = {
|
||||
computed: {
|
||||
timeline () {
|
||||
return this.$store.state.statuses.timelines.bookmarks
|
||||
}
|
||||
created () {
|
||||
this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
|
||||
this.$store.dispatch('startFetchingTimeline', { timeline: 'bookmarks', bookmarkFolderId: this.folderId || null })
|
||||
},
|
||||
components: {
|
||||
Timeline
|
||||
},
|
||||
computed: {
|
||||
folderId () {
|
||||
return this.$route.params.id
|
||||
},
|
||||
timeline () {
|
||||
return this.$store.state.statuses.timelines.bookmarks
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
folderId () {
|
||||
this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
|
||||
this.$store.dispatch('stopFetchingTimeline', 'bookmarks')
|
||||
this.$store.dispatch('startFetchingTimeline', { timeline: 'bookmarks', bookmarkFolderId: this.folderId || null })
|
||||
}
|
||||
},
|
||||
unmounted () {
|
||||
this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
|
||||
this.$store.dispatch('stopFetchingTimeline', 'bookmarks')
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
:title="$t('nav.bookmarks')"
|
||||
:timeline="timeline"
|
||||
:timeline-name="'bookmarks'"
|
||||
:bookmark-folder-id="folderId"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
13
src/components/border.style.js
Normal file
13
src/components/border.style.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
export default {
|
||||
name: 'Border',
|
||||
selector: '/*border*/',
|
||||
virtual: true,
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
textColor: '$mod(--parent, 10)',
|
||||
textAuto: 'no-auto'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
112
src/components/button.style.js
Normal file
112
src/components/button.style.js
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
export default {
|
||||
name: 'Button', // Name of the component
|
||||
selector: '.button-default', // CSS selector/prefix
|
||||
// outOfTreeSelector: '' // out-of-tree selector is used when other components are laid over it but it's not part of the tree, see Underlay component
|
||||
// States, system witll calculate ALL possible combinations of those and prepend "normal" to them + standalone "normal" state
|
||||
states: {
|
||||
// States are a bit expensive - the amount of combinations generated is about (1/6)n^3+n, so adding more state increased number of combination by an order of magnitude!
|
||||
// All states inherit from "normal" state, there is no other inheirtance, i.e. hover+disabled only inherits from "normal", not from hover nor disabled.
|
||||
// However, cascading still works, so resulting state will be result of merging of all relevant states/variants
|
||||
// normal: '' // normal state is implicitly added, it is always included
|
||||
toggled: '.toggled',
|
||||
pressed: ':active',
|
||||
hover: ':hover:not(:disabled)',
|
||||
focused: ':focus-within',
|
||||
disabled: ':disabled'
|
||||
},
|
||||
// Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
|
||||
variants: {
|
||||
// Variants save on computation time since adding new variant just adds one more "set".
|
||||
// normal: '', // you can override normal variant, it will be appenended to the main class
|
||||
danger: '.danger'
|
||||
// Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants.
|
||||
// This (currently) is further multipled by number of places where component can exist.
|
||||
},
|
||||
// This lists all other components that can possibly exist within one. Recursion is currently not supported (and probably won't be supported ever).
|
||||
validInnerComponents: [
|
||||
'Text',
|
||||
'Icon'
|
||||
],
|
||||
// Default rules, used as "default theme", essentially.
|
||||
defaultRules: [
|
||||
{
|
||||
component: 'Root',
|
||||
directives: {
|
||||
'--defaultButtonHoverGlow': 'shadow | 0 0 4 --text',
|
||||
'--defaultButtonShadow': 'shadow | 0 0 2 #000000',
|
||||
'--defaultButtonBevel': 'shadow | $borderSide(#FFFFFF, top, 0.2), $borderSide(#000000, bottom, 0.2)',
|
||||
'--pressedButtonBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2), $borderSide(#000000, top, 0.2)'
|
||||
}
|
||||
},
|
||||
{
|
||||
// component: 'Button', // no need to specify components every time unless you're specifying how other component should look
|
||||
// like within it
|
||||
directives: {
|
||||
background: '--fg',
|
||||
shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
|
||||
roundness: 3
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['hover'],
|
||||
directives: {
|
||||
shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['pressed'],
|
||||
directives: {
|
||||
shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['hover', 'pressed'],
|
||||
directives: {
|
||||
shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['toggled'],
|
||||
directives: {
|
||||
background: '--inheritedBackground,-14.2',
|
||||
shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['toggled', 'hover'],
|
||||
directives: {
|
||||
background: '--inheritedBackground,-14.2',
|
||||
shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['disabled'],
|
||||
directives: {
|
||||
background: '$blend(--inheritedBackground, 0.25, --parent)',
|
||||
shadow: ['--defaultButtonBevel']
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Text',
|
||||
parent: {
|
||||
component: 'Button',
|
||||
state: ['disabled']
|
||||
},
|
||||
directives: {
|
||||
textOpacity: 0.25,
|
||||
textOpacityMode: 'blend'
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Icon',
|
||||
parent: {
|
||||
component: 'Button',
|
||||
state: ['disabled']
|
||||
},
|
||||
directives: {
|
||||
textOpacity: 0.25,
|
||||
textOpacityMode: 'blend'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
96
src/components/button_unstyled.style.js
Normal file
96
src/components/button_unstyled.style.js
Normal file
|
|
@ -0,0 +1,96 @@
|
|||
export default {
|
||||
name: 'ButtonUnstyled',
|
||||
selector: '.button-unstyled',
|
||||
states: {
|
||||
toggled: '.toggled',
|
||||
disabled: ':disabled',
|
||||
hover: ':hover:not(:disabled)',
|
||||
focused: ':focus-within'
|
||||
},
|
||||
validInnerComponents: [
|
||||
'Text',
|
||||
'Icon',
|
||||
'Badge'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
background: '#ffffff',
|
||||
opacity: 0,
|
||||
shadow: []
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Icon',
|
||||
parent: {
|
||||
component: 'ButtonUnstyled',
|
||||
state: ['hover']
|
||||
},
|
||||
directives: {
|
||||
textColor: '--parent--text'
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Icon',
|
||||
parent: {
|
||||
component: 'ButtonUnstyled',
|
||||
state: ['toggled']
|
||||
},
|
||||
directives: {
|
||||
textColor: '--parent--text'
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Icon',
|
||||
parent: {
|
||||
component: 'ButtonUnstyled',
|
||||
state: ['toggled', 'hover']
|
||||
},
|
||||
directives: {
|
||||
textColor: '--parent--text'
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Icon',
|
||||
parent: {
|
||||
component: 'ButtonUnstyled',
|
||||
state: ['toggled', 'focused']
|
||||
},
|
||||
directives: {
|
||||
textColor: '--parent--text'
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Icon',
|
||||
parent: {
|
||||
component: 'ButtonUnstyled',
|
||||
state: ['toggled', 'focused', 'hover']
|
||||
},
|
||||
directives: {
|
||||
textColor: '--parent--text'
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Text',
|
||||
parent: {
|
||||
component: 'ButtonUnstyled',
|
||||
state: ['disabled']
|
||||
},
|
||||
directives: {
|
||||
textOpacity: 0.25,
|
||||
textOpacityMode: 'blend'
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Icon',
|
||||
parent: {
|
||||
component: 'ButtonUnstyled',
|
||||
state: ['disabled']
|
||||
},
|
||||
directives: {
|
||||
textOpacity: 0.25,
|
||||
textOpacityMode: 'blend'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -11,15 +11,15 @@
|
|||
|
||||
.chat-view-body {
|
||||
box-sizing: border-box;
|
||||
background-color: var(--chatBg, $fallback--bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
overflow: visible;
|
||||
min-height: calc(100vh - var(--navbar-height));
|
||||
margin: 0;
|
||||
border-radius: 10px 10px 0 0;
|
||||
border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
|
||||
border-radius: var(--roundness);
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
|
||||
&::after {
|
||||
border-radius: 0;
|
||||
|
|
@ -37,8 +37,6 @@
|
|||
.footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background-color: $fallback--bg;
|
||||
background-color: var(--bg, $fallback--bg);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
|
@ -61,8 +59,6 @@
|
|||
position: absolute;
|
||||
right: 1.3em;
|
||||
top: -3.2em;
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--btn, $fallback--fg);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -79,12 +75,6 @@
|
|||
visibility: visible;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 1em;
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
}
|
||||
|
||||
.unread-message-count {
|
||||
font-size: 0.8em;
|
||||
left: 50%;
|
||||
|
|
|
|||
19
src/components/chat/chat.style.js
Normal file
19
src/components/chat/chat.style.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
export default {
|
||||
name: 'Chat',
|
||||
selector: '.chat-message-list',
|
||||
validInnerComponents: [
|
||||
'Text',
|
||||
'Link',
|
||||
'Icon',
|
||||
'Avatar',
|
||||
'ChatMessage'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
background: '--bg',
|
||||
blur: '5px'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="message-list"
|
||||
class="chat-message-list message-list"
|
||||
:style="{ height: scrollableContainerHeight }"
|
||||
>
|
||||
<template v-if="!errorLoadingChat">
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
<FAIcon icon="chevron-down" />
|
||||
<div
|
||||
v-if="newMessageCount"
|
||||
class="badge badge-notification unread-chat-count unread-message-count"
|
||||
class="badge -notification unread-chat-count unread-message-count"
|
||||
>
|
||||
{{ newMessageCount }}
|
||||
</div>
|
||||
|
|
@ -95,6 +95,5 @@
|
|||
|
||||
<script src="./chat.js"></script>
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
@import "./chat";
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -45,8 +45,6 @@
|
|||
<script src="./chat_list.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.chat-list {
|
||||
min-height: 25em;
|
||||
margin-bottom: 0;
|
||||
|
|
@ -57,8 +55,7 @@
|
|||
font-size: 1.2em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
color: $fallback--text;
|
||||
color: var(--faint, $fallback--text);
|
||||
color: var(--textFaint);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
.chat-list-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0.75em;
|
||||
height: 5em;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
|
|
@ -11,11 +9,6 @@
|
|||
outline: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--selectedPost, $fallback--lightBg);
|
||||
box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
|
||||
}
|
||||
|
||||
.chat-list-item-left {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
|
@ -29,7 +22,7 @@
|
|||
|
||||
.heading {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
|
@ -47,18 +40,17 @@
|
|||
}
|
||||
|
||||
.chat-preview {
|
||||
display: inline-flex;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin: 0.35em 0;
|
||||
color: $fallback--text;
|
||||
color: var(--faint, $fallback--text);
|
||||
color: var(--textFaint);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--faintLink, $fallback--link);
|
||||
color: var(--linkFaint);
|
||||
text-decoration: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -73,11 +65,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.Avatar {
|
||||
border-radius: $fallback--avatarAltRadius;
|
||||
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
|
||||
}
|
||||
|
||||
.chat-preview-body {
|
||||
--emoji-size: 1.4em;
|
||||
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
/>
|
||||
<div
|
||||
v-if="chat.unread > 0"
|
||||
class="badge badge-notification unread-chat-count"
|
||||
class="badge -notification unread-chat-count"
|
||||
>
|
||||
{{ chat.unread }}
|
||||
</div>
|
||||
|
|
@ -48,6 +48,5 @@
|
|||
<script src="./chat_list_item.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
@import "./chat_list_item";
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import "../../variables";
|
||||
|
||||
.chat-message-wrapper {
|
||||
&.hovered-message-chain {
|
||||
.animated.Avatar {
|
||||
|
|
@ -27,12 +25,6 @@
|
|||
|
||||
.menu-icon {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
.extra-button-popover.open & {
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
}
|
||||
}
|
||||
|
||||
.popover {
|
||||
|
|
@ -61,10 +53,12 @@
|
|||
}
|
||||
|
||||
.status {
|
||||
border-radius: $fallback--chatMessageRadius;
|
||||
border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
|
||||
background-color: var(--background);
|
||||
color: var(--text);
|
||||
border-radius: var(--roundness);
|
||||
display: flex;
|
||||
padding: 0.75em;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.created-at {
|
||||
|
|
@ -97,8 +91,7 @@
|
|||
.error {
|
||||
.status-content.media-body,
|
||||
.created-at {
|
||||
color: $fallback--cRed;
|
||||
color: var(--badgeNotification, $fallback--cRed);
|
||||
color: var(--badgeNotification);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -117,16 +110,6 @@
|
|||
align-content: end;
|
||||
justify-content: flex-end;
|
||||
|
||||
a {
|
||||
color: var(--chatMessageOutgoingLink, $fallback--link);
|
||||
}
|
||||
|
||||
.status {
|
||||
color: var(--chatMessageOutgoingText, $fallback--text);
|
||||
background-color: var(--chatMessageOutgoingBg, $fallback--lightBg);
|
||||
border: 1px solid var(--chatMessageOutgoingBorder, --lightBg);
|
||||
}
|
||||
|
||||
.chat-message-inner {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
|
@ -137,22 +120,6 @@
|
|||
}
|
||||
|
||||
.incoming {
|
||||
a {
|
||||
color: var(--chatMessageIncomingLink, $fallback--link);
|
||||
}
|
||||
|
||||
.status {
|
||||
color: var(--chatMessageIncomingText, $fallback--text);
|
||||
background-color: var(--chatMessageIncomingBg, $fallback--bg);
|
||||
border: 1px solid var(--chatMessageIncomingBorder, --border);
|
||||
}
|
||||
|
||||
.created-at {
|
||||
a {
|
||||
color: var(--chatMessageIncomingText, $fallback--text);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-message-menu {
|
||||
left: 0.4rem;
|
||||
}
|
||||
|
|
@ -176,6 +143,5 @@
|
|||
margin: 1.4em 0;
|
||||
font-size: 0.9em;
|
||||
user-select: none;
|
||||
color: $fallback--text;
|
||||
color: var(--faintedText, $fallback--text);
|
||||
color: var(--textFaint);
|
||||
}
|
||||
|
|
|
|||
30
src/components/chat_message/chat_message.style.js
Normal file
30
src/components/chat_message/chat_message.style.js
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
export default {
|
||||
name: 'ChatMessage',
|
||||
selector: '.chat-message',
|
||||
variants: {
|
||||
outgoing: '.outgoing'
|
||||
},
|
||||
validInnerComponents: [
|
||||
'Text',
|
||||
'Icon',
|
||||
'Border',
|
||||
'Button',
|
||||
'RichContent',
|
||||
'Attachment',
|
||||
'PollGraph'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
background: '--bg, 2',
|
||||
backgroundNoCssColor: 'yes'
|
||||
}
|
||||
},
|
||||
{
|
||||
variant: 'outgoing',
|
||||
directives: {
|
||||
background: '--bg, 5'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
<template #content>
|
||||
<div class="dropdown-menu">
|
||||
<button
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
class="menu-item dropdown-item dropdown-item-icon"
|
||||
@click="deleteMessage"
|
||||
>
|
||||
<FAIcon icon="times" /> {{ $t("chats.delete") }}
|
||||
|
|
|
|||
|
|
@ -16,11 +16,6 @@
|
|||
padding-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.basic-user-card:hover {
|
||||
cursor: pointer;
|
||||
background-color: var(--selectedPost, $fallback--lightBg);
|
||||
}
|
||||
|
||||
.go-back-button {
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
|
|
|
|||
|
|
@ -16,27 +16,29 @@
|
|||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<div class="input-search">
|
||||
<FAIcon
|
||||
class="search-icon fa-scale-110 fa-old-padding"
|
||||
icon="search"
|
||||
/>
|
||||
<div class="panel-body">
|
||||
<div class="input-wrap">
|
||||
<div class="input-search">
|
||||
<FAIcon
|
||||
class="search-icon fa-scale-110 fa-old-padding"
|
||||
icon="search"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
ref="search"
|
||||
v-model="query"
|
||||
class="input"
|
||||
placeholder="Search people"
|
||||
@input="onInput"
|
||||
>
|
||||
</div>
|
||||
<input
|
||||
ref="search"
|
||||
v-model="query"
|
||||
placeholder="Search people"
|
||||
@input="onInput"
|
||||
>
|
||||
</div>
|
||||
<div class="member-list">
|
||||
<div
|
||||
v-for="user in availableUsers"
|
||||
:key="user.id"
|
||||
class="member"
|
||||
>
|
||||
<div @click.capture.prevent="goToChat(user)">
|
||||
<div class="member-list">
|
||||
<div
|
||||
v-for="user in availableUsers"
|
||||
:key="user.id"
|
||||
class="list-item"
|
||||
@click.capture.prevent="goToChat(user)"
|
||||
>
|
||||
<BasicUserCard :user="user" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -46,6 +48,5 @@
|
|||
|
||||
<script src="./chat_new.js"></script>
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
@import "./chat_new";
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -26,8 +26,6 @@
|
|||
<script src="./chat_title.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.chat-title {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
|
|
@ -54,8 +52,7 @@
|
|||
margin-right: 0.5em;
|
||||
height: 1.5em;
|
||||
width: 1.5em;
|
||||
border-radius: $fallback--avatarAltRadius;
|
||||
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
|
||||
border-radius: var(--roundness);
|
||||
|
||||
&.animated::before {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -1,19 +1,33 @@
|
|||
<template>
|
||||
<label
|
||||
class="checkbox"
|
||||
:class="{ disabled, indeterminate }"
|
||||
:class="{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }"
|
||||
>
|
||||
<span
|
||||
v-if="!!$slots.before"
|
||||
class="label -before"
|
||||
:class="{ faint: disabled }"
|
||||
>
|
||||
<slot name="before" />
|
||||
</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="visible-for-screenreader-only"
|
||||
:disabled="disabled"
|
||||
:checked="modelValue"
|
||||
:indeterminate="indeterminate"
|
||||
@change="$emit('update:modelValue', $event.target.checked)"
|
||||
>
|
||||
<i class="checkbox-indicator" />
|
||||
<i
|
||||
class="input -checkbox checkbox-indicator"
|
||||
:aria-hidden="true"
|
||||
:class="{ disabled }"
|
||||
@transitionend.capture="onTransitionEnd"
|
||||
/>
|
||||
<span
|
||||
v-if="!!$slots.default"
|
||||
class="label"
|
||||
class="label -after"
|
||||
:class="{ faint: disabled }"
|
||||
>
|
||||
<slot />
|
||||
</span>
|
||||
|
|
@ -27,12 +41,29 @@ export default {
|
|||
'indeterminate',
|
||||
'disabled'
|
||||
],
|
||||
emits: ['update:modelValue']
|
||||
emits: ['update:modelValue'],
|
||||
data: (vm) => ({
|
||||
indeterminateTransitionFix: vm.indeterminate
|
||||
}),
|
||||
watch: {
|
||||
indeterminate (e) {
|
||||
if (e) {
|
||||
this.indeterminateTransitionFix = true
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onTransitionEnd (e) {
|
||||
if (!this.indeterminate) {
|
||||
this.indeterminateTransitionFix = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
@import "../../mixins";
|
||||
|
||||
.checkbox {
|
||||
position: relative;
|
||||
|
|
@ -44,11 +75,16 @@ export default {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
&-indicator {
|
||||
display: inline-block;
|
||||
& > &-indicator {
|
||||
/* Reset .input stuff */
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
line-height: inherit;
|
||||
display: inline-block;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&-indicator::before {
|
||||
|
|
@ -57,12 +93,11 @@ export default {
|
|||
display: block;
|
||||
content: "✓";
|
||||
transition: color 200ms;
|
||||
border-radius: $fallback--checkboxRadius;
|
||||
border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
|
||||
box-shadow: 0 0 2px black inset;
|
||||
box-shadow: var(--inputShadow);
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--input, $fallback--fg);
|
||||
width: 1.1em;
|
||||
height: 1.1em;
|
||||
border-radius: var(--roundness);
|
||||
box-shadow: var(--shadow);
|
||||
background-color: var(--background);
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
line-height: 1.1em;
|
||||
|
|
@ -72,35 +107,37 @@ export default {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
.checkbox-indicator::before,
|
||||
.label {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.label {
|
||||
color: $fallback--faint;
|
||||
color: var(--faint, $fallback--faint);
|
||||
.disabled {
|
||||
.checkbox-indicator::before {
|
||||
background-color: var(--background);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
display: none;
|
||||
|
||||
&:checked + .checkbox-indicator::before {
|
||||
color: $fallback--text;
|
||||
color: var(--inputText, $fallback--text);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
&:indeterminate + .checkbox-indicator::before {
|
||||
content: "–";
|
||||
color: $fallback--text;
|
||||
color: var(--inputText, $fallback--text);
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
& > span {
|
||||
margin-left: 0.5em;
|
||||
&.indeterminate-fix {
|
||||
input[type="checkbox"] + .checkbox-indicator::before {
|
||||
content: "–";
|
||||
}
|
||||
}
|
||||
|
||||
& > .label {
|
||||
&.-after {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
&.-before {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,19 +1,19 @@
|
|||
@import "../../variables";
|
||||
|
||||
.color-input {
|
||||
display: inline-flex;
|
||||
|
||||
.label {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
&-field.input {
|
||||
display: inline-flex;
|
||||
flex: 0 0 0;
|
||||
max-width: 9em;
|
||||
align-items: stretch;
|
||||
padding: 0.2em 8px;
|
||||
|
||||
input {
|
||||
color: var(--text);
|
||||
background: none;
|
||||
color: $fallback--lightText;
|
||||
color: var(--inputText, $fallback--lightText);
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -23,21 +23,39 @@
|
|||
min-width: 3em;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.nativeColor {
|
||||
flex: 0 0 2em;
|
||||
min-width: 2em;
|
||||
align-self: stretch;
|
||||
min-height: 100%;
|
||||
.nativeColor {
|
||||
cursor: pointer;
|
||||
flex: 0 0 auto;
|
||||
padding: 0;
|
||||
|
||||
input {
|
||||
appearance: none;
|
||||
max-width: 0;
|
||||
min-width: 0;
|
||||
max-height: 0;
|
||||
/* stylelint-disable-next-line declaration-no-important */
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.computedIndicator,
|
||||
.validIndicator,
|
||||
.invalidIndicator,
|
||||
.transparentIndicator {
|
||||
flex: 0 0 2em;
|
||||
margin: 0.2em 0.5em;
|
||||
min-width: 2em;
|
||||
align-self: stretch;
|
||||
min-height: 100%;
|
||||
min-height: 1.1em;
|
||||
border-radius: var(--roundness);
|
||||
}
|
||||
|
||||
.invalidIndicator {
|
||||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
border: 2px solid var(--cRed);
|
||||
}
|
||||
|
||||
.transparentIndicator {
|
||||
|
|
@ -58,16 +76,26 @@
|
|||
&::after {
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-top-left-radius: var(--roundness);
|
||||
}
|
||||
|
||||
&::before {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-bottom-right-radius: var(--roundness);
|
||||
}
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
.nativeColor input,
|
||||
.computedIndicator,
|
||||
.validIndicator,
|
||||
.invalidIndicator,
|
||||
.transparentIndicator {
|
||||
/* stylelint-disable-next-line declaration-no-important */
|
||||
opacity: 0.25 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
<label
|
||||
:for="name"
|
||||
class="label"
|
||||
:class="{ faint: !present || disabled }"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
|
|
@ -14,41 +15,68 @@
|
|||
:model-value="present"
|
||||
:disabled="disabled"
|
||||
class="opt"
|
||||
@update:modelValue="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
|
||||
@update:modelValue="update(typeof modelValue === 'undefined' ? fallback : undefined)"
|
||||
/>
|
||||
<div class="input color-input-field">
|
||||
<div
|
||||
class="input color-input-field"
|
||||
:class="{ disabled: !present || disabled }"
|
||||
>
|
||||
<input
|
||||
:id="name + '-t'"
|
||||
class="textColor unstyled"
|
||||
:class="{ disabled: !present || disabled }"
|
||||
type="text"
|
||||
:value="modelValue || fallback"
|
||||
:disabled="!present || disabled"
|
||||
@input="$emit('update:modelValue', $event.target.value)"
|
||||
>
|
||||
<input
|
||||
v-if="validColor"
|
||||
:id="name"
|
||||
class="nativeColor unstyled"
|
||||
type="color"
|
||||
:value="modelValue || fallback"
|
||||
:disabled="!present || disabled"
|
||||
@input="$emit('update:modelValue', $event.target.value)"
|
||||
@input="updateValue($event.target.value)"
|
||||
>
|
||||
<div
|
||||
v-if="transparentColor"
|
||||
v-if="validColor"
|
||||
class="validIndicator"
|
||||
:style="{backgroundColor: modelValue || fallback}"
|
||||
/>
|
||||
<div
|
||||
v-else-if="transparentColor"
|
||||
class="transparentIndicator"
|
||||
/>
|
||||
<div
|
||||
v-if="computedColor"
|
||||
v-else-if="computedColor"
|
||||
class="computedIndicator"
|
||||
:style="{backgroundColor: fallback}"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="invalidIndicator"
|
||||
/>
|
||||
<label class="nativeColor">
|
||||
<FAIcon icon="eye-dropper" />
|
||||
<input
|
||||
:id="name"
|
||||
class="unstyled"
|
||||
type="color"
|
||||
:value="modelValue || fallback"
|
||||
:disabled="!present || disabled"
|
||||
:class="{ disabled: !present || disabled }"
|
||||
@input="updateValue($event.target.value)"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Checkbox from '../checkbox/checkbox.vue'
|
||||
import { hex2rgb } from '../../services/color_convert/color_convert.js'
|
||||
import { throttle } from 'lodash'
|
||||
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faEyeDropper
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faEyeDropper
|
||||
)
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Checkbox
|
||||
|
|
@ -104,16 +132,12 @@ export default {
|
|||
computedColor () {
|
||||
return this.modelValue && this.modelValue.startsWith('--')
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateValue: throttle(function (value) {
|
||||
this.$emit('update:modelValue', value)
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" src="./color_input.scss"></style>
|
||||
|
||||
<style lang="scss">
|
||||
.color-control {
|
||||
input.text-input {
|
||||
max-width: 7em;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
212
src/components/component_preview/component_preview.vue
Normal file
212
src/components/component_preview/component_preview.vue
Normal file
|
|
@ -0,0 +1,212 @@
|
|||
<template>
|
||||
<div
|
||||
class="ComponentPreview"
|
||||
:class="{ '-shadow-controls': shadowControl }"
|
||||
>
|
||||
<label
|
||||
class="header"
|
||||
v-show="shadowControl"
|
||||
:class="{ faint: disabled }"
|
||||
>
|
||||
{{ $t('settings.style.shadows.offset') }}
|
||||
</label>
|
||||
<input
|
||||
v-show="shadowControl"
|
||||
:value="shadow?.y"
|
||||
:disabled="disabled"
|
||||
:class="{ disabled }"
|
||||
class="input input-number y-shift-number"
|
||||
type="number"
|
||||
@input="e => updateProperty('y', e.target.value)"
|
||||
>
|
||||
<input
|
||||
v-show="shadowControl"
|
||||
:value="shadow?.y"
|
||||
:disabled="disabled"
|
||||
:class="{ disabled }"
|
||||
class="input input-range y-shift-slider"
|
||||
type="range"
|
||||
max="20"
|
||||
min="-20"
|
||||
@input="e => updateProperty('y', e.target.value)"
|
||||
>
|
||||
<div
|
||||
class="preview-window"
|
||||
:class="{ '-light-grid': lightGrid }"
|
||||
>
|
||||
<div
|
||||
class="preview-block"
|
||||
:style="previewStyle"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
v-show="shadowControl"
|
||||
:value="shadow?.x"
|
||||
:disabled="disabled"
|
||||
:class="{ disabled }"
|
||||
class="input input-number x-shift-number"
|
||||
type="number"
|
||||
@input="e => updateProperty('x', e.target.value)"
|
||||
>
|
||||
<input
|
||||
v-show="shadowControl"
|
||||
:value="shadow?.x"
|
||||
:disabled="disabled"
|
||||
:class="{ disabled }"
|
||||
class="input input-range x-shift-slider"
|
||||
type="range"
|
||||
max="20"
|
||||
min="-20"
|
||||
@input="e => updateProperty('x', e.target.value)"
|
||||
>
|
||||
<Checkbox
|
||||
id="lightGrid"
|
||||
v-model="lightGrid"
|
||||
:disabled="shadow == null"
|
||||
name="lightGrid"
|
||||
class="input-light-grid"
|
||||
>
|
||||
{{ $t('settings.style.shadows.light_grid') }}
|
||||
</Checkbox>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.ComponentPreview {
|
||||
display: grid;
|
||||
grid-template-columns: 3em 1fr 3em;
|
||||
grid-template-rows: 2em 1fr 2em;
|
||||
grid-template-areas:
|
||||
". header y-num "
|
||||
". preview y-slide"
|
||||
"x-num x-slide . "
|
||||
"options options options";
|
||||
grid-gap: 0.5em;
|
||||
|
||||
.header {
|
||||
grid-area: header;
|
||||
justify-self: center;
|
||||
align-self: baseline;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.input-light-grid {
|
||||
grid-area: options;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
.input-number {
|
||||
min-width: 2em;
|
||||
}
|
||||
|
||||
.x-shift-number {
|
||||
grid-area: x-num;
|
||||
}
|
||||
|
||||
.x-shift-slider {
|
||||
grid-area: x-slide;
|
||||
height: auto;
|
||||
align-self: start;
|
||||
min-width: 10em;
|
||||
}
|
||||
|
||||
.y-shift-number {
|
||||
grid-area: y-num;
|
||||
}
|
||||
|
||||
.y-shift-slider {
|
||||
grid-area: y-slide;
|
||||
writing-mode: vertical-lr;
|
||||
justify-self: left;
|
||||
min-height: 10em;
|
||||
}
|
||||
|
||||
.x-shift-slider,
|
||||
.y-shift-slider {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.preview-window {
|
||||
--__grid-color1: rgb(102 102 102);
|
||||
--__grid-color2: rgb(153 153 153);
|
||||
--__grid-color1-disabled: rgba(102 102 102 / 20%);
|
||||
--__grid-color2-disabled: rgba(153 153 153 / 20%);
|
||||
|
||||
&.-light-grid {
|
||||
--__grid-color1: rgb(205 205 205);
|
||||
--__grid-color2: rgb(255 255 255);
|
||||
--__grid-color1-disabled: rgba(205 205 205 / 20%);
|
||||
--__grid-color2-disabled: rgba(255 255 255 / 20%);
|
||||
}
|
||||
|
||||
grid-area: preview;
|
||||
aspect-ratio: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 10em;
|
||||
min-height: 10em;
|
||||
background-color: var(--__grid-color2);
|
||||
background-image:
|
||||
linear-gradient(45deg, var(--__grid-color1) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, var(--__grid-color1) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, var(--__grid-color1) 75%),
|
||||
linear-gradient(-45deg, transparent 75%, var(--__grid-color1) 75%);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 0 10px, 10px -10px, -10px 0;
|
||||
border-radius: var(--roundness);
|
||||
|
||||
&.disabled {
|
||||
background-color: var(--__grid-color2-disabled);
|
||||
background-image:
|
||||
linear-gradient(45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, var(--__grid-color1-disabled) 75%),
|
||||
linear-gradient(-45deg, transparent 75%, var(--__grid-color1-disabled) 75%);
|
||||
}
|
||||
|
||||
.preview-block {
|
||||
background: var(--background, var(--bg));
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: 33%;
|
||||
min-height: 33%;
|
||||
max-width: 80%;
|
||||
max-height: 80%;
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
border-color: var(--border);
|
||||
border-radius: var(--roundness);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import Checkbox from 'src/components/checkbox/checkbox.vue'
|
||||
|
||||
export default {
|
||||
props: [
|
||||
'shadow',
|
||||
'shadowControl',
|
||||
'previewClass',
|
||||
'previewStyle',
|
||||
'disabled'
|
||||
],
|
||||
data () {
|
||||
return {
|
||||
lightGrid: false
|
||||
}
|
||||
},
|
||||
emits: ['update:shadow'],
|
||||
components: {
|
||||
Checkbox
|
||||
},
|
||||
methods: {
|
||||
updateProperty (axis, value) {
|
||||
this.$emit('update:shadow', { axis, value })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -56,7 +56,8 @@ const conversation = {
|
|||
expanded: false,
|
||||
threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
|
||||
statusContentPropertiesObject: {},
|
||||
inlineDivePosition: null
|
||||
inlineDivePosition: null,
|
||||
loadStatusError: null
|
||||
}
|
||||
},
|
||||
props: [
|
||||
|
|
@ -392,11 +393,15 @@ const conversation = {
|
|||
this.setHighlight(this.originalStatusId)
|
||||
})
|
||||
} else {
|
||||
this.loadStatusError = null
|
||||
this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId })
|
||||
.then((status) => {
|
||||
this.$store.dispatch('addNewStatuses', { statuses: [status] })
|
||||
this.fetchConversation()
|
||||
})
|
||||
.catch((error) => {
|
||||
this.loadStatusError = error
|
||||
})
|
||||
}
|
||||
},
|
||||
getReplies (id) {
|
||||
|
|
|
|||
|
|
@ -28,7 +28,27 @@
|
|||
class="rightside-button"
|
||||
/>
|
||||
</div>
|
||||
<div class="conversation-body panel-body">
|
||||
<div
|
||||
v-if="isPage && !status"
|
||||
class="conversation-body"
|
||||
:class="{ 'panel-body': isExpanded }"
|
||||
>
|
||||
<p v-if="!loadStatusError">
|
||||
<FAIcon
|
||||
spin
|
||||
icon="circle-notch"
|
||||
/>
|
||||
{{ $t('status.loading') }}
|
||||
</p>
|
||||
<p v-else>
|
||||
{{ $t('status.load_error', { error: loadStatusError }) }}
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="conversation-body"
|
||||
:class="{ 'panel-body': isExpanded }"
|
||||
>
|
||||
<div
|
||||
v-if="isTreeView"
|
||||
class="thread-body"
|
||||
|
|
@ -203,6 +223,7 @@
|
|||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="Conversation -hidden"
|
||||
:style="hiddenStyle"
|
||||
/>
|
||||
</template>
|
||||
|
|
@ -210,14 +231,17 @@
|
|||
<script src="./conversation.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.Conversation {
|
||||
z-index: 1;
|
||||
|
||||
&.-hidden {
|
||||
background: var(--__panel-background);
|
||||
backdrop-filter: var(--__panel-backdrop-filter);
|
||||
}
|
||||
|
||||
.conversation-dive-to-top-level-box {
|
||||
padding: var(--status-margin, $status-margin);
|
||||
border-bottom: 1px solid var(--border, $fallback--border);
|
||||
padding: var(--status-margin);
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
|
||||
/* Make the button stretch along the whole row */
|
||||
|
|
@ -227,20 +251,22 @@
|
|||
}
|
||||
|
||||
.thread-ancestors {
|
||||
margin-left: var(--status-margin, $status-margin);
|
||||
border-left: 2px solid var(--border, $fallback--border);
|
||||
margin-left: var(--status-margin);
|
||||
border-left: 2px solid var(--border);
|
||||
}
|
||||
|
||||
.thread-ancestor.-faded .StatusContent {
|
||||
--link: var(--faintLink);
|
||||
--text: var(--faint);
|
||||
|
||||
color: var(--text);
|
||||
.thread-ancestor.-faded .RichContent {
|
||||
/* stylelint-disable declaration-no-important */
|
||||
--text: var(--textFaint) !important;
|
||||
--link: var(--linkFaint) !important;
|
||||
--funtextGreentext: var(--funtextGreentextFaint) !important;
|
||||
--funtextCyantext: var(--funtextCyantextFaint) !important;
|
||||
/* stylelint-enable declaration-no-important */
|
||||
}
|
||||
|
||||
.thread-ancestor-dive-box {
|
||||
padding-left: var(--status-margin, $status-margin);
|
||||
border-bottom: 1px solid var(--border, $fallback--border);
|
||||
padding-left: var(--status-margin);
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
|
||||
/* Make the button stretch along the whole row */
|
||||
|
|
@ -253,16 +279,17 @@
|
|||
}
|
||||
|
||||
.thread-ancestor-dive-box-inner {
|
||||
padding: var(--status-margin, $status-margin);
|
||||
padding: var(--status-margin);
|
||||
}
|
||||
|
||||
.conversation-status {
|
||||
border-bottom: 1px solid var(--border, $fallback--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.thread-ancestor-has-other-replies .conversation-status,
|
||||
&:last-child .conversation-status,
|
||||
&:last-child:not(.-expanded) .conversation-status,
|
||||
&.-expanded .conversation-status:last-child,
|
||||
.thread-ancestor:last-child .conversation-status,
|
||||
.thread-ancestor:last-child .thread-ancestor-dive-box,
|
||||
&.-expanded .thread-tree .conversation-status {
|
||||
|
|
@ -270,20 +297,36 @@
|
|||
}
|
||||
|
||||
.thread-ancestors + .thread-tree > .conversation-status {
|
||||
border-top: 1px solid var(--border, $fallback--border);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* expanded conversation in timeline */
|
||||
&.status-fadein.-expanded .thread-body {
|
||||
border-left: 4px solid $fallback--cRed;
|
||||
border-left-color: var(--cRed, $fallback--cRed);
|
||||
border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
|
||||
border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
|
||||
border-bottom: 1px solid var(--border, $fallback--border);
|
||||
border-left: 4px solid var(--cRed);
|
||||
border-radius: var(--roundness);
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
&.-expanded.status-fadein {
|
||||
margin: calc(var(--status-margin, $status-margin) / 2);
|
||||
--___margin: calc(var(--status-margin) / 2);
|
||||
|
||||
background: var(--background);
|
||||
margin: var(--___margin);
|
||||
|
||||
&::before {
|
||||
z-index: -1;
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: calc(var(--___margin) * -1);
|
||||
bottom: calc(var(--___margin) * -1);
|
||||
left: calc(var(--___margin) * -1);
|
||||
right: calc(var(--___margin) * -1);
|
||||
background: var(--background);
|
||||
backdrop-filter: var(--__panel-backdrop-filter);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -107,7 +107,10 @@ export default {
|
|||
this.searchBarHidden = hidden
|
||||
},
|
||||
openSettingsModal () {
|
||||
this.$store.dispatch('openSettingsModal')
|
||||
this.$store.dispatch('openSettingsModal', 'user')
|
||||
},
|
||||
openAdminModal () {
|
||||
this.$store.dispatch('openSettingsModal', 'admin')
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
@import "../../variables";
|
||||
|
||||
.DesktopNav {
|
||||
width: 100%;
|
||||
z-index: var(--ZI_navbar);
|
||||
|
|
@ -9,7 +7,7 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color: var(--topBarLink, $fallback--link);
|
||||
color: var(--link);
|
||||
}
|
||||
|
||||
.inner-nav {
|
||||
|
|
@ -54,27 +52,7 @@
|
|||
.button-default {
|
||||
&,
|
||||
svg {
|
||||
color: $fallback--text;
|
||||
color: var(--btnTopBarText, $fallback--text);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--btnPressedTopBar, $fallback--fg);
|
||||
color: $fallback--text;
|
||||
color: var(--btnPressedTopBarText, $fallback--text);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $fallback--text;
|
||||
color: var(--btnDisabledTopBarText, $fallback--text);
|
||||
}
|
||||
|
||||
&.toggled {
|
||||
color: $fallback--text;
|
||||
color: var(--btnToggledTopBarText, $fallback--text);
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--btnToggledTopBar, $fallback--fg);
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -94,8 +72,7 @@
|
|||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--topBarText, $fallback--fg);
|
||||
background-color: var(--text);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -116,8 +93,7 @@
|
|||
text-align: center;
|
||||
|
||||
.svg-inline--fa {
|
||||
color: $fallback--link;
|
||||
color: var(--topBarLink, $fallback--link);
|
||||
color: var(--link);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
class="logo"
|
||||
:to="{ name: 'root' }"
|
||||
:style="logoBgStyle"
|
||||
:title="sitename"
|
||||
>
|
||||
<div
|
||||
class="mask"
|
||||
|
|
@ -38,40 +39,39 @@
|
|||
/>
|
||||
<button
|
||||
class="button-unstyled nav-icon"
|
||||
:title="$t('nav.preferences')"
|
||||
@click.stop="openSettingsModal"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="cog"
|
||||
:title="$t('nav.preferences')"
|
||||
/>
|
||||
</button>
|
||||
<a
|
||||
<button
|
||||
v-if="currentUser && currentUser.role === 'admin'"
|
||||
href="/pleroma/admin/#/login-pleroma"
|
||||
class="nav-icon"
|
||||
class="button-unstyled nav-icon"
|
||||
target="_blank"
|
||||
@click.stop
|
||||
:title="$t('nav.administration')"
|
||||
@click.stop="openAdminModal"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="tachometer-alt"
|
||||
:title="$t('nav.administration')"
|
||||
/>
|
||||
</a>
|
||||
</button>
|
||||
<span class="spacer" />
|
||||
<button
|
||||
v-if="currentUser"
|
||||
class="button-unstyled nav-icon"
|
||||
:title="$t('login.logout')"
|
||||
@click.stop.prevent="logout"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="sign-out-alt"
|
||||
:title="$t('login.logout')"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<slot name="header" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-modal-content">
|
||||
<div class="panel-body dialog-modal-content">
|
||||
<slot name="default" />
|
||||
</div>
|
||||
<div class="dialog-modal-footer user-interactions panel-footer">
|
||||
|
|
@ -25,8 +25,6 @@
|
|||
<script src="./dialog_modal.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
// TODO: unify with other modals.
|
||||
.dark-overlay {
|
||||
&::before {
|
||||
|
|
@ -54,8 +52,6 @@
|
|||
z-index: 2001;
|
||||
cursor: default;
|
||||
display: block;
|
||||
background-color: $fallback--bg;
|
||||
background-color: var(--bg, $fallback--bg);
|
||||
|
||||
.dialog-modal-heading {
|
||||
.title {
|
||||
|
|
@ -66,18 +62,13 @@
|
|||
.dialog-modal-content {
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
background-color: $fallback--bg;
|
||||
background-color: var(--bg, $fallback--bg);
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.dialog-modal-footer {
|
||||
margin: 0;
|
||||
padding: 0.5em;
|
||||
background-color: $fallback--bg;
|
||||
background-color: var(--bg, $fallback--bg);
|
||||
border-top: 1px solid $fallback--border;
|
||||
border-top: 1px solid var(--border, $fallback--border);
|
||||
border-top: 1px solid var(--border);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import Completion from '../../services/completion/completion.js'
|
||||
import genRandomSeed from '../../services/random_seed/random_seed.service.js'
|
||||
import EmojiPicker from '../emoji_picker/emoji_picker.vue'
|
||||
import Popover from 'src/components/popover/popover.vue'
|
||||
import ScreenReaderNotice from 'src/components/screen_reader_notice/screen_reader_notice.vue'
|
||||
import UnicodeDomainIndicator from '../unicode_domain_indicator/unicode_domain_indicator.vue'
|
||||
import { take } from 'lodash'
|
||||
import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
|
||||
|
|
@ -109,9 +111,10 @@ const EmojiInput = {
|
|||
},
|
||||
data () {
|
||||
return {
|
||||
randomSeed: genRandomSeed(),
|
||||
input: undefined,
|
||||
caretEl: undefined,
|
||||
highlighted: 0,
|
||||
highlighted: -1,
|
||||
caret: 0,
|
||||
focused: false,
|
||||
blurTimeout: null,
|
||||
|
|
@ -125,12 +128,16 @@ const EmojiInput = {
|
|||
components: {
|
||||
Popover,
|
||||
EmojiPicker,
|
||||
UnicodeDomainIndicator
|
||||
UnicodeDomainIndicator,
|
||||
ScreenReaderNotice
|
||||
},
|
||||
computed: {
|
||||
padEmoji () {
|
||||
return this.$store.getters.mergedConfig.padEmoji
|
||||
},
|
||||
defaultCandidateIndex () {
|
||||
return this.$store.getters.mergedConfig.autocompleteSelect ? 0 : -1
|
||||
},
|
||||
preText () {
|
||||
return this.modelValue.slice(0, this.caret)
|
||||
},
|
||||
|
|
@ -203,6 +210,12 @@ const EmojiInput = {
|
|||
top: this.input.scrollTop,
|
||||
left: this.input.scrollLeft
|
||||
})
|
||||
},
|
||||
suggestionListId () {
|
||||
return `suggestions-${this.randomSeed}`
|
||||
},
|
||||
suggestionItemId () {
|
||||
return (index) => `suggestion-item-${index}-${this.randomSeed}`
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
|
@ -278,6 +291,11 @@ const EmojiInput = {
|
|||
...rest,
|
||||
img: imageUrl || ''
|
||||
}))
|
||||
this.highlighted = this.defaultCandidateIndex
|
||||
this.$refs.screenReaderNotice.announce(
|
||||
this.$tc('tool_tip.autocomplete_available',
|
||||
this.suggestions.length,
|
||||
{ number: this.suggestions.length }))
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -374,26 +392,27 @@ const EmojiInput = {
|
|||
},
|
||||
cycleBackward (e) {
|
||||
const len = this.suggestions.length || 0
|
||||
if (len > 1) {
|
||||
this.highlighted -= 1
|
||||
if (this.highlighted < 0) {
|
||||
this.highlighted = this.suggestions.length - 1
|
||||
}
|
||||
|
||||
this.highlighted -= 1
|
||||
if (this.highlighted === -1) {
|
||||
this.input.focus()
|
||||
} else if (this.highlighted < -1) {
|
||||
this.highlighted = len - 1
|
||||
}
|
||||
if (len > 0) {
|
||||
e.preventDefault()
|
||||
} else {
|
||||
this.highlighted = 0
|
||||
}
|
||||
},
|
||||
cycleForward (e) {
|
||||
const len = this.suggestions.length || 0
|
||||
if (len > 1) {
|
||||
this.highlighted += 1
|
||||
if (this.highlighted >= len) {
|
||||
this.highlighted = 0
|
||||
}
|
||||
|
||||
this.highlighted += 1
|
||||
if (this.highlighted >= len) {
|
||||
this.highlighted = -1
|
||||
this.input.focus()
|
||||
}
|
||||
if (len > 0) {
|
||||
e.preventDefault()
|
||||
} else {
|
||||
this.highlighted = 0
|
||||
}
|
||||
},
|
||||
scrollIntoView () {
|
||||
|
|
@ -540,6 +559,13 @@ const EmojiInput = {
|
|||
})
|
||||
},
|
||||
resize () {
|
||||
},
|
||||
autoCompleteItemLabel (suggestion) {
|
||||
if (suggestion.user) {
|
||||
return suggestion.displayText + ' ' + suggestion.detailText
|
||||
} else {
|
||||
return this.maybeLocalizedEmojiName(suggestion)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,22 @@
|
|||
<template>
|
||||
<div
|
||||
ref="root"
|
||||
class="emoji-input"
|
||||
class="input emoji-input"
|
||||
:class="{ 'with-picker': !hideEmojiButton }"
|
||||
>
|
||||
<slot />
|
||||
<slot
|
||||
:id="'textbox-' + randomSeed"
|
||||
:aria-owns="suggestionListId"
|
||||
aria-autocomplete="both"
|
||||
:aria-expanded="showSuggestions"
|
||||
:aria-activedescendant="(!showSuggestions || highlighted === -1) ? '' : suggestionItemId(highlighted)"
|
||||
/>
|
||||
<!-- TODO: make the 'x' disappear if at the end maybe? -->
|
||||
<div
|
||||
ref="hiddenOverlay"
|
||||
class="hidden-overlay"
|
||||
:style="overlayStyle"
|
||||
:aria-hidden="true"
|
||||
>
|
||||
<span>{{ preText }}</span>
|
||||
<span
|
||||
|
|
@ -18,11 +25,16 @@
|
|||
>x</span>
|
||||
<span>{{ postText }}</span>
|
||||
</div>
|
||||
<screen-reader-notice
|
||||
ref="screenReaderNotice"
|
||||
aria-live="assertive"
|
||||
/>
|
||||
<template v-if="enableEmojiPicker">
|
||||
<button
|
||||
v-if="!hideEmojiButton"
|
||||
class="button-unstyled emoji-picker-icon"
|
||||
type="button"
|
||||
:title="$t('emoji.add_emoji')"
|
||||
@click.prevent="togglePicker"
|
||||
>
|
||||
<FAIcon :icon="['far', 'smile-beam']" />
|
||||
|
|
@ -43,17 +55,24 @@
|
|||
ref="suggestorPopover"
|
||||
class="autocomplete-panel"
|
||||
placement="bottom"
|
||||
:trigger-attrs="{ 'aria-hidden': true }"
|
||||
>
|
||||
<template #content>
|
||||
<div
|
||||
:id="suggestionListId"
|
||||
ref="panel-body"
|
||||
class="autocomplete-panel-body"
|
||||
role="listbox"
|
||||
>
|
||||
<div
|
||||
v-for="(suggestion, index) in suggestions"
|
||||
:id="suggestionItemId(index)"
|
||||
:key="index"
|
||||
class="autocomplete-item"
|
||||
:class="{ highlighted: index === highlighted }"
|
||||
class="menu-item autocomplete-item"
|
||||
role="option"
|
||||
:class="{ '-active': index === highlighted }"
|
||||
:aria-label="autoCompleteItemLabel(suggestion)"
|
||||
:aria-selected="index === highlighted"
|
||||
@click.stop.prevent="onClick($event, suggestion)"
|
||||
>
|
||||
<span class="image">
|
||||
|
|
@ -91,9 +110,8 @@
|
|||
<script src="./emoji_input.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.emoji-input {
|
||||
.input.emoji-input {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
|
@ -108,8 +126,7 @@
|
|||
line-height: 24px;
|
||||
|
||||
&:hover i {
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -126,6 +143,12 @@
|
|||
input,
|
||||
textarea {
|
||||
flex: 1 0 auto;
|
||||
color: inherit;
|
||||
/* stylelint-disable-next-line declaration-no-important */
|
||||
background: none !important;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.with-picker input {
|
||||
|
|
@ -160,26 +183,28 @@
|
|||
position: absolute;
|
||||
}
|
||||
|
||||
&-item {
|
||||
&-item.menu-item {
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
padding: 0.2em 0.4em;
|
||||
border-bottom: 1px solid rgb(0 0 0 / 40%);
|
||||
height: 32px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
.image {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
|
||||
height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
|
||||
line-height: var(--__line-height);
|
||||
text-align: center;
|
||||
font-size: 32px;
|
||||
margin-right: 4px;
|
||||
margin-right: var(--__horizontal-gap);
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
|
||||
height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: var(--__line-height);
|
||||
line-height: var(--__line-height);
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
|
|
@ -197,17 +222,6 @@
|
|||
line-height: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
&.highlighted {
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--selectedMenuPopover, $fallback--fg);
|
||||
color: var(--selectedMenuPopoverText, $fallback--text);
|
||||
|
||||
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
|
||||
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
|
||||
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
|
||||
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -94,8 +94,9 @@ export const suggestUsers = ({ dispatch, state }) => {
|
|||
|
||||
const newSuggestions = state.users.users.filter(
|
||||
user =>
|
||||
user.screen_name.toLowerCase().startsWith(noPrefix) ||
|
||||
user.name.toLowerCase().startsWith(noPrefix)
|
||||
user.screen_name && user.name && (
|
||||
user.screen_name.toLowerCase().startsWith(noPrefix) ||
|
||||
user.name.toLowerCase().startsWith(noPrefix))
|
||||
).slice(0, 20).sort((a, b) => {
|
||||
let aScore = 0
|
||||
let bScore = 0
|
||||
|
|
|
|||
|
|
@ -98,8 +98,14 @@ const EmojiPicker = {
|
|||
required: false,
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
hideCustomEmoji: {
|
||||
required: false,
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
inject: ['popoversZLayer'],
|
||||
data () {
|
||||
return {
|
||||
keyword: '',
|
||||
|
|
@ -108,11 +114,13 @@ const EmojiPicker = {
|
|||
groupsScrolledClass: 'scrolled-top',
|
||||
keepOpen: false,
|
||||
customEmojiTimeout: null,
|
||||
hideCustomEmojiInPicker: false,
|
||||
// Lazy-load only after the first time `showing` becomes true.
|
||||
contentLoaded: false,
|
||||
groupRefs: {},
|
||||
emojiRefs: {},
|
||||
filteredEmojiGroups: [],
|
||||
emojiSize: 0,
|
||||
width: 0
|
||||
}
|
||||
},
|
||||
|
|
@ -123,9 +131,28 @@ const EmojiPicker = {
|
|||
Popover
|
||||
},
|
||||
methods: {
|
||||
updateEmojiSize () {
|
||||
const css = window.getComputedStyle(this.$refs.popover.$el)
|
||||
const emojiSize = css.getPropertyValue('--emojiSize')
|
||||
const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '')
|
||||
const emojiSizeValue = Number(emojiSize.replace(/[^0-9,.]+/, ''))
|
||||
const fontSize = css.getPropertyValue('font-size').replace(/[^0-9,.]+/, '')
|
||||
|
||||
let emojiSizeReal
|
||||
if (emojiSizeUnit.endsWith('em')) {
|
||||
emojiSizeReal = emojiSizeValue * fontSize
|
||||
} else {
|
||||
emojiSizeReal = emojiSizeValue
|
||||
}
|
||||
|
||||
const fullEmojiSize = emojiSizeReal + (2 * 0.2 * fontSize)
|
||||
this.emojiSize = fullEmojiSize
|
||||
},
|
||||
showPicker () {
|
||||
this.$refs.popover.showPopover()
|
||||
this.onShowing()
|
||||
this.$nextTick(() => {
|
||||
this.onShowing()
|
||||
})
|
||||
},
|
||||
hidePicker () {
|
||||
this.$refs.popover.hidePopover()
|
||||
|
|
@ -153,7 +180,7 @@ const EmojiPicker = {
|
|||
if (!this.keepOpen) {
|
||||
this.$refs.popover.hidePopover()
|
||||
}
|
||||
this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen })
|
||||
this.$emit('emoji', { insertion: value, insertionUrl: emoji.imageUrl, keepOpen: this.keepOpen })
|
||||
},
|
||||
onScroll (startIndex, endIndex, visibleStartIndex, visibleEndIndex) {
|
||||
const target = this.$refs['emoji-groups'].$el
|
||||
|
|
@ -217,6 +244,7 @@ const EmojiPicker = {
|
|||
},
|
||||
onShowing () {
|
||||
const oldContentLoaded = this.contentLoaded
|
||||
this.updateEmojiSize()
|
||||
this.recalculateItemPerRow()
|
||||
this.$nextTick(() => {
|
||||
this.$refs.search.focus()
|
||||
|
|
@ -259,16 +287,20 @@ const EmojiPicker = {
|
|||
},
|
||||
computed: {
|
||||
minItemSize () {
|
||||
return this.emojiHeight
|
||||
return this.emojiSize
|
||||
},
|
||||
// used to watch it
|
||||
fontSize () {
|
||||
this.$nextTick(() => {
|
||||
this.updateEmojiSize()
|
||||
})
|
||||
return this.$store.getters.mergedConfig.fontSize
|
||||
},
|
||||
emojiHeight () {
|
||||
return 32 + 4
|
||||
},
|
||||
emojiWidth () {
|
||||
return 32 + 4
|
||||
return this.emojiSize
|
||||
},
|
||||
itemPerRow () {
|
||||
return this.width ? Math.floor(this.width / this.emojiWidth - 1) : 6
|
||||
return this.width ? Math.floor(this.width / this.emojiSize) : 6
|
||||
},
|
||||
activeGroupView () {
|
||||
return this.showingStickers ? '' : this.activeGroup
|
||||
|
|
@ -280,6 +312,9 @@ const EmojiPicker = {
|
|||
return 0
|
||||
},
|
||||
allCustomGroups () {
|
||||
if (this.hideCustomEmoji || this.hideCustomEmojiInPicker) {
|
||||
return {}
|
||||
}
|
||||
const emojis = this.$store.getters.groupedCustomEmojis
|
||||
if (emojis.unpacked) {
|
||||
emojis.unpacked.text = this.$t('emoji.unpacked')
|
||||
|
|
@ -342,6 +377,9 @@ const EmojiPicker = {
|
|||
|
||||
return emoji.displayText
|
||||
}
|
||||
},
|
||||
isInModal () {
|
||||
return this.popoversZLayer === 'modals'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,62 +1,55 @@
|
|||
@import "../../variables";
|
||||
|
||||
$emoji-picker-header-height: 36px;
|
||||
$emoji-picker-header-picture-width: 32px;
|
||||
$emoji-picker-header-picture-height: 32px;
|
||||
$emoji-picker-emoji-size: 32px;
|
||||
|
||||
.emoji-picker {
|
||||
--__emoji-picker-header: 2.2em;
|
||||
|
||||
width: 25em;
|
||||
max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: $fallback--bg;
|
||||
background-color: var(--popover, $fallback--bg);
|
||||
color: $fallback--link;
|
||||
color: var(--popoverText, $fallback--link);
|
||||
|
||||
--faint: var(--popoverFaintText, $fallback--faint);
|
||||
--faintLink: var(--popoverFaintLink, $fallback--faint);
|
||||
--lightText: var(--popoverLightText, $fallback--lightText);
|
||||
--icon: var(--popoverIcon, $fallback--icon);
|
||||
|
||||
&-header-image {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: $emoji-picker-header-picture-width;
|
||||
max-width: $emoji-picker-header-picture-width;
|
||||
height: $emoji-picker-header-picture-height;
|
||||
max-height: $emoji-picker-header-picture-height;
|
||||
width: var(--__emoji-picker-header);
|
||||
max-width: var(--__emoji-picker-header);
|
||||
height: var(--__emoji-picker-header);
|
||||
max-height: var(--__emoji-picker-header);
|
||||
|
||||
.still-image {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
width: var(--__emoji-picker-header);
|
||||
max-width: var(--__emoji-picker-header);
|
||||
height: var(--__emoji-picker-header);
|
||||
max-height: var(--__emoji-picker-header);
|
||||
object-fit: contain;
|
||||
|
||||
--_still_image-label-scale: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.keep-open,
|
||||
.too-many-emoji {
|
||||
padding: 7px;
|
||||
.too-many-emoji,
|
||||
.hide-custom-emoji {
|
||||
padding: 0.5em;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.hide-custom-emoji {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.too-many-emoji {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.keep-open-label {
|
||||
padding: 0 7px;
|
||||
padding: 0 0.5em;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.heading {
|
||||
display: flex;
|
||||
padding: 10px 7px 5px;
|
||||
padding: 0.7em 0.5em 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
|
|
@ -71,14 +64,14 @@ $emoji-picker-emoji-size: 32px;
|
|||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.additional-tabs {
|
||||
display: flex;
|
||||
border-left: 1px solid;
|
||||
border-left-color: $fallback--icon;
|
||||
border-left-color: var(--icon, $fallback--icon);
|
||||
padding-left: 7px;
|
||||
border-left-color: var(--border);
|
||||
padding-left: 0.5em;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
|
|
@ -87,30 +80,29 @@ $emoji-picker-emoji-size: 32px;
|
|||
flex-basis: auto;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
scrollbar-width: thin;
|
||||
|
||||
&-item {
|
||||
padding: 0 7px;
|
||||
padding: 0 0.5em;
|
||||
cursor: pointer;
|
||||
font-size: 1.85em;
|
||||
width: $emoji-picker-header-picture-width;
|
||||
max-width: $emoji-picker-header-picture-width;
|
||||
height: $emoji-picker-header-picture-height;
|
||||
max-height: $emoji-picker-header-picture-height;
|
||||
width: var(--__emoji-picker-header);
|
||||
max-width: var(--__emoji-picker-header);
|
||||
height: var(--__emoji-picker-header);
|
||||
max-height: var(--__emoji-picker-header);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.svg-inline--fa {
|
||||
font-size: 1.85em;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-bottom: 4px solid;
|
||||
|
||||
svg {
|
||||
color: $fallback--lightText;
|
||||
color: var(--lightText, $fallback--lightText);
|
||||
}
|
||||
&.toggled {
|
||||
border-bottom: 0.2em solid;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -137,7 +129,7 @@ $emoji-picker-emoji-size: 32px;
|
|||
|
||||
.emoji {
|
||||
&-search {
|
||||
padding: 5px;
|
||||
padding: 0.3em;
|
||||
flex: 0 0 auto;
|
||||
|
||||
input {
|
||||
|
|
@ -151,6 +143,7 @@ $emoji-picker-emoji-size: 32px;
|
|||
flex: 1 1 1px;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
scrollbar-gutter: stable both-edges;
|
||||
user-select: none;
|
||||
mask:
|
||||
linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
|
||||
|
|
@ -177,13 +170,13 @@ $emoji-picker-emoji-size: 32px;
|
|||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding-left: 5px;
|
||||
justify-content: left;
|
||||
|
||||
&-title {
|
||||
font-size: 0.85em;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding-left: 0.3em;
|
||||
|
||||
&.disabled {
|
||||
display: none;
|
||||
|
|
@ -192,24 +185,28 @@ $emoji-picker-emoji-size: 32px;
|
|||
}
|
||||
|
||||
&-item {
|
||||
width: $emoji-picker-emoji-size;
|
||||
height: $emoji-picker-emoji-size;
|
||||
width: var(--emoji-size);
|
||||
height: var(--emoji-size);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
line-height: $emoji-picker-emoji-size;
|
||||
line-height: var(--emoji-size);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 4px;
|
||||
margin: 0.2em;
|
||||
cursor: pointer;
|
||||
|
||||
.emoji-picker-emoji.-custom {
|
||||
object-fit: contain;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: var(--emoji-size);
|
||||
max-width: var(--emoji-size);
|
||||
height: var(--emoji-size);
|
||||
max-height: var(--emoji-size);
|
||||
|
||||
--_still_image-label-scale: 0.5;
|
||||
}
|
||||
|
||||
.emoji-picker-emoji.-unicode {
|
||||
font-size: 24px;
|
||||
font-size: 1.6em;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,24 +3,32 @@
|
|||
ref="popover"
|
||||
trigger="click"
|
||||
popover-class="emoji-picker popover-default"
|
||||
:trigger-attrs="{ 'aria-hidden': true, tabindex: -1 }"
|
||||
@show="onPopoverShown"
|
||||
@close="onPopoverClosed"
|
||||
>
|
||||
<template #content>
|
||||
<div class="heading">
|
||||
<!--
|
||||
Body scroll lock needs to be on every scrollable element on safari iOS.
|
||||
Here we tell it to enable scrolling for this element.
|
||||
See https://github.com/willmcpo/body-scroll-lock#vanilla-js
|
||||
-->
|
||||
<span
|
||||
ref="header"
|
||||
v-body-scroll-lock="isInModal"
|
||||
class="emoji-tabs"
|
||||
>
|
||||
<span
|
||||
v-for="group in filteredEmojiGroups"
|
||||
:ref="setGroupRef('group-header-' + group.id)"
|
||||
:key="group.id"
|
||||
class="emoji-tabs-item"
|
||||
class="button-unstyled emoji-tabs-item"
|
||||
:class="{
|
||||
active: activeGroupView === group.id
|
||||
toggled: activeGroupView === group.id
|
||||
}"
|
||||
:title="group.text"
|
||||
role="button"
|
||||
@click.prevent="highlight(group.id)"
|
||||
>
|
||||
<span
|
||||
|
|
@ -44,8 +52,8 @@
|
|||
class="additional-tabs"
|
||||
>
|
||||
<span
|
||||
class="stickers-tab-icon additional-tabs-item"
|
||||
:class="{active: showingStickers}"
|
||||
class="button-unstyled stickers-tab-icon additional-tabs-item"
|
||||
:class="{toggled: showingStickers}"
|
||||
:title="$t('emoji.stickers')"
|
||||
@click.prevent="toggleStickers"
|
||||
>
|
||||
|
|
@ -69,16 +77,19 @@
|
|||
ref="search"
|
||||
v-model="keyword"
|
||||
type="text"
|
||||
class="form-control"
|
||||
class="input form-control"
|
||||
:placeholder="$t('emoji.search_emoji')"
|
||||
@input="$event.target.composing = false"
|
||||
>
|
||||
</div>
|
||||
<!-- Enables scrolling for this element on safari iOS. See comments for header. -->
|
||||
<DynamicScroller
|
||||
ref="emoji-groups"
|
||||
v-body-scroll-lock="isInModal"
|
||||
class="emoji-groups"
|
||||
:class="groupsScrolledClass"
|
||||
:min-item-size="minItemSize"
|
||||
:buffer="minItemSize"
|
||||
:items="emojiItems"
|
||||
:emit-update="true"
|
||||
@update="onScroll"
|
||||
|
|
@ -107,6 +118,7 @@
|
|||
:key="group.id + emoji.displayText"
|
||||
:title="maybeLocalizedEmojiName(emoji)"
|
||||
class="emoji-item"
|
||||
role="button"
|
||||
@click.stop.prevent="onEmoji(emoji)"
|
||||
>
|
||||
<span
|
||||
|
|
@ -117,6 +129,7 @@
|
|||
v-else
|
||||
class="emoji-picker-emoji -custom"
|
||||
loading="lazy"
|
||||
:alt="maybeLocalizedEmojiName(emoji)"
|
||||
:src="emoji.imageUrl"
|
||||
:data-emoji-name="group.id + emoji.displayText"
|
||||
/>
|
||||
|
|
@ -130,6 +143,17 @@
|
|||
{{ $t('emoji.keep_open') }}
|
||||
</Checkbox>
|
||||
</div>
|
||||
<div
|
||||
v-if="!hideCustomEmoji"
|
||||
class="hide-custom-emoji"
|
||||
>
|
||||
<Checkbox
|
||||
v-model="hideCustomEmojiInPicker"
|
||||
@change="onShowing"
|
||||
>
|
||||
{{ $t('emoji.hide_custom_emoji') }}
|
||||
</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="showingStickers"
|
||||
|
|
|
|||
|
|
@ -1,5 +1,17 @@
|
|||
import UserAvatar from '../user_avatar/user_avatar.vue'
|
||||
import UserListPopover from '../user_list_popover/user_list_popover.vue'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faPlus,
|
||||
faMinus,
|
||||
faCheck
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faPlus,
|
||||
faMinus,
|
||||
faCheck
|
||||
)
|
||||
|
||||
const EMOJI_REACTION_COUNT_CUTOFF = 12
|
||||
|
||||
|
|
@ -33,6 +45,9 @@ const EmojiReactions = {
|
|||
},
|
||||
loggedIn () {
|
||||
return !!this.$store.state.users.currentUser
|
||||
},
|
||||
remoteInteractionLink () {
|
||||
return this.$store.getters.remoteInteractionLink({ statusId: this.status.id })
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -42,10 +57,10 @@ const EmojiReactions = {
|
|||
reactedWith (emoji) {
|
||||
return this.status.emoji_reactions.find(r => r.name === emoji).me
|
||||
},
|
||||
fetchEmojiReactionsByIfMissing () {
|
||||
async fetchEmojiReactionsByIfMissing () {
|
||||
const hasNoAccounts = this.status.emoji_reactions.find(r => !r.accounts)
|
||||
if (hasNoAccounts) {
|
||||
this.$store.dispatch('fetchEmojiReactionsBy', this.status.id)
|
||||
return await this.$store.dispatch('fetchEmojiReactionsBy', this.status.id)
|
||||
}
|
||||
},
|
||||
reactWith (emoji) {
|
||||
|
|
@ -54,14 +69,26 @@ const EmojiReactions = {
|
|||
unreact (emoji) {
|
||||
this.$store.dispatch('unreactWithEmoji', { id: this.status.id, emoji })
|
||||
},
|
||||
emojiOnClick (emoji, event) {
|
||||
async emojiOnClick (emoji, event) {
|
||||
if (!this.loggedIn) return
|
||||
|
||||
await this.fetchEmojiReactionsByIfMissing()
|
||||
if (this.reactedWith(emoji)) {
|
||||
this.unreact(emoji)
|
||||
} else {
|
||||
this.reactWith(emoji)
|
||||
}
|
||||
},
|
||||
counterTriggerAttrs (reaction) {
|
||||
return {
|
||||
class: [
|
||||
'btn',
|
||||
'button-default',
|
||||
'emoji-reaction-count-button',
|
||||
{ '-picked-reaction': this.reactedWith(reaction.name) }
|
||||
],
|
||||
'aria-label': this.$tc('status.reaction_count_label', reaction.count, { num: reaction.count })
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,64 @@
|
|||
<template>
|
||||
<div class="EmojiReactions">
|
||||
<UserListPopover
|
||||
<span
|
||||
v-for="(reaction) in emojiReactions"
|
||||
:key="reaction.name"
|
||||
:users="accountsForEmoji[reaction.name]"
|
||||
:key="reaction.url || reaction.name"
|
||||
class="emoji-reaction-container btn-group"
|
||||
>
|
||||
<button
|
||||
<component
|
||||
:is="loggedIn ? 'button' : 'a'"
|
||||
v-bind="!loggedIn ? { href: remoteInteractionLink } : {}"
|
||||
role="button"
|
||||
class="emoji-reaction btn button-default"
|
||||
:class="{ '-picked-reaction': reactedWith(reaction.name), 'not-clickable': !loggedIn }"
|
||||
:class="{ '-picked-reaction': reactedWith(reaction.name) }"
|
||||
:title="reaction.url ? reaction.name : undefined"
|
||||
:aria-pressed="reactedWith(reaction.name)"
|
||||
@click="emojiOnClick(reaction.name, $event)"
|
||||
@mouseenter="fetchEmojiReactionsByIfMissing()"
|
||||
>
|
||||
<span class="reaction-emoji">{{ reaction.name }}</span>
|
||||
<span>{{ reaction.count }}</span>
|
||||
</button>
|
||||
</UserListPopover>
|
||||
<span
|
||||
class="reaction-emoji"
|
||||
>
|
||||
<img
|
||||
v-if="reaction.url"
|
||||
:src="reaction.url"
|
||||
class="reaction-emoji-content"
|
||||
width="1em"
|
||||
>
|
||||
<span
|
||||
v-else
|
||||
class="reaction-emoji reaction-emoji-content"
|
||||
>{{ reaction.name }}</span>
|
||||
</span>
|
||||
<FALayers>
|
||||
<FAIcon
|
||||
v-if="reactedWith(reaction.name)"
|
||||
class="active-marker"
|
||||
transform="shrink-6 up-9"
|
||||
icon="check"
|
||||
/>
|
||||
<FAIcon
|
||||
v-if="!reactedWith(reaction.name)"
|
||||
class="focus-marker"
|
||||
transform="shrink-6 up-9"
|
||||
icon="plus"
|
||||
/>
|
||||
<FAIcon
|
||||
v-else
|
||||
class="focus-marker"
|
||||
transform="shrink-6 up-9"
|
||||
icon="minus"
|
||||
/>
|
||||
</FALayers>
|
||||
</component>
|
||||
<UserListPopover
|
||||
:users="accountsForEmoji[reaction.name]"
|
||||
class="emoji-reaction-popover"
|
||||
:trigger-attrs="counterTriggerAttrs(reaction)"
|
||||
@show="fetchEmojiReactionsByIfMissing()"
|
||||
>
|
||||
<span class="emoji-reaction-counts">{{ reaction.count }}</span>
|
||||
</UserListPopover>
|
||||
</span>
|
||||
<a
|
||||
v-if="tooManyReactions"
|
||||
class="emoji-reaction-expand faint"
|
||||
|
|
@ -28,44 +72,114 @@
|
|||
|
||||
<script src="./emoji_reactions.js"></script>
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
@import "../../mixins";
|
||||
|
||||
.EmojiReactions {
|
||||
display: flex;
|
||||
margin-top: 0.25em;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.emoji-reaction {
|
||||
padding: 0 0.5em;
|
||||
margin-right: 0.5em;
|
||||
--emoji-size: calc(var(--emojiSize, 1.25em) * var(--emojiReactionsScale, 1));
|
||||
|
||||
.emoji-reaction-container {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
margin-top: 0.5em;
|
||||
margin-right: 0.5em;
|
||||
|
||||
.emoji-reaction-popover {
|
||||
padding: 0;
|
||||
|
||||
.emoji-reaction-count-button {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
box-sizing: border-box;
|
||||
min-width: 2em;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&.-picked-reaction {
|
||||
border: 1px solid var(--accent);
|
||||
margin-right: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-reaction {
|
||||
padding-left: 0.5em;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
margin: 0;
|
||||
|
||||
.reaction-emoji {
|
||||
width: 1.25em;
|
||||
width: var(--emoji-size);
|
||||
height: var(--emoji-size);
|
||||
margin-right: 0.25em;
|
||||
line-height: var(--emoji-size);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.reaction-emoji-content {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
line-height: inherit;
|
||||
overflow: hidden;
|
||||
font-size: calc(var(--emoji-size) * 0.8);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.not-clickable {
|
||||
cursor: default;
|
||||
|
||||
&:hover {
|
||||
box-shadow: $fallback--buttonShadow;
|
||||
box-shadow: var(--buttonShadow);
|
||||
}
|
||||
.svg-inline--fa {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
&.-picked-reaction {
|
||||
border: 1px solid var(--accent, $fallback--link);
|
||||
border: 1px solid var(--accent);
|
||||
margin-left: -1px; // offset the border, can't use inset shadows either
|
||||
margin-right: calc(0.5em - 1px);
|
||||
margin-right: -1px;
|
||||
|
||||
.svg-inline--fa {
|
||||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
|
||||
@include unfocused-style {
|
||||
.focus-marker {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.active-marker {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
@include focused-style {
|
||||
.svg-inline--fa {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.focus-marker {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.active-marker {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import Popover from '../popover/popover.vue'
|
||||
import genRandomSeed from '../../services/random_seed/random_seed.service.js'
|
||||
import ConfirmModal from '../confirm_modal/confirm_modal.vue'
|
||||
import StatusBookmarkFolderMenu from '../status_bookmark_folder_menu/status_bookmark_folder_menu.vue'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faEllipsisH,
|
||||
|
|
@ -35,12 +37,14 @@ const ExtraButtons = {
|
|||
props: ['status'],
|
||||
components: {
|
||||
Popover,
|
||||
ConfirmModal
|
||||
ConfirmModal,
|
||||
StatusBookmarkFolderMenu
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
expanded: false,
|
||||
showingDeleteDialog: false
|
||||
showingDeleteDialog: false,
|
||||
randomSeed: genRandomSeed()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -143,6 +147,9 @@ const ExtraButtons = {
|
|||
canBookmark () {
|
||||
return !!this.currentUser
|
||||
},
|
||||
bookmarkFolders () {
|
||||
return this.$store.state.instance.pleromaBookmarkFoldersAvailable
|
||||
},
|
||||
statusLink () {
|
||||
return `${this.$store.state.instance.server}${this.$router.resolve({ name: 'conversation', params: { id: this.status.id } }).href}`
|
||||
},
|
||||
|
|
@ -152,6 +159,15 @@ const ExtraButtons = {
|
|||
editingAvailable () { return this.$store.state.instance.editingAvailable },
|
||||
shouldConfirmDelete () {
|
||||
return this.$store.getters.mergedConfig.modalOnDelete
|
||||
},
|
||||
triggerAttrs () {
|
||||
return {
|
||||
title: this.$t('status.more_actions'),
|
||||
id: `popup-trigger-${this.randomSeed}`,
|
||||
'aria-controls': `popup-menu-${this.randomSeed}`,
|
||||
'aria-expanded': this.expanded,
|
||||
'aria-haspopup': 'menu'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
<Popover
|
||||
class="ExtraButtons"
|
||||
trigger="click"
|
||||
:trigger-attrs="triggerAttrs"
|
||||
placement="top"
|
||||
:offset="{ y: 5 }"
|
||||
:bound-to="{ x: 'container' }"
|
||||
|
|
@ -10,10 +11,15 @@
|
|||
@close="onClose"
|
||||
>
|
||||
<template #content="{close}">
|
||||
<div class="dropdown-menu">
|
||||
<div
|
||||
:id="`popup-menu-${randomSeed}`"
|
||||
class="dropdown-menu"
|
||||
role="menu"
|
||||
>
|
||||
<button
|
||||
v-if="canMute && !status.thread_muted"
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
class="menu-item dropdown-item dropdown-item-icon"
|
||||
role="menuitem"
|
||||
@click.prevent="muteConversation"
|
||||
>
|
||||
<FAIcon
|
||||
|
|
@ -23,7 +29,8 @@
|
|||
</button>
|
||||
<button
|
||||
v-if="canMute && status.thread_muted"
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
class="menu-item dropdown-item dropdown-item-icon"
|
||||
role="menuitem"
|
||||
@click.prevent="unmuteConversation"
|
||||
>
|
||||
<FAIcon
|
||||
|
|
@ -33,7 +40,8 @@
|
|||
</button>
|
||||
<button
|
||||
v-if="!status.pinned && canPin"
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
class="menu-item dropdown-item dropdown-item-icon"
|
||||
role="menuitem"
|
||||
@click.prevent="pinStatus"
|
||||
@click="close"
|
||||
>
|
||||
|
|
@ -44,7 +52,8 @@
|
|||
</button>
|
||||
<button
|
||||
v-if="status.pinned && canPin"
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
class="menu-item dropdown-item dropdown-item-icon"
|
||||
role="menuitem"
|
||||
@click.prevent="unpinStatus"
|
||||
@click="close"
|
||||
>
|
||||
|
|
@ -56,7 +65,8 @@
|
|||
<template v-if="canBookmark">
|
||||
<button
|
||||
v-if="!status.bookmarked"
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
class="menu-item dropdown-item dropdown-item-icon"
|
||||
role="menuitem"
|
||||
@click.prevent="bookmarkStatus"
|
||||
@click="close"
|
||||
>
|
||||
|
|
@ -67,7 +77,8 @@
|
|||
</button>
|
||||
<button
|
||||
v-if="status.bookmarked"
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
class="menu-item dropdown-item dropdown-item-icon"
|
||||
role="menuitem"
|
||||
@click.prevent="unbookmarkStatus"
|
||||
@click="close"
|
||||
>
|
||||
|
|
@ -76,10 +87,15 @@
|
|||
icon="bookmark"
|
||||
/><span>{{ $t("status.unbookmark") }}</span>
|
||||
</button>
|
||||
<StatusBookmarkFolderMenu
|
||||
v-if="status.bookmarked && bookmarkFolders"
|
||||
:status="status"
|
||||
/>
|
||||
</template>
|
||||
<button
|
||||
v-if="ownStatus && editingAvailable"
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
class="menu-item dropdown-item dropdown-item-icon"
|
||||
role="menuitem"
|
||||
@click.prevent="editStatus"
|
||||
@click="close"
|
||||
>
|
||||
|
|
@ -90,7 +106,8 @@
|
|||
</button>
|
||||
<button
|
||||
v-if="isEdited && editingAvailable"
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
class="menu-item dropdown-item dropdown-item-icon"
|
||||
role="menuitem"
|
||||
@click.prevent="showStatusHistory"
|
||||
@click="close"
|
||||
>
|
||||
|
|
@ -101,7 +118,8 @@
|
|||
</button>
|
||||
<button
|
||||
v-if="canDelete"
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
class="menu-item dropdown-item dropdown-item-icon"
|
||||
role="menuitem"
|
||||
@click.prevent="deleteStatus"
|
||||
@click="close"
|
||||
>
|
||||
|
|
@ -111,7 +129,8 @@
|
|||
/><span>{{ $t("status.delete") }}</span>
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
class="menu-item dropdown-item dropdown-item-icon"
|
||||
role="menuitem"
|
||||
@click.prevent="copyLink"
|
||||
@click="close"
|
||||
>
|
||||
|
|
@ -122,7 +141,8 @@
|
|||
</button>
|
||||
<a
|
||||
v-if="!status.is_local"
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
class="menu-item dropdown-item dropdown-item-icon"
|
||||
role="menuitem"
|
||||
title="Source"
|
||||
:href="status.external_url"
|
||||
target="_blank"
|
||||
|
|
@ -133,7 +153,8 @@
|
|||
/><span>{{ $t("status.external_source") }}</span>
|
||||
</a>
|
||||
<button
|
||||
class="button-default dropdown-item dropdown-item-icon"
|
||||
class="menu-item dropdown-item dropdown-item-icon"
|
||||
role="menuitem"
|
||||
@click.prevent="reportStatus"
|
||||
@click="close"
|
||||
>
|
||||
|
|
@ -184,7 +205,6 @@
|
|||
<script src="./extra_buttons.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
@import "../../mixins";
|
||||
|
||||
.ExtraButtons {
|
||||
|
|
@ -194,8 +214,7 @@
|
|||
margin: -10px;
|
||||
|
||||
&:hover .svg-inline--fa {
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
48
src/components/extra_notifications/extra_notifications.js
Normal file
48
src/components/extra_notifications/extra_notifications.js
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
import { mapGetters } from 'vuex'
|
||||
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faUserPlus,
|
||||
faComments,
|
||||
faBullhorn
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faUserPlus,
|
||||
faComments,
|
||||
faBullhorn
|
||||
)
|
||||
|
||||
const ExtraNotifications = {
|
||||
computed: {
|
||||
shouldShowChats () {
|
||||
return this.mergedConfig.showExtraNotifications && this.mergedConfig.showChatsInExtraNotifications && this.unreadChatCount
|
||||
},
|
||||
shouldShowAnnouncements () {
|
||||
return this.mergedConfig.showExtraNotifications && this.mergedConfig.showAnnouncementsInExtraNotifications && this.unreadAnnouncementCount
|
||||
},
|
||||
shouldShowFollowRequests () {
|
||||
return this.mergedConfig.showExtraNotifications && this.mergedConfig.showFollowRequestsInExtraNotifications && this.followRequestCount
|
||||
},
|
||||
hasAnythingToShow () {
|
||||
return this.shouldShowChats || this.shouldShowAnnouncements || this.shouldShowFollowRequests
|
||||
},
|
||||
shouldShowCustomizationTip () {
|
||||
return this.mergedConfig.showExtraNotificationsTip && this.hasAnythingToShow
|
||||
},
|
||||
currentUser () {
|
||||
return this.$store.state.users.currentUser
|
||||
},
|
||||
...mapGetters(['unreadChatCount', 'unreadAnnouncementCount', 'followRequestCount', 'mergedConfig'])
|
||||
},
|
||||
methods: {
|
||||
openNotificationSettings () {
|
||||
return this.$store.dispatch('openSettingsModalTab', 'notifications')
|
||||
},
|
||||
dismissConfigurationTip () {
|
||||
return this.$store.dispatch('setOption', { name: 'showExtraNotificationsTip', value: false })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default ExtraNotifications
|
||||
110
src/components/extra_notifications/extra_notifications.vue
Normal file
110
src/components/extra_notifications/extra_notifications.vue
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
<template>
|
||||
<div class="ExtraNotifications">
|
||||
<div
|
||||
v-if="shouldShowChats"
|
||||
class="notification unseen"
|
||||
>
|
||||
<div class="notification-overlay" />
|
||||
<router-link
|
||||
class="button-unstyled -link extra-notification"
|
||||
:to="{ name: 'chats', params: { username: currentUser.screen_name } }"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 icon"
|
||||
icon="comments"
|
||||
/>
|
||||
{{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }}
|
||||
</router-link>
|
||||
</div>
|
||||
<div
|
||||
v-if="shouldShowAnnouncements"
|
||||
class="notification unseen"
|
||||
>
|
||||
<div class="notification-overlay" />
|
||||
<router-link
|
||||
class="button-unstyled -link extra-notification"
|
||||
:to="{ name: 'announcements' }"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 icon"
|
||||
icon="bullhorn"
|
||||
/>
|
||||
{{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }}
|
||||
</router-link>
|
||||
</div>
|
||||
<div
|
||||
v-if="shouldShowFollowRequests"
|
||||
class="notification unseen"
|
||||
>
|
||||
<div class="notification-overlay" />
|
||||
<router-link
|
||||
class="button-unstyled -link extra-notification"
|
||||
:to="{ name: 'friend-requests' }"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 icon"
|
||||
icon="user-plus"
|
||||
/>
|
||||
{{ $tc('notifications.unread_follow_requests', followRequestCount, { num: followRequestCount }) }}
|
||||
</router-link>
|
||||
</div>
|
||||
<i18n-t
|
||||
v-if="shouldShowCustomizationTip"
|
||||
tag="span"
|
||||
class="notification tip extra-notification"
|
||||
keypath="notifications.configuration_tip"
|
||||
>
|
||||
<template #theSettings>
|
||||
<button
|
||||
class="button-unstyled -link"
|
||||
@click="openNotificationSettings"
|
||||
>
|
||||
{{ $t('notifications.configuration_tip_settings') }}
|
||||
</button>
|
||||
</template>
|
||||
<template #dismiss>
|
||||
<button
|
||||
class="button-unstyled -link"
|
||||
@click="dismissConfigurationTip"
|
||||
>
|
||||
{{ $t('notifications.configuration_tip_dismiss') }}
|
||||
</button>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./extra_notifications.js" />
|
||||
|
||||
<style lang="scss">
|
||||
.ExtraNotifications {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
.notification {
|
||||
width: 100%;
|
||||
border-bottom: 1px solid;
|
||||
border-color: var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.extra-notification {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.tip {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -38,13 +38,20 @@
|
|||
class="button-unstyled interactive"
|
||||
target="_blank"
|
||||
role="button"
|
||||
:title="$t('tool_tip.favorite')"
|
||||
:href="remoteInteractionLink"
|
||||
>
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
:title="$t('tool_tip.favorite')"
|
||||
:icon="['far', 'star']"
|
||||
/>
|
||||
<FALayers class="fa-scale-110 fa-old-padding-layer">
|
||||
<FAIcon
|
||||
class="fa-scale-110"
|
||||
:icon="['far', 'star']"
|
||||
/>
|
||||
<FAIcon
|
||||
class="focus-marker"
|
||||
transform="shrink-6 up-9 right-12"
|
||||
icon="plus"
|
||||
/>
|
||||
</FALayers>
|
||||
</a>
|
||||
<span
|
||||
v-if="!mergedConfig.hidePostStats && status.fave_num > 0"
|
||||
|
|
@ -58,7 +65,6 @@
|
|||
<script src="./favorite_button.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
@import "../../mixins";
|
||||
|
||||
.FavoriteButton {
|
||||
|
|
@ -81,8 +87,7 @@
|
|||
|
||||
&:hover .svg-inline--fa,
|
||||
&.-favorited .svg-inline--fa {
|
||||
color: $fallback--cOrange;
|
||||
color: var(--cOrange, $fallback--cOrange);
|
||||
color: var(--cOrange);
|
||||
}
|
||||
|
||||
@include unfocused-style {
|
||||
|
|
|
|||
|
|
@ -42,8 +42,6 @@
|
|||
<script src="./flash.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.Flash {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,63 +1,59 @@
|
|||
import { set } from 'lodash'
|
||||
import Select from '../select/select.vue'
|
||||
import Checkbox from 'src/components/checkbox/checkbox.vue'
|
||||
import Popover from 'src/components/popover/popover.vue'
|
||||
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faExclamationTriangle,
|
||||
faKeyboard,
|
||||
faFont
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faExclamationTriangle,
|
||||
faKeyboard,
|
||||
faFont
|
||||
)
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Select
|
||||
Select,
|
||||
Checkbox,
|
||||
Popover
|
||||
},
|
||||
props: [
|
||||
'name', 'label', 'modelValue', 'fallback', 'options', 'no-inherit'
|
||||
],
|
||||
mounted () {
|
||||
this.$store.dispatch('queryLocalFonts')
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
data () {
|
||||
return {
|
||||
lValue: this.modelValue,
|
||||
manualEntry: false,
|
||||
availableOptions: [
|
||||
this.noInherit ? '' : 'inherit',
|
||||
'custom',
|
||||
...(this.options || []),
|
||||
'serif',
|
||||
'sans-serif',
|
||||
'monospace',
|
||||
'sans-serif'
|
||||
...(this.options || [])
|
||||
].filter(_ => _)
|
||||
}
|
||||
},
|
||||
beforeUpdate () {
|
||||
this.lValue = this.modelValue
|
||||
methods: {
|
||||
toggleManualEntry () {
|
||||
this.manualEntry = !this.manualEntry
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
present () {
|
||||
return typeof this.lValue !== 'undefined'
|
||||
return typeof this.modelValue !== 'undefined'
|
||||
},
|
||||
dValue () {
|
||||
return this.lValue || this.fallback || {}
|
||||
localFontsList () {
|
||||
return this.$store.state.interface.localFonts
|
||||
},
|
||||
family: {
|
||||
get () {
|
||||
return this.dValue.family
|
||||
},
|
||||
set (v) {
|
||||
set(this.lValue, 'family', v)
|
||||
this.$emit('update:modelValue', this.lValue)
|
||||
}
|
||||
},
|
||||
isCustom () {
|
||||
return this.preset === 'custom'
|
||||
},
|
||||
preset: {
|
||||
get () {
|
||||
if (this.family === 'serif' ||
|
||||
this.family === 'sans-serif' ||
|
||||
this.family === 'monospace' ||
|
||||
this.family === 'inherit') {
|
||||
return this.family
|
||||
} else {
|
||||
return 'custom'
|
||||
}
|
||||
},
|
||||
set (v) {
|
||||
this.family = v === 'custom' ? '' : v
|
||||
}
|
||||
localFontsSize () {
|
||||
return this.$store.state.interface.localFonts?.length
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,73 +1,146 @@
|
|||
<template>
|
||||
<div
|
||||
class="font-control style-control"
|
||||
class="font-control"
|
||||
:class="{ custom: isCustom }"
|
||||
>
|
||||
<label
|
||||
:id="name + '-label'"
|
||||
:for="preset === 'custom' ? name : name + '-font-switcher'"
|
||||
class="label"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
<input
|
||||
{{ ' ' }}
|
||||
<Checkbox
|
||||
v-if="typeof fallback !== 'undefined'"
|
||||
:id="name + '-o'"
|
||||
class="opt exlcude-disabled"
|
||||
type="checkbox"
|
||||
:checked="present"
|
||||
:modelValue="present"
|
||||
@change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
|
||||
>
|
||||
<label
|
||||
v-if="typeof fallback !== 'undefined'"
|
||||
class="opt-l"
|
||||
:for="name + '-o'"
|
||||
/>
|
||||
{{ ' ' }}
|
||||
<Select
|
||||
:id="name + '-font-switcher'"
|
||||
v-model="preset"
|
||||
:disabled="!present"
|
||||
class="font-switcher"
|
||||
>
|
||||
<option
|
||||
v-for="option in availableOptions"
|
||||
:key="option"
|
||||
:value="option"
|
||||
{{ $t('settings.style.themes3.define') }}
|
||||
</Checkbox>
|
||||
<p v-if="modelValue?.family">
|
||||
<label
|
||||
v-if="manualEntry"
|
||||
:id="name + '-label'"
|
||||
:for="preset === 'custom' ? name : name + '-font-switcher'"
|
||||
class="label"
|
||||
>
|
||||
{{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
|
||||
</option>
|
||||
</Select>
|
||||
<input
|
||||
v-if="isCustom"
|
||||
:id="name"
|
||||
v-model="family"
|
||||
class="custom-font"
|
||||
type="text"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="settings.style.themes3.font.entry"
|
||||
tag="span"
|
||||
>
|
||||
<template #fontFamily>
|
||||
<code>font-family</code>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</label>
|
||||
<label
|
||||
v-else
|
||||
:id="name + '-label'"
|
||||
:for="preset === 'custom' ? name : name + '-font-switcher'"
|
||||
class="label"
|
||||
>
|
||||
{{ $t('settings.style.themes3.font.select') }}
|
||||
</label>
|
||||
{{ ' ' }}
|
||||
<span
|
||||
v-if="manualEntry"
|
||||
class="btn-group"
|
||||
>
|
||||
<button
|
||||
class="btn button-default"
|
||||
@click="toggleManualEntry"
|
||||
:title="$t('settings.style.themes3.font.lookup_local_fonts')"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
icon="font"
|
||||
/>
|
||||
</button>
|
||||
<input
|
||||
:id="name"
|
||||
:model-value="modelValue.family"
|
||||
class="input custom-font"
|
||||
type="text"
|
||||
@update:modelValue="$emit('update:modelValue', { ...(modelValue || {}), family: $event.target.value })"
|
||||
>
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="btn-group"
|
||||
>
|
||||
<button
|
||||
class="btn button-default"
|
||||
@click="toggleManualEntry"
|
||||
:title="$t('settings.style.themes3.font.enter_manually')"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
icon="keyboard"
|
||||
/>
|
||||
</button>
|
||||
<Select
|
||||
:id="name + '-local-font-switcher'"
|
||||
:model-value="modelValue?.family"
|
||||
class="custom-font"
|
||||
@update:modelValue="v => $emit('update:modelValue', { ...(modelValue || {}), family: v })"
|
||||
>
|
||||
<optgroup
|
||||
:label="$t('settings.style.themes3.font.group-builtin')"
|
||||
>
|
||||
<option
|
||||
v-for="option in availableOptions"
|
||||
:key="option"
|
||||
:value="option"
|
||||
:style="{ fontFamily: option === 'inherit' ? null : option }"
|
||||
>
|
||||
{{ $t('settings.style.themes3.font.builtin.' + option) }}
|
||||
</option>
|
||||
</optgroup>
|
||||
<optgroup
|
||||
v-if="localFontsSize > 0"
|
||||
:label="$t('settings.style.themes3.font.group-local')"
|
||||
>
|
||||
<option
|
||||
v-for="option in localFontsList"
|
||||
:key="option"
|
||||
:value="option"
|
||||
:style="{ fontFamily: option }"
|
||||
>
|
||||
{{ option }}
|
||||
</option>
|
||||
</optgroup>
|
||||
<optgroup
|
||||
v-else
|
||||
:label="$t('settings.style.themes3.font.group-local')"
|
||||
>
|
||||
<option disabled>
|
||||
{{ $t('settings.style.themes3.font.local-unavailable1') }}
|
||||
</option>
|
||||
<option disabled>
|
||||
{{ $t('settings.style.themes3.font.local-unavailable2') }}
|
||||
</option>
|
||||
</optgroup>
|
||||
</Select>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./font_control.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.font-control {
|
||||
input.custom-font {
|
||||
min-width: 10em;
|
||||
}
|
||||
|
||||
&.custom {
|
||||
/* TODO Should make proper joiners... */
|
||||
.font-switcher {
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.custom-font {
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
.custom-font {
|
||||
min-width: 20em;
|
||||
max-width: 20em;
|
||||
}
|
||||
}
|
||||
|
||||
.invalid-tooltip {
|
||||
margin: 0.5em 1em;
|
||||
min-width: 10em;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
40
src/components/fun_text.style.js
Normal file
40
src/components/fun_text.style.js
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
export default {
|
||||
name: 'FunText',
|
||||
selector: '/*fun-text*/',
|
||||
virtual: true,
|
||||
variants: {
|
||||
greentext: '.greentext',
|
||||
cyantext: '.cyantext'
|
||||
},
|
||||
states: {
|
||||
faint: '.faint'
|
||||
},
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
textColor: '--text',
|
||||
textAuto: 'preserve'
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['faint'],
|
||||
directives: {
|
||||
textOpacity: 0.5
|
||||
}
|
||||
},
|
||||
{
|
||||
variant: 'greentext',
|
||||
directives: {
|
||||
textColor: '--cGreen',
|
||||
textAuto: 'preserve'
|
||||
}
|
||||
},
|
||||
{
|
||||
variant: 'cyantext',
|
||||
directives: {
|
||||
textColor: '--cBlue',
|
||||
textAuto: 'preserve'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -87,8 +87,6 @@
|
|||
<script src='./gallery.js'></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.Gallery {
|
||||
.gallery-rows {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
v-for="(notice, index) in notices"
|
||||
:key="index"
|
||||
class="alert global-notice"
|
||||
:class="{ ['global-' + notice.level]: true }"
|
||||
:class="{ [notice.level]: true }"
|
||||
>
|
||||
<div class="notice-message">
|
||||
{{ $t(notice.messageKey, notice.messageArgs) }}
|
||||
|
|
@ -25,14 +25,12 @@
|
|||
<script src="./global_notice_list.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.global-notice-list {
|
||||
position: fixed;
|
||||
top: calc(var(--navbar-height) + 0.5em);
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
z-index: var(--ZI_navbar_popovers);
|
||||
z-index: var(--ZI_modals_popovers);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -52,48 +50,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.global-error {
|
||||
background-color: var(--alertPopupError, $fallback--cRed);
|
||||
color: var(--alertPopupErrorText, $fallback--text);
|
||||
|
||||
.svg-inline--fa {
|
||||
color: var(--alertPopupErrorText, $fallback--text);
|
||||
}
|
||||
}
|
||||
|
||||
.global-warning {
|
||||
background-color: var(--alertPopupWarning, $fallback--cOrange);
|
||||
color: var(--alertPopupWarningText, $fallback--text);
|
||||
|
||||
.svg-inline--fa {
|
||||
color: var(--alertPopupWarningText, $fallback--text);
|
||||
}
|
||||
}
|
||||
|
||||
.global-success {
|
||||
background-color: var(--alertPopupSuccess, $fallback--cGreen);
|
||||
color: var(--alertPopupSuccessText, $fallback--text);
|
||||
|
||||
.svg-inline--fa {
|
||||
color: var(--alertPopupSuccessText, $fallback--text);
|
||||
}
|
||||
}
|
||||
|
||||
.global-info {
|
||||
background-color: var(--alertPopupNeutral, $fallback--fg);
|
||||
color: var(--alertPopupNeutralText, $fallback--text);
|
||||
|
||||
.svg-inline--fa {
|
||||
color: var(--alertPopupNeutralText, $fallback--text);
|
||||
}
|
||||
}
|
||||
|
||||
.close-notice {
|
||||
padding-right: 0.2em;
|
||||
|
||||
.svg-inline--fa:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
14
src/components/icon.style.js
Normal file
14
src/components/icon.style.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
export default {
|
||||
name: 'Icon',
|
||||
virtual: true,
|
||||
selector: '.svg-inline--fa',
|
||||
defaultRules: [
|
||||
{
|
||||
component: 'Icon',
|
||||
directives: {
|
||||
textColor: '$blend(--stack, 0.5, --parent--text)',
|
||||
textAuto: 'no-auto'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
<input
|
||||
ref="input"
|
||||
type="file"
|
||||
class="image-cropper-img-input"
|
||||
class="input image-cropper-img-input"
|
||||
:accept="mimes"
|
||||
>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<form>
|
||||
<input
|
||||
ref="input"
|
||||
class="input"
|
||||
type="file"
|
||||
@change="change"
|
||||
>
|
||||
|
|
|
|||
89
src/components/input.style.js
Normal file
89
src/components/input.style.js
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
const hoverGlow = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
blur: 4,
|
||||
spread: 0,
|
||||
color: '--text',
|
||||
alpha: 1
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'Input',
|
||||
selector: '.input',
|
||||
states: {
|
||||
hover: ':hover:not(.disabled)',
|
||||
focused: ':focus-within',
|
||||
disabled: '.disabled'
|
||||
},
|
||||
variants: {
|
||||
checkbox: '.-checkbox',
|
||||
radio: '.-radio'
|
||||
},
|
||||
validInnerComponents: [
|
||||
'Text',
|
||||
'Icon'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
component: 'Root',
|
||||
directives: {
|
||||
'--defaultInputBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2), $borderSide(#000000, top, 0.2)'
|
||||
}
|
||||
},
|
||||
{
|
||||
variant: 'checkbox',
|
||||
directives: {
|
||||
roundness: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
directives: {
|
||||
'--font': 'generic | inherit',
|
||||
background: '--fg, -5',
|
||||
roundness: 3,
|
||||
shadow: [{
|
||||
x: 0,
|
||||
y: 0,
|
||||
blur: 2,
|
||||
spread: 0,
|
||||
color: '#000000',
|
||||
alpha: 1
|
||||
}, '--defaultInputBevel']
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['hover'],
|
||||
directives: {
|
||||
shadow: [hoverGlow, '--defaultInputBevel']
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['disabled'],
|
||||
directives: {
|
||||
background: '--parent'
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Text',
|
||||
parent: {
|
||||
component: 'Input',
|
||||
state: ['disabled']
|
||||
},
|
||||
directives: {
|
||||
textOpacity: 0.25,
|
||||
textOpacityMode: 'blend'
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Icon',
|
||||
parent: {
|
||||
component: 'Input',
|
||||
state: ['disabled']
|
||||
},
|
||||
directives: {
|
||||
textOpacity: 0.25,
|
||||
textOpacityMode: 'blend'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@ import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
|
|||
|
||||
const tabModeDict = {
|
||||
mentions: ['mention'],
|
||||
statuses: ['status'],
|
||||
'likes+repeats': ['repeat', 'like'],
|
||||
follows: ['follow'],
|
||||
reactions: ['pleroma:emoji_reaction'],
|
||||
|
|
|
|||
|
|
@ -10,9 +10,13 @@
|
|||
:on-switch="onModeSwitch"
|
||||
>
|
||||
<span
|
||||
key="mentions"
|
||||
key="statuses"
|
||||
:label="$t('nav.mentions')"
|
||||
/>
|
||||
<span
|
||||
key="statuses"
|
||||
:label="$t('interactions.statuses')"
|
||||
/>
|
||||
<span
|
||||
key="likes+repeats"
|
||||
:label="$t('interactions.favs_repeats')"
|
||||
|
|
@ -39,6 +43,7 @@
|
|||
<Notifications
|
||||
ref="notifications"
|
||||
:no-heading="true"
|
||||
:no-extra="true"
|
||||
:minimal-mode="true"
|
||||
:filter-mode="filterMode"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,9 @@
|
|||
<button
|
||||
class="button-default btn"
|
||||
@click="addLanguage"
|
||||
>{{ $t('settings.add_language') }}</button>
|
||||
>
|
||||
{{ $t('settings.add_language') }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -102,8 +104,6 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.interface-language-switcher {
|
||||
.language-select {
|
||||
margin-right: 1em;
|
||||
|
|
|
|||
|
|
@ -33,8 +33,6 @@
|
|||
<script src="./link-preview.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.link-preview-card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -51,8 +49,7 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: $fallback--attachmentRadius;
|
||||
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
|
||||
border-radius: var(--roundness);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -82,13 +79,10 @@
|
|||
margin: 2em 0;
|
||||
}
|
||||
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
color: var(--text);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: $fallback--attachmentRadius;
|
||||
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
|
||||
border-color: $fallback--border;
|
||||
border-color: var(--border, $fallback--border);
|
||||
border-radius: var(--roundness);
|
||||
border-color: var(--border);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
24
src/components/link.style.js
Normal file
24
src/components/link.style.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
export default {
|
||||
name: 'Link',
|
||||
selector: 'a',
|
||||
virtual: true,
|
||||
states: {
|
||||
faint: '.faint'
|
||||
},
|
||||
defaultRules: [
|
||||
{
|
||||
component: 'Link',
|
||||
directives: {
|
||||
textColor: '--link'
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Link',
|
||||
state: ['faint'],
|
||||
directives: {
|
||||
textOpacity: 0.5,
|
||||
textOpacityMode: 'fake'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,9 +1,14 @@
|
|||
<template>
|
||||
<div class="list">
|
||||
<div
|
||||
class="list"
|
||||
role="list"
|
||||
>
|
||||
<div
|
||||
v-for="item in items"
|
||||
:key="getKey(item)"
|
||||
class="list-item"
|
||||
:class="[getClass(item), nonInteractive ? '-non-interactive' : '']"
|
||||
role="listitem"
|
||||
>
|
||||
<slot
|
||||
name="item"
|
||||
|
|
@ -29,24 +34,15 @@ export default {
|
|||
getKey: {
|
||||
type: Function,
|
||||
default: item => item.id
|
||||
},
|
||||
getClass: {
|
||||
type: Function,
|
||||
default: item => ''
|
||||
},
|
||||
nonInteractive: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.list {
|
||||
&-item:not(:last-child) {
|
||||
border-bottom: 1px solid;
|
||||
border-bottom-color: $fallback--border;
|
||||
border-bottom-color: var(--border, $fallback--border);
|
||||
}
|
||||
|
||||
&-empty-content {
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
48
src/components/list/list_item.style.js
Normal file
48
src/components/list/list_item.style.js
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
export default {
|
||||
name: 'ListItem',
|
||||
selector: '.list-item',
|
||||
states: {
|
||||
active: '.-active',
|
||||
hover: ':hover:not(.-non-interactive)'
|
||||
},
|
||||
validInnerComponents: [
|
||||
'Text',
|
||||
'Link',
|
||||
'Icon',
|
||||
'Border',
|
||||
'Button',
|
||||
'ButtonUnstyled',
|
||||
'RichContent',
|
||||
'Input',
|
||||
'Avatar'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
background: '--bg',
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['active'],
|
||||
directives: {
|
||||
background: '--inheritedBackground, 10',
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['hover'],
|
||||
directives: {
|
||||
background: '--inheritedBackground, 10',
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['hover', 'active'],
|
||||
directives: {
|
||||
background: '--inheritedBackground, 20',
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -21,8 +21,6 @@
|
|||
<script src="./lists_card.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.list-card {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -35,18 +33,6 @@
|
|||
.button-list-edit {
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
color: $fallback--link;
|
||||
color: var(--link, $fallback--link);
|
||||
|
||||
&:hover {
|
||||
background-color: $fallback--lightBg;
|
||||
background-color: var(--selectedMenu, $fallback--lightBg);
|
||||
color: $fallback--link;
|
||||
color: var(--selectedMenuText, $fallback--link);
|
||||
|
||||
--faint: var(--selectedMenuFaintText, $fallback--faint);
|
||||
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
|
||||
--lightText: var(--selectedMenuLightText, $fallback--lightText);
|
||||
}
|
||||
color: var(--link);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@
|
|||
id="list-edit-title"
|
||||
ref="title"
|
||||
v-model="titleDraft"
|
||||
class="input"
|
||||
>
|
||||
<button
|
||||
v-if="id"
|
||||
|
|
@ -164,8 +165,6 @@
|
|||
<script src="./lists_edit.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.ListEdit {
|
||||
--panel-body-padding: 0.5em;
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
<input
|
||||
ref="search"
|
||||
v-model="query"
|
||||
class="input"
|
||||
:placeholder="$t('lists.search')"
|
||||
@input="onInput"
|
||||
>
|
||||
|
|
@ -27,8 +28,6 @@
|
|||
|
||||
<script src="./lists_user_search.js"></script>
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.ListsUserSearch {
|
||||
.input-wrap {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
id="username"
|
||||
v-model="user.username"
|
||||
:disabled="loggingIn"
|
||||
class="form-control"
|
||||
class="input form-control"
|
||||
:placeholder="$t('login.placeholder')"
|
||||
>
|
||||
</div>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
ref="passwordInput"
|
||||
v-model="user.password"
|
||||
:disabled="loggingIn"
|
||||
class="form-control"
|
||||
class="input form-control"
|
||||
type="password"
|
||||
>
|
||||
</div>
|
||||
|
|
@ -93,8 +93,6 @@
|
|||
<script src="./login_form.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.login-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -23,6 +23,11 @@ const mediaUpload = {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
onClick () {
|
||||
if (this.uploadReady) {
|
||||
this.$refs.input.click()
|
||||
}
|
||||
},
|
||||
uploadFile (file) {
|
||||
const self = this
|
||||
const store = this.$store
|
||||
|
|
@ -69,10 +74,15 @@ const mediaUpload = {
|
|||
this.multiUpload(target.files)
|
||||
}
|
||||
},
|
||||
props: [
|
||||
'dropFiles',
|
||||
'disabled'
|
||||
],
|
||||
props: {
|
||||
dropFiles: Object,
|
||||
disabled: Boolean,
|
||||
normalButton: Boolean,
|
||||
acceptTypes: {
|
||||
type: String,
|
||||
default: '*/*'
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
dropFiles: function (fileInfos) {
|
||||
if (!this.uploading) {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
<template>
|
||||
<label
|
||||
<button
|
||||
class="media-upload"
|
||||
:class="{ disabled: disabled }"
|
||||
:class="[normalButton ? 'button-default btn' : 'button-unstyled', { disabled }]"
|
||||
:title="$t('tool_tip.media_upload')"
|
||||
@click="onClick"
|
||||
>
|
||||
<FAIcon
|
||||
v-if="uploading"
|
||||
|
|
@ -15,27 +16,33 @@
|
|||
class="new-icon"
|
||||
icon="upload"
|
||||
/>
|
||||
<template v-if="normalButton">
|
||||
{{ ' ' }}
|
||||
{{ uploading ? $t('general.loading') : $t('tool_tip.media_upload') }}
|
||||
</template>
|
||||
<input
|
||||
v-if="uploadReady"
|
||||
ref="input"
|
||||
class="hidden-input-file"
|
||||
:disabled="disabled"
|
||||
type="file"
|
||||
multiple="true"
|
||||
:accept="acceptTypes"
|
||||
@change="change"
|
||||
>
|
||||
</label>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script src="./media_upload.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.media-upload {
|
||||
cursor: pointer; // We use <label> for interactivity... i wonder if it's fine
|
||||
|
||||
.hidden-input-file {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
label.media-upload {
|
||||
cursor: pointer; // We use <label> for interactivity... i wonder if it's fine
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,7 @@
|
|||
@import "../../variables";
|
||||
|
||||
.MentionLink {
|
||||
position: relative;
|
||||
white-space: normal;
|
||||
display: inline;
|
||||
color: var(--link);
|
||||
word-break: normal;
|
||||
|
||||
& .new,
|
||||
|
|
@ -14,7 +11,7 @@
|
|||
}
|
||||
|
||||
.mention-avatar {
|
||||
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
|
||||
border-radius: var(--roundness);
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
vertical-align: middle;
|
||||
|
|
@ -61,8 +58,10 @@
|
|||
}
|
||||
|
||||
&.-has-selection {
|
||||
color: var(--alertNeutralText, $fallback--text);
|
||||
background-color: var(--alertNeutral, $fallback--fg);
|
||||
--color: var(--selectionText);
|
||||
--link: var(--selectionText);
|
||||
|
||||
background-color: var(--selectionBackground);
|
||||
}
|
||||
|
||||
.at {
|
||||
|
|
@ -102,7 +101,7 @@
|
|||
}
|
||||
|
||||
.serverName.-faded {
|
||||
color: var(--faintLink, $fallback--link);
|
||||
color: var(--linkFaint);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
:class="classnames"
|
||||
>
|
||||
<a
|
||||
class="short button-unstyled"
|
||||
class="short"
|
||||
:class="{ '-with-tooltip': shouldShowTooltip }"
|
||||
:href="url"
|
||||
@click.prevent="onClick"
|
||||
|
|
|
|||
|
|
@ -22,13 +22,13 @@
|
|||
/>
|
||||
</span><button
|
||||
v-if="!expanded"
|
||||
class="button-unstyled showMoreLess"
|
||||
class="button-unstyled -link showMoreLess"
|
||||
@click="toggleShowMore"
|
||||
>
|
||||
{{ $t('status.plus_more', { number: extraMentions.length }) }}
|
||||
</button><button
|
||||
v-if="expanded"
|
||||
class="button-unstyled showMoreLess"
|
||||
class="button-unstyled -link showMoreLess"
|
||||
@click="toggleShowMore"
|
||||
>
|
||||
{{ $t('general.show_less') }}
|
||||
|
|
|
|||
90
src/components/menu_item.style.js
Normal file
90
src/components/menu_item.style.js
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
export default {
|
||||
name: 'MenuItem',
|
||||
selector: '.menu-item',
|
||||
validInnerComponents: [
|
||||
'Text',
|
||||
'Icon',
|
||||
'Input',
|
||||
'Border',
|
||||
'ButtonUnstyled',
|
||||
'Badge',
|
||||
'Avatar'
|
||||
],
|
||||
states: {
|
||||
hover: ':hover',
|
||||
active: '.-active'
|
||||
},
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
background: '--bg',
|
||||
opacity: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['hover'],
|
||||
directives: {
|
||||
background: '$mod(--bg, 5)',
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['active'],
|
||||
directives: {
|
||||
background: '$mod(--bg, 10)',
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
state: ['active', 'hover'],
|
||||
directives: {
|
||||
background: '$mod(--bg, 15)',
|
||||
opacity: 1
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Text',
|
||||
parent: {
|
||||
component: 'MenuItem',
|
||||
state: ['hover']
|
||||
},
|
||||
directives: {
|
||||
textColor: '--link',
|
||||
textAuto: 'no-preserve'
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Text',
|
||||
parent: {
|
||||
component: 'MenuItem',
|
||||
state: ['active']
|
||||
},
|
||||
directives: {
|
||||
textColor: '--link',
|
||||
textAuto: 'no-preserve'
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Icon',
|
||||
parent: {
|
||||
component: 'MenuItem',
|
||||
state: ['active']
|
||||
},
|
||||
directives: {
|
||||
textColor: '--link',
|
||||
textAuto: 'no-preserve'
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'Icon',
|
||||
parent: {
|
||||
component: 'MenuItem',
|
||||
state: ['hover']
|
||||
},
|
||||
directives: {
|
||||
textColor: '--link',
|
||||
textAuto: 'no-preserve'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
<input
|
||||
id="code"
|
||||
v-model="code"
|
||||
class="form-control"
|
||||
class="input form-control"
|
||||
>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<input
|
||||
id="code"
|
||||
v-model="code"
|
||||
class="form-control"
|
||||
class="input form-control"
|
||||
>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
41
src/components/mobile_drawer.style.js
Normal file
41
src/components/mobile_drawer.style.js
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
export default {
|
||||
name: 'MobileDrawer',
|
||||
selector: '.mobile-drawer',
|
||||
validInnerComponents: [
|
||||
'Text',
|
||||
'Link',
|
||||
'Icon',
|
||||
'Border',
|
||||
'Button',
|
||||
'ButtonUnstyled',
|
||||
'Input',
|
||||
'PanelHeader',
|
||||
'MenuItem',
|
||||
'Notification',
|
||||
'Alert',
|
||||
'UserCard'
|
||||
],
|
||||
defaultRules: [
|
||||
{
|
||||
directives: {
|
||||
background: '--bg',
|
||||
backgroundNoCssColor: 'yes'
|
||||
}
|
||||
},
|
||||
{
|
||||
component: 'PanelHeader',
|
||||
parent: { component: 'MobileDrawer' },
|
||||
directives: {
|
||||
background: '--fg',
|
||||
shadow: [{
|
||||
x: 0,
|
||||
y: 0,
|
||||
blur: 4,
|
||||
spread: 0,
|
||||
color: '#000000',
|
||||
alpha: 0.6
|
||||
}]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,7 +1,10 @@
|
|||
import SideDrawer from '../side_drawer/side_drawer.vue'
|
||||
import Notifications from '../notifications/notifications.vue'
|
||||
import ConfirmModal from '../confirm_modal/confirm_modal.vue'
|
||||
import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils'
|
||||
import {
|
||||
unseenNotificationsFromStore,
|
||||
countExtraNotifications
|
||||
} from '../../services/notification_utils/notification_utils'
|
||||
import GestureService from '../../services/gesture_service/gesture_service'
|
||||
import NavigationPins from 'src/components/navigation/navigation_pins.vue'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
|
@ -11,7 +14,8 @@ import {
|
|||
faBell,
|
||||
faBars,
|
||||
faArrowUp,
|
||||
faMinus
|
||||
faMinus,
|
||||
faCheckDouble
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
|
|
@ -19,7 +23,8 @@ library.add(
|
|||
faBell,
|
||||
faBars,
|
||||
faArrowUp,
|
||||
faMinus
|
||||
faMinus,
|
||||
faCheckDouble
|
||||
)
|
||||
|
||||
const MobileNav = {
|
||||
|
|
@ -50,8 +55,14 @@ const MobileNav = {
|
|||
return unseenNotificationsFromStore(this.$store)
|
||||
},
|
||||
unseenNotificationsCount () {
|
||||
return this.unseenNotifications.length + countExtraNotifications(this.$store)
|
||||
},
|
||||
unseenCount () {
|
||||
return this.unseenNotifications.length
|
||||
},
|
||||
unseenCountBadgeText () {
|
||||
return `${this.unseenCount ? this.unseenCount : ''}`
|
||||
},
|
||||
hideSitename () { return this.$store.state.instance.hideSitename },
|
||||
sitename () { return this.$store.state.instance.name },
|
||||
isChat () {
|
||||
|
|
@ -64,6 +75,9 @@ const MobileNav = {
|
|||
shouldConfirmLogout () {
|
||||
return this.$store.getters.mergedConfig.modalOnLogout
|
||||
},
|
||||
closingDrawerMarksAsSeen () {
|
||||
return this.$store.getters.mergedConfig.closingDrawerMarksAsSeen
|
||||
},
|
||||
...mapGetters(['unreadChatCount'])
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -78,7 +92,7 @@ const MobileNav = {
|
|||
// make sure to mark notifs seen only when the notifs were open and not
|
||||
// from close-calls.
|
||||
this.notificationsOpen = false
|
||||
if (markRead) {
|
||||
if (markRead && this.closingDrawerMarksAsSeen) {
|
||||
this.markNotificationsAsSeen()
|
||||
}
|
||||
}
|
||||
|
|
@ -114,7 +128,6 @@ const MobileNav = {
|
|||
this.hideConfirmLogout()
|
||||
},
|
||||
markNotificationsAsSeen () {
|
||||
// this.$refs.notifications.markAsSeen()
|
||||
this.$store.dispatch('markNotificationsAsSeen')
|
||||
},
|
||||
onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) {
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
/>
|
||||
<div
|
||||
v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount"
|
||||
class="alert-dot"
|
||||
class="badge -dot -notification"
|
||||
/>
|
||||
</button>
|
||||
<NavigationPins class="pins" />
|
||||
|
|
@ -37,20 +37,26 @@
|
|||
/>
|
||||
<div
|
||||
v-if="unseenNotificationsCount"
|
||||
class="alert-dot"
|
||||
class="badge -dot -notification"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<aside
|
||||
v-if="currentUser"
|
||||
class="mobile-notifications-drawer"
|
||||
class="mobile-notifications-drawer mobile-drawer"
|
||||
:class="{ '-closed': !notificationsOpen }"
|
||||
@touchstart.stop="notificationsTouchStart"
|
||||
@touchmove.stop="notificationsTouchMove"
|
||||
>
|
||||
<div class="mobile-notifications-header">
|
||||
<span class="title">{{ $t('notifications.notifications') }}</span>
|
||||
<div class="panel-heading mobile-notifications-header">
|
||||
<span class="title">
|
||||
{{ $t('notifications.notifications') }}
|
||||
<span
|
||||
v-if="unseenCountBadgeText"
|
||||
class="badge -notification unseen-count"
|
||||
>{{ unseenCountBadgeText }}</span>
|
||||
</span>
|
||||
<span class="spacer" />
|
||||
<button
|
||||
v-if="notificationsAtTop"
|
||||
|
|
@ -66,6 +72,17 @@
|
|||
/>
|
||||
</FALayers>
|
||||
</button>
|
||||
<button
|
||||
v-if="!closingDrawerMarksAsSeen"
|
||||
class="button-unstyled mobile-nav-button"
|
||||
:title="$t('nav.mobile_notifications_mark_as_seen')"
|
||||
@click.stop.prevent="markNotificationsAsSeen()"
|
||||
>
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="check-double"
|
||||
/>
|
||||
</button>
|
||||
<button
|
||||
class="button-unstyled mobile-nav-button"
|
||||
:title="$t('nav.mobile_notifications_close')"
|
||||
|
|
@ -106,21 +123,19 @@
|
|||
<script src="./mobile_nav.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.MobileNav {
|
||||
z-index: var(--ZI_navbar);
|
||||
|
||||
.mobile-nav {
|
||||
display: grid;
|
||||
line-height: var(--navbar-height);
|
||||
grid-template-rows: 50px;
|
||||
grid-template-rows: var(--navbar-height);
|
||||
grid-template-columns: 2fr auto;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
a {
|
||||
color: var(--topBarLink, $fallback--link);
|
||||
color: var(--link);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -148,19 +163,6 @@
|
|||
display: flex;
|
||||
}
|
||||
|
||||
.alert-dot {
|
||||
border-radius: 100%;
|
||||
height: 8px;
|
||||
width: 8px;
|
||||
position: absolute;
|
||||
left: calc(50% - 4px);
|
||||
top: calc(50% - 4px);
|
||||
margin-left: 6px;
|
||||
margin-top: -6px;
|
||||
background-color: $fallback--cRed;
|
||||
background-color: var(--badgeNotification, $fallback--cRed);
|
||||
}
|
||||
|
||||
.mobile-notifications-drawer {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
|
@ -168,13 +170,13 @@
|
|||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
|
||||
box-shadow: var(--panelShadow);
|
||||
box-shadow: var(--shadow);
|
||||
transition-property: transform;
|
||||
transition-duration: 0.25s;
|
||||
transform: translateX(0);
|
||||
z-index: var(--ZI_navbar);
|
||||
-webkit-overflow-scrolling: touch;
|
||||
background: var(--background);
|
||||
|
||||
&.-closed {
|
||||
transform: translateX(100%);
|
||||
|
|
@ -188,14 +190,10 @@
|
|||
justify-content: space-between;
|
||||
z-index: calc(var(--ZI_navbar) + 100);
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
height: 3.5em;
|
||||
line-height: 3.5em;
|
||||
position: absolute;
|
||||
color: var(--topBarText);
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--topBar, $fallback--fg);
|
||||
box-shadow: 0 0 4px rgb(0 0 0 / 60%);
|
||||
box-shadow: var(--topBarShadow);
|
||||
box-shadow: var(--shadow);
|
||||
|
||||
.spacer {
|
||||
flex: 1;
|
||||
|
|
@ -216,15 +214,11 @@
|
|||
}
|
||||
|
||||
.mobile-notifications {
|
||||
margin-top: 50px;
|
||||
margin-top: 3.5em;
|
||||
width: 100vw;
|
||||
height: calc(100vh - var(--navbar-height));
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
background-color: $fallback--bg;
|
||||
background-color: var(--bg, $fallback--bg);
|
||||
|
||||
.notifications {
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -13,8 +13,6 @@
|
|||
<script src="./mobile_post_status_button.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.MobilePostButton {
|
||||
&.button-default {
|
||||
width: 5em;
|
||||
|
|
@ -25,8 +23,6 @@
|
|||
right: 1.5em;
|
||||
// TODO: this needs its own color, it has to stand out enough and link color
|
||||
// is not very optimal for this particular use.
|
||||
background-color: $fallback--fg;
|
||||
background-color: var(--btn, $fallback--fg);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
@ -42,8 +38,7 @@
|
|||
|
||||
svg {
|
||||
font-size: 1.5em;
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
color: var(--text);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
9
src/components/modal/modals.style.js
Normal file
9
src/components/modal/modals.style.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
export default {
|
||||
name: 'Modals',
|
||||
selector: '.modal-view',
|
||||
lazy: true,
|
||||
validInnerComponents: [
|
||||
'Panel'
|
||||
],
|
||||
defaultRules: []
|
||||
}
|
||||
|
|
@ -12,13 +12,13 @@
|
|||
<div class="dropdown-menu">
|
||||
<span v-if="canGrantRole">
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
class="menu-item dropdown-item menu-item"
|
||||
@click="toggleRight("admin")"
|
||||
>
|
||||
{{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
class="menu-item dropdown-item menu-item"
|
||||
@click="toggleRight("moderator")"
|
||||
>
|
||||
{{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
|
||||
|
|
@ -31,14 +31,14 @@
|
|||
</span>
|
||||
<button
|
||||
v-if="canChangeActivationState"
|
||||
class="button-default dropdown-item"
|
||||
class="menu-item dropdown-item menu-item"
|
||||
@click="toggleActivationStatus()"
|
||||
>
|
||||
{{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
|
||||
</button>
|
||||
<button
|
||||
v-if="canDeleteAccount"
|
||||
class="button-default dropdown-item"
|
||||
class="menu-item dropdown-item menu-item"
|
||||
@click="deleteUserDialog(true)"
|
||||
>
|
||||
{{ $t('user_card.admin_menu.delete_account') }}
|
||||
|
|
@ -50,74 +50,74 @@
|
|||
/>
|
||||
<span v-if="canUseTagPolicy">
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
class="menu-item dropdown-item menu-item"
|
||||
@click="toggleTag(tags.FORCE_NSFW)"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox"
|
||||
class="input menu-checkbox"
|
||||
:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
|
||||
/>
|
||||
{{ $t('user_card.admin_menu.force_nsfw') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
class="menu-item dropdown-item menu-item"
|
||||
@click="toggleTag(tags.STRIP_MEDIA)"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox"
|
||||
class="input menu-checkbox"
|
||||
:class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
|
||||
/>
|
||||
{{ $t('user_card.admin_menu.strip_media') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
class="menu-item dropdown-item menu-item"
|
||||
@click="toggleTag(tags.FORCE_UNLISTED)"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox"
|
||||
class="input menu-checkbox"
|
||||
:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
|
||||
/>
|
||||
{{ $t('user_card.admin_menu.force_unlisted') }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default dropdown-item"
|
||||
class="menu-item dropdown-item menu-item"
|
||||
@click="toggleTag(tags.SANDBOX)"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox"
|
||||
class="input menu-checkbox"
|
||||
:class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
|
||||
/>
|
||||
{{ $t('user_card.admin_menu.sandbox') }}
|
||||
</button>
|
||||
<button
|
||||
v-if="user.is_local"
|
||||
class="button-default dropdown-item"
|
||||
class="menu-item dropdown-item menu-item"
|
||||
@click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox"
|
||||
class="input menu-checkbox"
|
||||
:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
|
||||
/>
|
||||
{{ $t('user_card.admin_menu.disable_remote_subscription') }}
|
||||
</button>
|
||||
<button
|
||||
v-if="user.is_local"
|
||||
class="button-default dropdown-item"
|
||||
class="menu-item dropdown-item menu-item"
|
||||
@click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox"
|
||||
class="input menu-checkbox"
|
||||
:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
|
||||
/>
|
||||
{{ $t('user_card.admin_menu.disable_any_subscription') }}
|
||||
</button>
|
||||
<button
|
||||
v-if="user.is_local"
|
||||
class="button-default dropdown-item"
|
||||
class="menu-item dropdown-item menu-item"
|
||||
@click="toggleTag(tags.QUARANTINE)"
|
||||
>
|
||||
<span
|
||||
class="menu-checkbox"
|
||||
class="input menu-checkbox"
|
||||
:class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
|
||||
/>
|
||||
{{ $t('user_card.admin_menu.quarantine') }}
|
||||
|
|
@ -166,8 +166,6 @@
|
|||
<script src="./moderation_tools.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.moderation-tools-popover {
|
||||
height: 100%;
|
||||
|
||||
|
|
|
|||
|
|
@ -227,6 +227,5 @@
|
|||
<script src="./mrf_transparency_panel.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
@import "./mrf_transparency_panel";
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import BookmarkFoldersMenuContent from 'src/components/bookmark_folders_menu/bookmark_folders_menu_content.vue'
|
||||
import ListsMenuContent from 'src/components/lists_menu/lists_menu_content.vue'
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import { TIMELINES, ROOT_ITEMS } from 'src/components/navigation/navigation.js'
|
||||
|
|
@ -41,6 +42,7 @@ const NavPanel = {
|
|||
created () {
|
||||
},
|
||||
components: {
|
||||
BookmarkFoldersMenuContent,
|
||||
ListsMenuContent,
|
||||
NavigationEntry,
|
||||
NavigationPins,
|
||||
|
|
@ -51,6 +53,7 @@ const NavPanel = {
|
|||
editMode: false,
|
||||
showTimelines: false,
|
||||
showLists: false,
|
||||
showBookmarkFolders: false,
|
||||
timelinesList: Object.entries(TIMELINES).map(([k, v]) => ({ ...v, name: k })),
|
||||
rootList: Object.entries(ROOT_ITEMS).map(([k, v]) => ({ ...v, name: k }))
|
||||
}
|
||||
|
|
@ -62,6 +65,9 @@ const NavPanel = {
|
|||
toggleLists () {
|
||||
this.showLists = !this.showLists
|
||||
},
|
||||
toggleBookmarkFolders () {
|
||||
this.showBookmarkFolders = !this.showBookmarkFolders
|
||||
},
|
||||
toggleEditMode () {
|
||||
this.editMode = !this.editMode
|
||||
},
|
||||
|
|
@ -90,7 +96,8 @@ const NavPanel = {
|
|||
pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable,
|
||||
supportsAnnouncements: state => state.announcements.supportsAnnouncements,
|
||||
pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems),
|
||||
collapsed: state => state.serverSideStorage.prefsStorage.simple.collapseNav
|
||||
collapsed: state => state.serverSideStorage.prefsStorage.simple.collapseNav,
|
||||
bookmarkFolders: state => state.instance.pleromaBookmarkFoldersAvailable
|
||||
}),
|
||||
timelinesItems () {
|
||||
return filterNavigation(
|
||||
|
|
@ -102,7 +109,8 @@ const NavPanel = {
|
|||
hasAnnouncements: this.supportsAnnouncements,
|
||||
isFederating: this.federating,
|
||||
isPrivate: this.privateMode,
|
||||
currentUser: this.currentUser
|
||||
currentUser: this.currentUser,
|
||||
supportsBookmarkFolders: this.bookmarkFolders
|
||||
}
|
||||
)
|
||||
},
|
||||
|
|
@ -116,7 +124,8 @@ const NavPanel = {
|
|||
hasAnnouncements: this.supportsAnnouncements,
|
||||
isFederating: this.federating,
|
||||
isPrivate: this.privateMode,
|
||||
currentUser: this.currentUser
|
||||
currentUser: this.currentUser,
|
||||
supportsBookmarkFolders: this.bookmarkFolders
|
||||
}
|
||||
)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -37,7 +37,8 @@
|
|||
</NavigationEntry>
|
||||
<div
|
||||
v-show="showTimelines"
|
||||
class="timelines-background"
|
||||
class="timelines-background menu-item-collapsible"
|
||||
:class="{ '-expanded': showTimelines }"
|
||||
>
|
||||
<div class="timelines">
|
||||
<NavigationEntry
|
||||
|
|
@ -57,12 +58,11 @@
|
|||
>
|
||||
<router-link
|
||||
:title="$t('lists.manage_lists')"
|
||||
class="extra-button"
|
||||
class="button-unstyled extra-button"
|
||||
:to="{ name: 'lists' }"
|
||||
@click.stop
|
||||
>
|
||||
<FAIcon
|
||||
class="extra-button"
|
||||
fixed-width
|
||||
icon="wrench"
|
||||
/>
|
||||
|
|
@ -75,13 +75,47 @@
|
|||
</NavigationEntry>
|
||||
<div
|
||||
v-show="showLists"
|
||||
class="timelines-background"
|
||||
class="timelines-background menu-item-collapsible"
|
||||
:class="{ '-expanded': showLists }"
|
||||
>
|
||||
<ListsMenuContent
|
||||
:show-pin="editMode || forceEditMode"
|
||||
class="timelines"
|
||||
/>
|
||||
</div>
|
||||
<NavigationEntry
|
||||
v-if="currentUser && bookmarkFolders"
|
||||
:show-pin="false"
|
||||
:item="{ icon: 'bookmark', label: 'nav.bookmarks' }"
|
||||
:aria-expanded="showBookmarkFolders ? 'true' : 'false'"
|
||||
@click="toggleBookmarkFolders"
|
||||
>
|
||||
<router-link
|
||||
:title="$t('bookmarks.manage_bookmark_folders')"
|
||||
class="button-unstyled extra-button"
|
||||
:to="{ name: 'bookmark-folders' }"
|
||||
@click.stop
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
icon="wrench"
|
||||
/>
|
||||
</router-link>
|
||||
<FAIcon
|
||||
class="timelines-chevron"
|
||||
fixed-width
|
||||
:icon="showBookmarkFolders ? 'chevron-up' : 'chevron-down'"
|
||||
/>
|
||||
</NavigationEntry>
|
||||
<div
|
||||
v-show="showBookmarkFolders"
|
||||
class="timelines-background menu-item-collapsible"
|
||||
:class="{ '-expanded': showBookmarkFolders }"
|
||||
>
|
||||
<BookmarkFoldersMenuContent
|
||||
class="timelines"
|
||||
/>
|
||||
</div>
|
||||
<NavigationEntry
|
||||
v-for="item in rootItems"
|
||||
:key="item.name"
|
||||
|
|
@ -102,12 +136,10 @@
|
|||
<script src="./nav_panel.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
|
||||
.NavPanel {
|
||||
.panel {
|
||||
overflow: hidden;
|
||||
box-shadow: var(--panelShadow);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -116,33 +148,6 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
border-bottom: 1px solid;
|
||||
border-color: $fallback--border;
|
||||
border-color: var(--border, $fallback--border);
|
||||
}
|
||||
|
||||
> li {
|
||||
&:first-child .menu-item {
|
||||
border-top-right-radius: $fallback--panelRadius;
|
||||
border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
|
||||
border-top-left-radius: $fallback--panelRadius;
|
||||
border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
|
||||
}
|
||||
|
||||
&:last-child .menu-item {
|
||||
border-bottom-right-radius: $fallback--panelRadius;
|
||||
border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
|
||||
border-bottom-left-radius: $fallback--panelRadius;
|
||||
border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
|
||||
}
|
||||
}
|
||||
|
||||
li:last-child {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.navigation-chevron {
|
||||
margin-left: 0.8em;
|
||||
margin-right: 0.8em;
|
||||
|
|
@ -156,16 +161,6 @@
|
|||
|
||||
.timelines-background {
|
||||
padding: 0 0 0 0.6em;
|
||||
background-color: $fallback--lightBg;
|
||||
background-color: var(--selectedMenu, $fallback--lightBg);
|
||||
border-bottom: 1px solid;
|
||||
border-color: $fallback--border;
|
||||
border-color: var(--border, $fallback--border);
|
||||
}
|
||||
|
||||
.timelines {
|
||||
background-color: $fallback--bg;
|
||||
background-color: var(--bg, $fallback--bg);
|
||||
}
|
||||
|
||||
.nav-panel-heading {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
export const filterNavigation = (list = [], { hasChats, hasAnnouncements, isFederating, isPrivate, currentUser }) => {
|
||||
export const filterNavigation = (list = [], { hasChats, hasAnnouncements, isFederating, isPrivate, currentUser, supportsBookmarkFolders }) => {
|
||||
return list.filter(({ criteria, anon, anonRoute }) => {
|
||||
const set = new Set(criteria || [])
|
||||
if (!isFederating && set.has('federating')) return false
|
||||
|
|
@ -7,6 +7,7 @@ export const filterNavigation = (list = [], { hasChats, hasAnnouncements, isFede
|
|||
if ((!currentUser || !currentUser.locked) && set.has('lockedUser')) return false
|
||||
if (!hasChats && set.has('chats')) return false
|
||||
if (!hasAnnouncements && set.has('announcements')) return false
|
||||
if (supportsBookmarkFolders && set.has('!supportsBookmarkFolders')) return false
|
||||
return true
|
||||
})
|
||||
}
|
||||
|
|
@ -17,3 +18,12 @@ export const getListEntries = state => state.lists.allLists.map(list => ({
|
|||
labelRaw: list.title,
|
||||
iconLetter: list.title[0]
|
||||
}))
|
||||
|
||||
export const getBookmarkFolderEntries = state => state.bookmarkFolders.allFolders.map(folder => ({
|
||||
name: 'bookmark-folder-' + folder.id,
|
||||
routeObject: { name: 'bookmark-folder', params: { id: folder.id } },
|
||||
labelRaw: folder.name,
|
||||
iconEmoji: folder.emoji,
|
||||
iconEmojiUrl: folder.emoji_url,
|
||||
iconLetter: folder.name[0]
|
||||
}))
|
||||
|
|
|
|||
|
|
@ -32,7 +32,8 @@ export const TIMELINES = {
|
|||
bookmarks: {
|
||||
route: 'bookmarks',
|
||||
icon: 'bookmark',
|
||||
label: 'nav.bookmarks'
|
||||
label: 'nav.bookmarks',
|
||||
criteria: ['!supportsBookmarkFolders']
|
||||
},
|
||||
favorites: {
|
||||
routeObject: { name: 'user-profile', query: { tab: 'favorites' } },
|
||||
|
|
@ -80,3 +81,21 @@ export const ROOT_ITEMS = {
|
|||
criteria: ['announcements']
|
||||
}
|
||||
}
|
||||
|
||||
export function routeTo (item, currentUser) {
|
||||
if (!item.route && !item.routeObject) return null
|
||||
|
||||
let route
|
||||
|
||||
if (item.routeObject) {
|
||||
route = item.routeObject
|
||||
} else {
|
||||
route = { name: (item.anon || currentUser) ? item.route : item.anonRoute }
|
||||
}
|
||||
|
||||
if (USERNAME_ROUTES.has(route.name)) {
|
||||
route.params = { username: currentUser.screen_name, name: currentUser.screen_name }
|
||||
}
|
||||
|
||||
return route
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue