Merge remote-tracking branch 'origin/develop' into shigusegubu-themes3
This commit is contained in:
Henry Jameson
commit
16610c8a12
67 changed files with 2101 additions and 476 deletions
1
changelog.d/better-shadow-control.fix
Normal file
1
changelog.d/better-shadow-control.fix
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
Updated shadow editor, hopefully fixed long-standing bugs, added ability to specify shadow's name.
|
||||||
1
changelog.d/bookmark-folders.add
Normal file
1
changelog.d/bookmark-folders.add
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
Support bookmark folders
|
||||||
1
changelog.d/splashscreen.add
Normal file
1
changelog.d/splashscreen.add
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
Splash screen + loading indicator to make process of identifying initialization issues and load performance
|
||||||
129
index.html
129
index.html
|
|
@ -4,13 +4,138 @@
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
|
||||||
<link rel="icon" type="image/png" href="/favicon.png">
|
<link rel="icon" type="image/png" href="/favicon.png">
|
||||||
|
<!-- putting styles here to avoid having to wait for styles to load up -->
|
||||||
|
<style id="splashscreen">
|
||||||
|
#splash {
|
||||||
|
--scale: 1;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
grid-template-columns: auto;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
justify-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #0f161e;
|
||||||
|
font-family: sans-serif;
|
||||||
|
color: #b9b9ba;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 9999;
|
||||||
|
font-size: calc(1vw + 1vh + 1vmin);
|
||||||
|
}
|
||||||
|
|
||||||
|
#splash-credit {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 14px;
|
||||||
|
bottom: 16px;
|
||||||
|
right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#splash-container {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mascot-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: center;
|
||||||
|
perspective: 60em;
|
||||||
|
perspective-origin: 0 -15em;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mascot {
|
||||||
|
width: calc(10em * var(--scale));
|
||||||
|
height: calc(10em * var(--scale));
|
||||||
|
object-fit: contain;
|
||||||
|
object-position: bottom;
|
||||||
|
transform: translateZ(-2em);
|
||||||
|
}
|
||||||
|
|
||||||
|
#throbber {
|
||||||
|
display: grid;
|
||||||
|
width: calc(5em * 0.5 * var(--scale));
|
||||||
|
height: calc(8em * 0.5 * var(--scale));
|
||||||
|
margin-left: 4.1em;
|
||||||
|
z-index: 2;
|
||||||
|
grid-template-rows: repeat(8, 1fr);
|
||||||
|
grid-template-columns: repeat(5, 1fr);
|
||||||
|
grid-template-areas: "P P . L L"
|
||||||
|
"P P . L L"
|
||||||
|
"P P . L L"
|
||||||
|
"P P . L L"
|
||||||
|
"P P . . ."
|
||||||
|
"P P . . ."
|
||||||
|
"P P . E E"
|
||||||
|
"P P . E E";
|
||||||
|
}
|
||||||
|
|
||||||
|
.chunk {
|
||||||
|
background-color: #e2b188;
|
||||||
|
box-shadow: 0.01em 0.01em 0.1em 0 #e2b188;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chunk-P {
|
||||||
|
grid-area: P;
|
||||||
|
border-top-left-radius: calc(var(--logoChunkSize) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
#chunk-L {
|
||||||
|
grid-area: L;
|
||||||
|
border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
#chunk-E {
|
||||||
|
grid-area: E;
|
||||||
|
border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
#status {
|
||||||
|
margin-top: 1em;
|
||||||
|
line-height: 2;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion) {
|
||||||
|
#throbber {
|
||||||
|
animation: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<style id="pleroma-eager-styles" type="text/css"></style>
|
<style id="pleroma-eager-styles" type="text/css"></style>
|
||||||
<style id="pleroma-lazy-styles" type="text/css"></style>
|
<style id="pleroma-lazy-styles" type="text/css"></style>
|
||||||
<!--server-generated-meta-->
|
<!--server-generated-meta-->
|
||||||
</head>
|
</head>
|
||||||
<body class="hidden">
|
<body style="margin: 0; padding: 0">
|
||||||
<noscript>To use Pleroma, please enable JavaScript.</noscript>
|
<noscript>To use Pleroma, please enable JavaScript.</noscript>
|
||||||
<div id="app"></div>
|
<div id="splash">
|
||||||
|
<!-- we are hiding entire graphic so no point showing credit -->
|
||||||
|
<div aria-hidden="true" id="splash-credit">
|
||||||
|
Art by pipivovott
|
||||||
|
</div>
|
||||||
|
<div id="splash-container">
|
||||||
|
<div aria-hidden="true" id="mascot-container">
|
||||||
|
<div id="throbber">
|
||||||
|
<div class="chunk" id="chunk-P">
|
||||||
|
</div>
|
||||||
|
<div class="chunk" id="chunk-L">
|
||||||
|
</div>
|
||||||
|
<div class="chunk" id="chunk-E">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<img id="mascot" src="/static/pleromatan_apology.png">
|
||||||
|
</div>
|
||||||
|
<div id="status" class="css-ok">
|
||||||
|
<!-- (｡>﹏<) -->
|
||||||
|
<!-- it's a pseudographic, don't want screenreader read out nonsense -->
|
||||||
|
<span aria-hidden="true" class="initial-text">(｡>﹏<)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="app" class="hidden"></div>
|
||||||
<div id="modal"></div>
|
<div id="modal"></div>
|
||||||
<!-- built files will be auto injected -->
|
<!-- built files will be auto injected -->
|
||||||
<div id="popovers" />
|
<div id="popovers" />
|
||||||
|
|
|
||||||
|
|
@ -132,5 +132,6 @@
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 16.0.0",
|
"node": ">= 16.0.0",
|
||||||
"npm": ">= 3.0.0"
|
"npm": ">= 3.0.0"
|
||||||
}
|
},
|
||||||
|
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
||||||
}
|
}
|
||||||
|
|
|
||||||
22
src/App.js
22
src/App.js
|
|
@ -44,16 +44,29 @@ export default {
|
||||||
data: () => ({
|
data: () => ({
|
||||||
mobileActivePanel: 'timeline'
|
mobileActivePanel: 'timeline'
|
||||||
}),
|
}),
|
||||||
|
watch: {
|
||||||
|
themeApplied (value) {
|
||||||
|
this.removeSplash()
|
||||||
|
}
|
||||||
|
},
|
||||||
created () {
|
created () {
|
||||||
// Load the locale from the storage
|
// Load the locale from the storage
|
||||||
const val = this.$store.getters.mergedConfig.interfaceLanguage
|
const val = this.$store.getters.mergedConfig.interfaceLanguage
|
||||||
this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
|
this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
|
||||||
window.addEventListener('resize', this.updateMobileState)
|
window.addEventListener('resize', this.updateMobileState)
|
||||||
},
|
},
|
||||||
|
mounted () {
|
||||||
|
if (this.$store.state.interface.themeApplied) {
|
||||||
|
this.removeSplash()
|
||||||
|
}
|
||||||
|
},
|
||||||
unmounted () {
|
unmounted () {
|
||||||
window.removeEventListener('resize', this.updateMobileState)
|
window.removeEventListener('resize', this.updateMobileState)
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
themeApplied () {
|
||||||
|
return this.$store.state.interface.themeApplied
|
||||||
|
},
|
||||||
classes () {
|
classes () {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
|
|
@ -130,6 +143,15 @@ export default {
|
||||||
updateMobileState () {
|
updateMobileState () {
|
||||||
this.$store.dispatch('setLayoutWidth', windowWidth())
|
this.$store.dispatch('setLayoutWidth', windowWidth())
|
||||||
this.$store.dispatch('setLayoutHeight', windowHeight())
|
this.$store.dispatch('setLayoutHeight', windowHeight())
|
||||||
|
},
|
||||||
|
removeSplash () {
|
||||||
|
document.querySelector('#status').textContent = this.$t('splash.fun_' + Math.ceil(Math.random() * 4))
|
||||||
|
const splashscreenRoot = document.querySelector('#splash')
|
||||||
|
splashscreenRoot.addEventListener('transitionend', () => {
|
||||||
|
splashscreenRoot.remove()
|
||||||
|
})
|
||||||
|
splashscreenRoot.classList.add('hidden')
|
||||||
|
document.querySelector('#app').classList.remove('hidden')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
166
src/App.scss
166
src/App.scss
|
|
@ -914,3 +914,169 @@ option {
|
||||||
color: var(--selectionText);
|
color: var(--selectionText);
|
||||||
background-color: var(--selectionBackground);
|
background-color: var(--selectionBackground);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#splash {
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 2s;
|
||||||
|
opacity: 1;
|
||||||
|
|
||||||
|
&.hidden {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#status {
|
||||||
|
&.css-ok {
|
||||||
|
&::before {
|
||||||
|
display: inline-block;
|
||||||
|
content: "CSS OK";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.initial-text {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#throbber {
|
||||||
|
animation-duration: 3s;
|
||||||
|
animation-name: bounce;
|
||||||
|
animation-iteration-count: infinite;
|
||||||
|
animation-direction: normal;
|
||||||
|
transform-origin: bottom center;
|
||||||
|
|
||||||
|
&.dead {
|
||||||
|
animation-name: dead;
|
||||||
|
animation-duration: 2s;
|
||||||
|
animation-iteration-count: 1;
|
||||||
|
transform: rotateX(90deg) rotateY(0) rotateZ(-45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes dead {
|
||||||
|
0% {
|
||||||
|
transform: rotateX(0) rotateY(0) rotateZ(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
5% {
|
||||||
|
transform: rotateX(0) rotateY(0) rotateZ(1deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
10% {
|
||||||
|
transform: rotateX(0) rotateY(0) rotateZ(-2deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
15% {
|
||||||
|
transform: rotateX(0) rotateY(0) rotateZ(3deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
20% {
|
||||||
|
transform: rotateX(0) rotateY(0) rotateZ(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
transform: rotateX(0) rotateY(0) rotateZ(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
30% {
|
||||||
|
transform: rotateX(10deg) rotateY(0) rotateZ(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
35% {
|
||||||
|
transform: rotateX(-10deg) rotateY(0) rotateZ(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
transform: rotateX(10deg) rotateY(0) rotateZ(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
45% {
|
||||||
|
transform: rotateX(-10deg) rotateY(0) rotateZ(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: rotateX(10deg) rotateY(0) rotateZ(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotateX(90deg) rotateY(0) rotateZ(-45deg);
|
||||||
|
transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); /* easeInQuint */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
0% {
|
||||||
|
scale: 1 1;
|
||||||
|
translate: 0 0;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
10% {
|
||||||
|
scale: 1.2 0.8;
|
||||||
|
translate: 0 0;
|
||||||
|
transform: rotateZ(var(--defaultZ));
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
30% {
|
||||||
|
scale: 0.9 1.1;
|
||||||
|
translate: 0 -40%;
|
||||||
|
transform: rotateZ(var(--defaultZ));
|
||||||
|
animation-timing-function: ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
scale: 1.1 0.9;
|
||||||
|
translate: 0 -50%;
|
||||||
|
transform: rotateZ(var(--defaultZ));
|
||||||
|
animation-timing-function: ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
45% {
|
||||||
|
scale: 0.9 1.1;
|
||||||
|
translate: 0 -45%;
|
||||||
|
transform: rotateZ(var(--defaultZ));
|
||||||
|
animation-timing-function: ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
scale: 1.05 0.95;
|
||||||
|
translate: 0 -40%;
|
||||||
|
animation-timing-function: ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
55% {
|
||||||
|
scale: 0.985 1.025;
|
||||||
|
translate: 0 -35%;
|
||||||
|
transform: rotateZ(var(--defaultZ));
|
||||||
|
animation-timing-function: ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
60% {
|
||||||
|
scale: 1.0125 0.9985;
|
||||||
|
translate: 0 -30%;
|
||||||
|
transform: rotateZ(var(--defaultZ));
|
||||||
|
animation-timing-function: ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
80% {
|
||||||
|
scale: 1.0063 0.9938;
|
||||||
|
translate: 0 -10%;
|
||||||
|
transform: rotateZ(var(--defaultZ));
|
||||||
|
animation-timing-function: ease-in-ou;
|
||||||
|
}
|
||||||
|
|
||||||
|
90% {
|
||||||
|
scale: 1.2 0.8;
|
||||||
|
translate: 0 0;
|
||||||
|
transform: rotateZ(var(--defaultZ));
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
scale: 1 1;
|
||||||
|
translate: 0 0;
|
||||||
|
transform: rotateZ(var(--defaultZ));
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 396 KiB After Width: | Height: | Size: 35 B |
1
src/assets/pleromatan_apology.png
Symbolic link
1
src/assets/pleromatan_apology.png
Symbolic link
|
|
@ -0,0 +1 @@
|
||||||
|
../../static/pleromatan_apology.png
|
||||||
|
Before Width: | Height: | Size: 396 KiB After Width: | Height: | Size: 35 B |
Binary file not shown.
|
Before Width: | Height: | Size: 521 KiB After Width: | Height: | Size: 39 B |
1
src/assets/pleromatan_apology_fox.png
Symbolic link
1
src/assets/pleromatan_apology_fox.png
Symbolic link
|
|
@ -0,0 +1 @@
|
||||||
|
../../static/pleromatan_apology_fox.png
|
||||||
|
Before Width: | Height: | Size: 521 KiB After Width: | Height: | Size: 39 B |
|
|
@ -253,6 +253,7 @@ const getNodeInfo = async ({ store }) => {
|
||||||
store.dispatch('setInstanceOption', { name: 'shoutAvailable', value: features.includes('chat') })
|
store.dispatch('setInstanceOption', { name: 'shoutAvailable', value: features.includes('chat') })
|
||||||
store.dispatch('setInstanceOption', { name: 'pleromaChatMessagesAvailable', value: features.includes('pleroma_chat_messages') })
|
store.dispatch('setInstanceOption', { name: 'pleromaChatMessagesAvailable', value: features.includes('pleroma_chat_messages') })
|
||||||
store.dispatch('setInstanceOption', { name: 'pleromaCustomEmojiReactionsAvailable', value: features.includes('pleroma_custom_emoji_reactions') })
|
store.dispatch('setInstanceOption', { name: 'pleromaCustomEmojiReactionsAvailable', value: features.includes('pleroma_custom_emoji_reactions') })
|
||||||
|
store.dispatch('setInstanceOption', { name: 'pleromaBookmarkFoldersAvailable', value: features.includes('pleroma:bookmark_folders') })
|
||||||
store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
|
store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
|
||||||
store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
|
store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
|
||||||
store.dispatch('setInstanceOption', { name: 'editingAvailable', value: features.includes('editing') })
|
store.dispatch('setInstanceOption', { name: 'editingAvailable', value: features.includes('editing') })
|
||||||
|
|
@ -327,11 +328,7 @@ const setConfig = async ({ store }) => {
|
||||||
|
|
||||||
const checkOAuthToken = async ({ store }) => {
|
const checkOAuthToken = async ({ store }) => {
|
||||||
if (store.getters.getUserToken()) {
|
if (store.getters.getUserToken()) {
|
||||||
try {
|
return store.dispatch('loginUser', store.getters.getUserToken())
|
||||||
await store.dispatch('loginUser', store.getters.getUserToken())
|
|
||||||
} catch (e) {
|
|
||||||
console.error(e)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
return Promise.resolve()
|
return Promise.resolve()
|
||||||
}
|
}
|
||||||
|
|
@ -349,19 +346,26 @@ const afterStoreSetup = async ({ store, i18n }) => {
|
||||||
const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
|
const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
|
||||||
store.dispatch('setInstanceOption', { name: 'server', value: server })
|
store.dispatch('setInstanceOption', { name: 'server', value: server })
|
||||||
|
|
||||||
|
document.querySelector('#status').textContent = i18n.global.t('splash.settings')
|
||||||
await setConfig({ store })
|
await setConfig({ store })
|
||||||
await store.dispatch('setTheme')
|
document.querySelector('#status').textContent = i18n.global.t('splash.theme')
|
||||||
|
try {
|
||||||
|
await store.dispatch('setTheme').catch((e) => { console.error('Error setting theme', e) })
|
||||||
|
} catch (e) {
|
||||||
|
return Promise.reject(e)
|
||||||
|
}
|
||||||
|
|
||||||
applyConfig(store.state.config)
|
applyConfig(store.state.config, i18n.global)
|
||||||
|
|
||||||
// Now we can try getting the server settings and logging in
|
// Now we can try getting the server settings and logging in
|
||||||
// Most of these are preloaded into the index.html so blocking is minimized
|
// Most of these are preloaded into the index.html so blocking is minimized
|
||||||
|
document.querySelector('#status').textContent = i18n.global.t('splash.instance')
|
||||||
await Promise.all([
|
await Promise.all([
|
||||||
checkOAuthToken({ store }),
|
checkOAuthToken({ store }),
|
||||||
getInstancePanel({ store }),
|
getInstancePanel({ store }),
|
||||||
getNodeInfo({ store }),
|
getNodeInfo({ store }),
|
||||||
getInstanceConfig({ store })
|
getInstanceConfig({ store })
|
||||||
])
|
]).catch(e => Promise.reject(e))
|
||||||
|
|
||||||
// Start fetching things that don't need to block the UI
|
// Start fetching things that don't need to block the UI
|
||||||
store.dispatch('fetchMutes')
|
store.dispatch('fetchMutes')
|
||||||
|
|
@ -395,9 +399,9 @@ const afterStoreSetup = async ({ store, i18n }) => {
|
||||||
|
|
||||||
// remove after vue 3.3
|
// remove after vue 3.3
|
||||||
app.config.unwrapInjectedRef = true
|
app.config.unwrapInjectedRef = true
|
||||||
|
document.querySelector('#status').textContent = i18n.global.t('splash.almost')
|
||||||
|
|
||||||
app.mount('#app')
|
app.mount('#app')
|
||||||
|
|
||||||
return app
|
return app
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -26,6 +26,8 @@ import ListsEdit from 'components/lists_edit/lists_edit.vue'
|
||||||
import NavPanel from 'src/components/nav_panel/nav_panel.vue'
|
import NavPanel from 'src/components/nav_panel/nav_panel.vue'
|
||||||
import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
|
import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
|
||||||
import QuotesTimeline from '../components/quotes_timeline/quotes_timeline.vue'
|
import QuotesTimeline from '../components/quotes_timeline/quotes_timeline.vue'
|
||||||
|
import BookmarkFolders from '../components/bookmark_folders/bookmark_folders.vue'
|
||||||
|
import BookmarkFolderEdit from '../components/bookmark_folder_edit/bookmark_folder_edit.vue'
|
||||||
|
|
||||||
export default (store) => {
|
export default (store) => {
|
||||||
const validateAuthenticatedRoute = (to, from, next) => {
|
const validateAuthenticatedRoute = (to, from, next) => {
|
||||||
|
|
@ -86,7 +88,11 @@ export default (store) => {
|
||||||
{ name: 'lists-timeline', path: '/lists/:id', component: ListsTimeline },
|
{ name: 'lists-timeline', path: '/lists/:id', component: ListsTimeline },
|
||||||
{ name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit },
|
{ name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit },
|
||||||
{ name: 'lists-new', path: '/lists/new', component: ListsEdit },
|
{ name: 'lists-new', path: '/lists/new', component: ListsEdit },
|
||||||
{ name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true, forceEditMode: true }), beforeEnter: validateAuthenticatedRoute }
|
{ name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true, forceEditMode: true }), beforeEnter: validateAuthenticatedRoute },
|
||||||
|
{ name: 'bookmark-folders', path: '/bookmark_folders', component: BookmarkFolders },
|
||||||
|
{ name: 'bookmark-folder-new', path: '/bookmarks/new-folder', component: BookmarkFolderEdit },
|
||||||
|
{ name: 'bookmark-folder', path: '/bookmarks/:id', component: BookmarkTimeline },
|
||||||
|
{ name: 'bookmark-folder-edit', path: '/bookmarks/:id/edit', component: BookmarkFolderEdit }
|
||||||
]
|
]
|
||||||
|
|
||||||
if (store.state.instance.pleromaChatMessagesAvailable) {
|
if (store.state.instance.pleromaChatMessagesAvailable) {
|
||||||
|
|
|
||||||
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'
|
import Timeline from '../timeline/timeline.vue'
|
||||||
|
|
||||||
const Bookmarks = {
|
const Bookmarks = {
|
||||||
computed: {
|
created () {
|
||||||
timeline () {
|
this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
|
||||||
return this.$store.state.statuses.timelines.bookmarks
|
this.$store.dispatch('startFetchingTimeline', { timeline: 'bookmarks', bookmarkFolderId: this.folderId || null })
|
||||||
}
|
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Timeline
|
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 () {
|
unmounted () {
|
||||||
this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
|
this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
|
||||||
|
this.$store.dispatch('stopFetchingTimeline', 'bookmarks')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
:title="$t('nav.bookmarks')"
|
:title="$t('nav.bookmarks')"
|
||||||
:timeline="timeline"
|
:timeline="timeline"
|
||||||
:timeline-name="'bookmarks'"
|
:timeline-name="'bookmarks'"
|
||||||
|
:bookmark-folder-id="folderId"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -96,6 +96,17 @@ export default {
|
||||||
textOpacity: 0.25,
|
textOpacity: 0.25,
|
||||||
textOpacityMode: 'blend'
|
textOpacityMode: 'blend'
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'Icon',
|
||||||
|
parent: {
|
||||||
|
component: 'Button',
|
||||||
|
state: ['disabled']
|
||||||
|
},
|
||||||
|
directives: {
|
||||||
|
textOpacity: 0.25,
|
||||||
|
textOpacityMode: 'blend'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,13 @@
|
||||||
class="checkbox"
|
class="checkbox"
|
||||||
:class="{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }"
|
:class="{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }"
|
||||||
>
|
>
|
||||||
|
<span
|
||||||
|
v-if="!!$slots.before"
|
||||||
|
class="label -before"
|
||||||
|
:class="{ faint: disabled }"
|
||||||
|
>
|
||||||
|
<slot name="before" />
|
||||||
|
</span>
|
||||||
<input
|
<input
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
class="visible-for-screenreader-only"
|
class="visible-for-screenreader-only"
|
||||||
|
|
@ -14,11 +21,13 @@
|
||||||
<i
|
<i
|
||||||
class="input -checkbox checkbox-indicator"
|
class="input -checkbox checkbox-indicator"
|
||||||
:aria-hidden="true"
|
:aria-hidden="true"
|
||||||
|
:class="{ disabled }"
|
||||||
@transitionend.capture="onTransitionEnd"
|
@transitionend.capture="onTransitionEnd"
|
||||||
/>
|
/>
|
||||||
<span
|
<span
|
||||||
v-if="!!$slots.default"
|
v-if="!!$slots.default"
|
||||||
class="label"
|
class="label -after"
|
||||||
|
:class="{ faint: disabled }"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -93,14 +102,9 @@ export default {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled {
|
.disabled {
|
||||||
.checkbox-indicator::before,
|
.checkbox-indicator::before {
|
||||||
.label {
|
background-color: var(--background);
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
color: var(--text);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -121,8 +125,14 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
& > span {
|
& > .label {
|
||||||
margin-left: 0.5em;
|
&.-after {
|
||||||
|
margin-left: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.-before {
|
||||||
|
margin-right: 0.5em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,15 @@
|
||||||
.color-input {
|
.color-input {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
|
||||||
&-field.input {
|
&-field.input {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
flex: 0 0 0;
|
flex: 0 0 0;
|
||||||
max-width: 9em;
|
max-width: 9em;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
padding: 0.2em 8px;
|
|
||||||
|
|
||||||
input {
|
input {
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
|
|
@ -25,6 +28,7 @@
|
||||||
.nativeColor {
|
.nativeColor {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
input {
|
input {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
|
|
@ -41,10 +45,10 @@
|
||||||
.invalidIndicator,
|
.invalidIndicator,
|
||||||
.transparentIndicator {
|
.transparentIndicator {
|
||||||
flex: 0 0 2em;
|
flex: 0 0 2em;
|
||||||
margin: 0 0.5em;
|
margin: 0.2em 0.5em;
|
||||||
min-width: 2em;
|
min-width: 2em;
|
||||||
align-self: stretch;
|
align-self: stretch;
|
||||||
min-height: 1.5em;
|
min-height: 1.1em;
|
||||||
border-radius: var(--roundness);
|
border-radius: var(--roundness);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -81,9 +85,17 @@
|
||||||
border-bottom-right-radius: var(--roundness);
|
border-bottom-right-radius: var(--roundness);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
&.disabled,
|
||||||
flex: 1 1 auto;
|
&:disabled {
|
||||||
|
.nativeColor input,
|
||||||
|
.computedIndicator,
|
||||||
|
.validIndicator,
|
||||||
|
.invalidIndicator,
|
||||||
|
.transparentIndicator {
|
||||||
|
/* stylelint-disable-next-line declaration-no-important */
|
||||||
|
opacity: 0.25 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
<label
|
<label
|
||||||
:for="name"
|
:for="name"
|
||||||
class="label"
|
class="label"
|
||||||
|
:class="{ faint: !present || disabled }"
|
||||||
>
|
>
|
||||||
{{ label }}
|
{{ label }}
|
||||||
</label>
|
</label>
|
||||||
|
|
@ -14,16 +15,20 @@
|
||||||
:model-value="present"
|
:model-value="present"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
class="opt"
|
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
|
<input
|
||||||
:id="name + '-t'"
|
:id="name + '-t'"
|
||||||
class="textColor unstyled"
|
class="textColor unstyled"
|
||||||
|
:class="{ disabled: !present || disabled }"
|
||||||
type="text"
|
type="text"
|
||||||
:value="modelValue || fallback"
|
:value="modelValue || fallback"
|
||||||
:disabled="!present || disabled"
|
:disabled="!present || disabled"
|
||||||
@input="$emit('update:modelValue', $event.target.value)"
|
@input="updateValue($event.target.value)"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-if="validColor"
|
v-if="validColor"
|
||||||
|
|
@ -51,7 +56,8 @@
|
||||||
type="color"
|
type="color"
|
||||||
:value="modelValue || fallback"
|
:value="modelValue || fallback"
|
||||||
:disabled="!present || disabled"
|
:disabled="!present || disabled"
|
||||||
@input="$emit('update:modelValue', $event.target.value)"
|
:class="{ disabled: !present || disabled }"
|
||||||
|
@input="updateValue($event.target.value)"
|
||||||
>
|
>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -60,6 +66,7 @@
|
||||||
<script>
|
<script>
|
||||||
import Checkbox from '../checkbox/checkbox.vue'
|
import Checkbox from '../checkbox/checkbox.vue'
|
||||||
import { hex2rgb } from '../../services/color_convert/color_convert.js'
|
import { hex2rgb } from '../../services/color_convert/color_convert.js'
|
||||||
|
import { throttle } from 'lodash'
|
||||||
|
|
||||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||||
import {
|
import {
|
||||||
|
|
@ -125,6 +132,11 @@ export default {
|
||||||
computedColor () {
|
computedColor () {
|
||||||
return this.modelValue && this.modelValue.startsWith('--')
|
return this.modelValue && this.modelValue.startsWith('--')
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
updateValue: throttle(function (value) {
|
||||||
|
this.$emit('update:modelValue', value)
|
||||||
|
}, 100)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
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>
|
||||||
|
|
@ -180,7 +180,7 @@ const EmojiPicker = {
|
||||||
if (!this.keepOpen) {
|
if (!this.keepOpen) {
|
||||||
this.$refs.popover.hidePopover()
|
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) {
|
onScroll (startIndex, endIndex, visibleStartIndex, visibleEndIndex) {
|
||||||
const target = this.$refs['emoji-groups'].$el
|
const target = this.$refs['emoji-groups'].$el
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import Popover from '../popover/popover.vue'
|
import Popover from '../popover/popover.vue'
|
||||||
import genRandomSeed from '../../services/random_seed/random_seed.service.js'
|
import genRandomSeed from '../../services/random_seed/random_seed.service.js'
|
||||||
import ConfirmModal from '../confirm_modal/confirm_modal.vue'
|
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 { library } from '@fortawesome/fontawesome-svg-core'
|
||||||
import {
|
import {
|
||||||
faEllipsisH,
|
faEllipsisH,
|
||||||
|
|
@ -36,7 +37,8 @@ const ExtraButtons = {
|
||||||
props: ['status'],
|
props: ['status'],
|
||||||
components: {
|
components: {
|
||||||
Popover,
|
Popover,
|
||||||
ConfirmModal
|
ConfirmModal,
|
||||||
|
StatusBookmarkFolderMenu
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
|
@ -145,6 +147,9 @@ const ExtraButtons = {
|
||||||
canBookmark () {
|
canBookmark () {
|
||||||
return !!this.currentUser
|
return !!this.currentUser
|
||||||
},
|
},
|
||||||
|
bookmarkFolders () {
|
||||||
|
return this.$store.state.instance.pleromaBookmarkFoldersAvailable
|
||||||
|
},
|
||||||
statusLink () {
|
statusLink () {
|
||||||
return `${this.$store.state.instance.server}${this.$router.resolve({ name: 'conversation', params: { id: this.status.id } }).href}`
|
return `${this.$store.state.instance.server}${this.$router.resolve({ name: 'conversation', params: { id: this.status.id } }).href}`
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -87,6 +87,10 @@
|
||||||
icon="bookmark"
|
icon="bookmark"
|
||||||
/><span>{{ $t("status.unbookmark") }}</span>
|
/><span>{{ $t("status.unbookmark") }}</span>
|
||||||
</button>
|
</button>
|
||||||
|
<StatusBookmarkFolderMenu
|
||||||
|
v-if="status.bookmarked && bookmarkFolders"
|
||||||
|
:status="status"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
<button
|
<button
|
||||||
v-if="ownStatus && editingAvailable"
|
v-if="ownStatus && editingAvailable"
|
||||||
|
|
|
||||||
|
|
@ -10,17 +10,18 @@ const hoverGlow = {
|
||||||
export default {
|
export default {
|
||||||
name: 'Input',
|
name: 'Input',
|
||||||
selector: '.input',
|
selector: '.input',
|
||||||
variant: {
|
states: {
|
||||||
|
hover: ':hover:not(.disabled)',
|
||||||
|
focused: ':focus-within',
|
||||||
|
disabled: '.disabled'
|
||||||
|
},
|
||||||
|
variants: {
|
||||||
checkbox: '.-checkbox',
|
checkbox: '.-checkbox',
|
||||||
radio: '.-radio'
|
radio: '.-radio'
|
||||||
},
|
},
|
||||||
states: {
|
|
||||||
disabled: ':disabled',
|
|
||||||
hover: ':hover:not(:disabled)',
|
|
||||||
focused: ':focus-within'
|
|
||||||
},
|
|
||||||
validInnerComponents: [
|
validInnerComponents: [
|
||||||
'Text'
|
'Text',
|
||||||
|
'Icon'
|
||||||
],
|
],
|
||||||
defaultRules: [
|
defaultRules: [
|
||||||
{
|
{
|
||||||
|
|
@ -55,6 +56,34 @@ export default {
|
||||||
directives: {
|
directives: {
|
||||||
shadow: [hoverGlow, '--defaultInputBevel']
|
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'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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 ListsMenuContent from 'src/components/lists_menu/lists_menu_content.vue'
|
||||||
import { mapState, mapGetters } from 'vuex'
|
import { mapState, mapGetters } from 'vuex'
|
||||||
import { TIMELINES, ROOT_ITEMS } from 'src/components/navigation/navigation.js'
|
import { TIMELINES, ROOT_ITEMS } from 'src/components/navigation/navigation.js'
|
||||||
|
|
@ -41,6 +42,7 @@ const NavPanel = {
|
||||||
created () {
|
created () {
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
BookmarkFoldersMenuContent,
|
||||||
ListsMenuContent,
|
ListsMenuContent,
|
||||||
NavigationEntry,
|
NavigationEntry,
|
||||||
NavigationPins,
|
NavigationPins,
|
||||||
|
|
@ -51,6 +53,7 @@ const NavPanel = {
|
||||||
editMode: false,
|
editMode: false,
|
||||||
showTimelines: false,
|
showTimelines: false,
|
||||||
showLists: false,
|
showLists: false,
|
||||||
|
showBookmarkFolders: false,
|
||||||
timelinesList: Object.entries(TIMELINES).map(([k, v]) => ({ ...v, name: k })),
|
timelinesList: Object.entries(TIMELINES).map(([k, v]) => ({ ...v, name: k })),
|
||||||
rootList: Object.entries(ROOT_ITEMS).map(([k, v]) => ({ ...v, name: k }))
|
rootList: Object.entries(ROOT_ITEMS).map(([k, v]) => ({ ...v, name: k }))
|
||||||
}
|
}
|
||||||
|
|
@ -62,6 +65,9 @@ const NavPanel = {
|
||||||
toggleLists () {
|
toggleLists () {
|
||||||
this.showLists = !this.showLists
|
this.showLists = !this.showLists
|
||||||
},
|
},
|
||||||
|
toggleBookmarkFolders () {
|
||||||
|
this.showBookmarkFolders = !this.showBookmarkFolders
|
||||||
|
},
|
||||||
toggleEditMode () {
|
toggleEditMode () {
|
||||||
this.editMode = !this.editMode
|
this.editMode = !this.editMode
|
||||||
},
|
},
|
||||||
|
|
@ -90,7 +96,8 @@ const NavPanel = {
|
||||||
pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable,
|
pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable,
|
||||||
supportsAnnouncements: state => state.announcements.supportsAnnouncements,
|
supportsAnnouncements: state => state.announcements.supportsAnnouncements,
|
||||||
pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems),
|
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 () {
|
timelinesItems () {
|
||||||
return filterNavigation(
|
return filterNavigation(
|
||||||
|
|
@ -102,7 +109,8 @@ const NavPanel = {
|
||||||
hasAnnouncements: this.supportsAnnouncements,
|
hasAnnouncements: this.supportsAnnouncements,
|
||||||
isFederating: this.federating,
|
isFederating: this.federating,
|
||||||
isPrivate: this.privateMode,
|
isPrivate: this.privateMode,
|
||||||
currentUser: this.currentUser
|
currentUser: this.currentUser,
|
||||||
|
supportsBookmarkFolders: this.bookmarkFolders
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
|
|
@ -116,7 +124,8 @@ const NavPanel = {
|
||||||
hasAnnouncements: this.supportsAnnouncements,
|
hasAnnouncements: this.supportsAnnouncements,
|
||||||
isFederating: this.federating,
|
isFederating: this.federating,
|
||||||
isPrivate: this.privateMode,
|
isPrivate: this.privateMode,
|
||||||
currentUser: this.currentUser
|
currentUser: this.currentUser,
|
||||||
|
supportsBookmarkFolders: this.bookmarkFolders
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -83,6 +83,39 @@
|
||||||
class="timelines"
|
class="timelines"
|
||||||
/>
|
/>
|
||||||
</div>
|
</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
|
<NavigationEntry
|
||||||
v-for="item in rootItems"
|
v-for="item in rootItems"
|
||||||
:key="item.name"
|
:key="item.name"
|
||||||
|
|
|
||||||
|
|
@ -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 }) => {
|
return list.filter(({ criteria, anon, anonRoute }) => {
|
||||||
const set = new Set(criteria || [])
|
const set = new Set(criteria || [])
|
||||||
if (!isFederating && set.has('federating')) return false
|
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 ((!currentUser || !currentUser.locked) && set.has('lockedUser')) return false
|
||||||
if (!hasChats && set.has('chats')) return false
|
if (!hasChats && set.has('chats')) return false
|
||||||
if (!hasAnnouncements && set.has('announcements')) return false
|
if (!hasAnnouncements && set.has('announcements')) return false
|
||||||
|
if (supportsBookmarkFolders && set.has('!supportsBookmarkFolders')) return false
|
||||||
return true
|
return true
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
@ -17,3 +18,12 @@ export const getListEntries = state => state.lists.allLists.map(list => ({
|
||||||
labelRaw: list.title,
|
labelRaw: list.title,
|
||||||
iconLetter: list.title[0]
|
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: {
|
bookmarks: {
|
||||||
route: 'bookmarks',
|
route: 'bookmarks',
|
||||||
icon: 'bookmark',
|
icon: 'bookmark',
|
||||||
label: 'nav.bookmarks'
|
label: 'nav.bookmarks',
|
||||||
|
criteria: ['!supportsBookmarkFolders']
|
||||||
},
|
},
|
||||||
favorites: {
|
favorites: {
|
||||||
routeObject: { name: 'user-profile', query: { tab: 'favorites' } },
|
routeObject: { name: 'user-profile', query: { tab: 'favorites' } },
|
||||||
|
|
|
||||||
|
|
@ -22,11 +22,25 @@
|
||||||
:icon="item.icon"
|
:icon="item.icon"
|
||||||
/>
|
/>
|
||||||
</span>
|
</span>
|
||||||
|
<img
|
||||||
|
v-if="item.iconEmojiUrl"
|
||||||
|
class="menu-icon iconEmoji iconEmoji-image"
|
||||||
|
:src="item.iconEmojiUrl"
|
||||||
|
:alt="item.iconEmoji"
|
||||||
|
:title="item.iconEmoji"
|
||||||
|
>
|
||||||
<span
|
<span
|
||||||
v-if="item.iconLetter"
|
v-else-if="item.iconEmoji"
|
||||||
class="icon iconLetter fa-scale-110 menu-icon"
|
class="menu-icon iconEmoji"
|
||||||
>{{ item.iconLetter }}
|
>
|
||||||
|
<span>
|
||||||
|
{{ item.iconEmoji }}
|
||||||
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
<span
|
||||||
|
v-else-if="item.iconLetter"
|
||||||
|
class="icon iconLetter fa-scale-110 menu-icon"
|
||||||
|
>{{ item.iconLetter }}</span>
|
||||||
<span class="label">
|
<span class="label">
|
||||||
{{ item.labelRaw || $t(item.label) }}
|
{{ item.labelRaw || $t(item.label) }}
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -110,5 +124,23 @@
|
||||||
.badge {
|
.badge {
|
||||||
margin: 0 var(--__horizontal-gap);
|
margin: 0 var(--__horizontal-gap);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.iconEmoji {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
object-fit: contain;
|
||||||
|
vertical-align: middle;
|
||||||
|
height: var(--__line-height);
|
||||||
|
width: var(--__line-height);
|
||||||
|
|
||||||
|
> span {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img.iconEmoji {
|
||||||
|
padding: 0.25rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
<label
|
<label
|
||||||
:for="name"
|
:for="name"
|
||||||
class="label"
|
class="label"
|
||||||
|
:class="{ faint: !present || disabled }"
|
||||||
>
|
>
|
||||||
{{ $t('settings.style.common.opacity') }}
|
{{ $t('settings.style.common.opacity') }}
|
||||||
</label>
|
</label>
|
||||||
|
|
@ -22,6 +23,7 @@
|
||||||
type="number"
|
type="number"
|
||||||
:value="modelValue || fallback"
|
:value="modelValue || fallback"
|
||||||
:disabled="!present || disabled"
|
:disabled="!present || disabled"
|
||||||
|
:class="{ disabled: !present || disabled }"
|
||||||
max="1"
|
max="1"
|
||||||
min="0"
|
min="0"
|
||||||
step=".05"
|
step=".05"
|
||||||
|
|
|
||||||
|
|
@ -6,13 +6,14 @@
|
||||||
<select
|
<select
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
:value="modelValue"
|
:value="modelValue"
|
||||||
v-bind="attrs"
|
v-bind="$attrs"
|
||||||
@change="$emit('update:modelValue', $event.target.value)"
|
@change="$emit('update:modelValue', $event.target.value)"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</select>
|
</select>
|
||||||
{{ ' ' }}
|
{{ ' ' }}
|
||||||
<FAIcon
|
<FAIcon
|
||||||
|
v-if="!$attrs.size && !$attrs.multiple"
|
||||||
class="select-down-icon"
|
class="select-down-icon"
|
||||||
icon="chevron-down"
|
icon="chevron-down"
|
||||||
/>
|
/>
|
||||||
|
|
@ -39,6 +40,38 @@ label.Select {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
height: 2em;
|
height: 2em;
|
||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
|
|
||||||
|
&[multiple],
|
||||||
|
&[size] {
|
||||||
|
height: 100%;
|
||||||
|
padding: 0.2em;
|
||||||
|
|
||||||
|
option {
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
&.-active {
|
||||||
|
color: var(--selectionText);
|
||||||
|
background-color: var(--selectionBackground);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled,
|
||||||
|
&:disabled {
|
||||||
|
background-color: var(--background);
|
||||||
|
opacity: 1; /* override browser */
|
||||||
|
color: var(--faint);
|
||||||
|
|
||||||
|
select {
|
||||||
|
&[multiple],
|
||||||
|
&[size] {
|
||||||
|
option.-active {
|
||||||
|
color: var(--faint);
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-down-icon {
|
.select-down-icon {
|
||||||
|
|
|
||||||
|
|
@ -314,7 +314,18 @@ export default {
|
||||||
},
|
},
|
||||||
set (val) {
|
set (val) {
|
||||||
if (val) {
|
if (val) {
|
||||||
this.shadowsLocal[this.shadowSelected] = this.currentShadowFallback.map(_ => Object.assign({}, _))
|
this.shadowsLocal[this.shadowSelected] = (this.currentShadowFallback || [])
|
||||||
|
.map(s => ({
|
||||||
|
name: null,
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
blur: 0,
|
||||||
|
spread: 0,
|
||||||
|
inset: false,
|
||||||
|
color: '#000000',
|
||||||
|
alpha: 1,
|
||||||
|
...s
|
||||||
|
}))
|
||||||
} else {
|
} else {
|
||||||
delete this.shadowsLocal[this.shadowSelected]
|
delete this.shadowsLocal[this.shadowSelected]
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,9 @@
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
||||||
.label {
|
.label {
|
||||||
|
margin-right: 1em;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
line-height: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.opt {
|
.opt {
|
||||||
|
|
@ -48,15 +50,14 @@
|
||||||
|
|
||||||
&[type="range"] {
|
&[type="range"] {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 3em;
|
min-width: 2em;
|
||||||
align-self: flex-start;
|
align-self: center;
|
||||||
|
margin: 0 0.5em;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
&.disabled {
|
&[type="checkbox"] + i {
|
||||||
input,
|
height: 1.1em;
|
||||||
select {
|
align-self: center;
|
||||||
opacity: 0.5;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -123,10 +123,13 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- eslint-disable vue/no-v-text-v-html-on-component -->
|
<!-- eslint-disable vue/no-v-html vue/no-v-text-v-html-on-component -->
|
||||||
<component :is="'style'" v-html="themeV3Preview"/>
|
<component
|
||||||
<!-- eslint-enable vue/no-v-text-v-html-on-component -->
|
:is="'style'"
|
||||||
<preview id="theme-preview"/>
|
v-html="themeV3Preview"
|
||||||
|
/>
|
||||||
|
<!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
|
||||||
|
<preview id="theme-preview" />
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
|
|
@ -934,24 +937,14 @@
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
<div class="override">
|
<div class="override">
|
||||||
<label
|
<Checkbox
|
||||||
for="override"
|
|
||||||
class="label"
|
|
||||||
>
|
|
||||||
{{ $t('settings.style.shadows.override') }}
|
|
||||||
</label>
|
|
||||||
{{ ' ' }}
|
|
||||||
<input
|
|
||||||
id="override"
|
id="override"
|
||||||
v-model="currentShadowOverriden"
|
v-model="currentShadowOverriden"
|
||||||
name="override"
|
name="override"
|
||||||
class="input-override"
|
class="input-override"
|
||||||
type="checkbox"
|
|
||||||
>
|
>
|
||||||
<label
|
{{ $t('settings.style.shadows.override') }}
|
||||||
class="checkbox-label"
|
</Checkbox>
|
||||||
for="override"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
class="btn button-default"
|
class="btn button-default"
|
||||||
|
|
@ -962,38 +955,10 @@
|
||||||
</div>
|
</div>
|
||||||
<ShadowControl
|
<ShadowControl
|
||||||
v-model="currentShadow"
|
v-model="currentShadow"
|
||||||
:ready="!!currentShadowFallback"
|
:separate-inset="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'"
|
||||||
:fallback="currentShadowFallback"
|
:fallback="currentShadowFallback"
|
||||||
/>
|
/>
|
||||||
<div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
|
|
||||||
<i18n-t
|
|
||||||
scope="global"
|
|
||||||
keypath="settings.style.shadows.filter_hint.always_drop_shadow"
|
|
||||||
tag="p"
|
|
||||||
>
|
|
||||||
<code>filter: drop-shadow()</code>
|
|
||||||
</i18n-t>
|
|
||||||
<p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
|
|
||||||
<i18n-t
|
|
||||||
scope="global"
|
|
||||||
keypath="settings.style.shadows.filter_hint.drop_shadow_syntax"
|
|
||||||
tag="p"
|
|
||||||
>
|
|
||||||
<code>drop-shadow</code>
|
|
||||||
<code>spread-radius</code>
|
|
||||||
<code>inset</code>
|
|
||||||
</i18n-t>
|
|
||||||
<i18n-t
|
|
||||||
scope="global"
|
|
||||||
keypath="settings.style.shadows.filter_hint.inset_classic"
|
|
||||||
tag="p"
|
|
||||||
>
|
|
||||||
<code>box-shadow</code>
|
|
||||||
</i18n-t>
|
|
||||||
<p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
:label="$t('settings.style.fonts._tab_label')"
|
:label="$t('settings.style.fonts._tab_label')"
|
||||||
class="fonts-container"
|
class="fonts-container"
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,12 @@
|
||||||
import ColorInput from '../color_input/color_input.vue'
|
import ColorInput from 'src/components/color_input/color_input.vue'
|
||||||
import OpacityInput from '../opacity_input/opacity_input.vue'
|
import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
|
||||||
import Select from '../select/select.vue'
|
import Select from 'src/components/select/select.vue'
|
||||||
import { getCssShadow } from '../../services/theme_data/theme_data.service.js'
|
import Checkbox from 'src/components/checkbox/checkbox.vue'
|
||||||
import { hex2rgb } from '../../services/color_convert/color_convert.js'
|
import Popover from 'src/components/popover/popover.vue'
|
||||||
|
import ComponentPreview from 'src/components/component_preview/component_preview.vue'
|
||||||
|
import { getCssShadow, getCssShadowFilter } from '../../services/theme_data/theme_data.service.js'
|
||||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||||
|
import { throttle } from 'lodash'
|
||||||
import {
|
import {
|
||||||
faTimes,
|
faTimes,
|
||||||
faChevronDown,
|
faChevronDown,
|
||||||
|
|
@ -30,93 +33,100 @@ const toModel = (object = {}) => ({
|
||||||
})
|
})
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
// 'modelValue' and 'Fallback' can be undefined, but if they are
|
|
||||||
// initially vue won't detect it when they become something else
|
|
||||||
// therefore i'm using "ready" which should be passed as true when
|
|
||||||
// data becomes available
|
|
||||||
props: [
|
props: [
|
||||||
'modelValue', 'fallback', 'ready'
|
'modelValue', 'fallback', 'separateInset', 'noPreview', 'disabled'
|
||||||
],
|
],
|
||||||
emits: ['update:modelValue'],
|
emits: ['update:modelValue', 'subShadowSelected'],
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
selectedId: 0,
|
selectedId: 0,
|
||||||
// TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason)
|
// TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason)
|
||||||
cValue: (this.modelValue || this.fallback || []).map(toModel)
|
cValue: (this.modelValue ?? this.fallback ?? []).map(toModel)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
ColorInput,
|
ColorInput,
|
||||||
OpacityInput,
|
OpacityInput,
|
||||||
Select
|
Select,
|
||||||
|
Checkbox,
|
||||||
|
Popover,
|
||||||
|
ComponentPreview
|
||||||
|
},
|
||||||
|
beforeUpdate () {
|
||||||
|
this.cValue = (this.modelValue ?? this.fallback ?? []).map(toModel)
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
selected () {
|
||||||
|
const selected = this.cValue[this.selectedId]
|
||||||
|
if (selected) {
|
||||||
|
return { ...selected }
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
},
|
||||||
|
present () {
|
||||||
|
return this.selected != null && !this.usingFallback
|
||||||
|
},
|
||||||
|
shadowsAreNull () {
|
||||||
|
return this.modelValue == null
|
||||||
|
},
|
||||||
|
currentFallback () {
|
||||||
|
return this.fallback?.[this.selectedId]
|
||||||
|
},
|
||||||
|
moveUpValid () {
|
||||||
|
return this.selectedId > 0
|
||||||
|
},
|
||||||
|
moveDnValid () {
|
||||||
|
return this.selectedId < this.cValue.length - 1
|
||||||
|
},
|
||||||
|
usingFallback () {
|
||||||
|
return this.modelValue == null
|
||||||
|
},
|
||||||
|
style () {
|
||||||
|
if (this.separateInset) {
|
||||||
|
return {
|
||||||
|
filter: getCssShadowFilter(this.cValue),
|
||||||
|
boxShadow: getCssShadow(this.cValue, true)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
boxShadow: getCssShadow(this.cValue)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
selected (value) {
|
||||||
|
this.$emit('subShadowSelected', this.selectedId)
|
||||||
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
updateProperty: throttle(function (prop, value) {
|
||||||
|
this.cValue[this.selectedId][prop] = value
|
||||||
|
if (prop === 'inset' && value === false && this.separateInset) {
|
||||||
|
this.cValue[this.selectedId].spread = 0
|
||||||
|
}
|
||||||
|
this.$emit('update:modelValue', this.cValue)
|
||||||
|
}, 100),
|
||||||
add () {
|
add () {
|
||||||
this.cValue.push(toModel(this.selected))
|
this.cValue.push(toModel(this.selected))
|
||||||
this.selectedId = this.cValue.length - 1
|
this.selectedId = Math.max(this.cValue.length - 1, 0)
|
||||||
|
this.$emit('update:modelValue', this.cValue)
|
||||||
},
|
},
|
||||||
del () {
|
del () {
|
||||||
this.cValue.splice(this.selectedId, 1)
|
this.cValue.splice(this.selectedId, 1)
|
||||||
this.selectedId = this.cValue.length === 0 ? undefined : Math.max(this.selectedId - 1, 0)
|
this.selectedId = this.cValue.length === 0 ? undefined : Math.max(this.selectedId - 1, 0)
|
||||||
|
this.$emit('update:modelValue', this.cValue)
|
||||||
},
|
},
|
||||||
moveUp () {
|
moveUp () {
|
||||||
const movable = this.cValue.splice(this.selectedId, 1)[0]
|
const movable = this.cValue.splice(this.selectedId, 1)[0]
|
||||||
this.cValue.splice(this.selectedId - 1, 0, movable)
|
this.cValue.splice(this.selectedId - 1, 0, movable)
|
||||||
this.selectedId -= 1
|
this.selectedId -= 1
|
||||||
|
this.$emit('update:modelValue', this.cValue)
|
||||||
},
|
},
|
||||||
moveDn () {
|
moveDn () {
|
||||||
const movable = this.cValue.splice(this.selectedId, 1)[0]
|
const movable = this.cValue.splice(this.selectedId, 1)[0]
|
||||||
this.cValue.splice(this.selectedId + 1, 0, movable)
|
this.cValue.splice(this.selectedId + 1, 0, movable)
|
||||||
this.selectedId += 1
|
this.selectedId += 1
|
||||||
}
|
this.$emit('update:modelValue', this.cValue)
|
||||||
},
|
|
||||||
beforeUpdate () {
|
|
||||||
this.cValue = this.modelValue || this.fallback
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
anyShadows () {
|
|
||||||
return this.cValue.length > 0
|
|
||||||
},
|
|
||||||
anyShadowsFallback () {
|
|
||||||
return this.fallback.length > 0
|
|
||||||
},
|
|
||||||
selected () {
|
|
||||||
if (this.ready && this.anyShadows) {
|
|
||||||
return this.cValue[this.selectedId]
|
|
||||||
} else {
|
|
||||||
return toModel({})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
currentFallback () {
|
|
||||||
if (this.ready && this.anyShadowsFallback) {
|
|
||||||
return this.fallback[this.selectedId]
|
|
||||||
} else {
|
|
||||||
return toModel({})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
moveUpValid () {
|
|
||||||
return this.ready && this.selectedId > 0
|
|
||||||
},
|
|
||||||
moveDnValid () {
|
|
||||||
return this.ready && this.selectedId < this.cValue.length - 1
|
|
||||||
},
|
|
||||||
present () {
|
|
||||||
return this.ready &&
|
|
||||||
typeof this.cValue[this.selectedId] !== 'undefined' &&
|
|
||||||
!this.usingFallback
|
|
||||||
},
|
|
||||||
usingFallback () {
|
|
||||||
return typeof this.modelValue === 'undefined'
|
|
||||||
},
|
|
||||||
rgb () {
|
|
||||||
return hex2rgb(this.selected.color)
|
|
||||||
},
|
|
||||||
style () {
|
|
||||||
return this.ready
|
|
||||||
? {
|
|
||||||
boxShadow: getCssShadow(this.fallback)
|
|
||||||
}
|
|
||||||
: {}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
105
src/components/shadow_control/shadow_control.scss
Normal file
105
src/components/shadow_control/shadow_control.scss
Normal file
|
|
@ -0,0 +1,105 @@
|
||||||
|
.settings-modal .settings-modal-panel .shadow-control {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: stretch;
|
||||||
|
grid-gap: 0.25em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
|
||||||
|
.shadow-switcher {
|
||||||
|
order: 1;
|
||||||
|
flex: 1 0 6em;
|
||||||
|
min-width: 6em;
|
||||||
|
margin-right: 0.125em;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.shadow-list {
|
||||||
|
flex: 1 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrange-buttons {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
display: grid;
|
||||||
|
grid-auto-columns: 1fr;
|
||||||
|
grid-auto-flow: column;
|
||||||
|
margin-top: 0.25em;
|
||||||
|
|
||||||
|
.button-default {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-tweak {
|
||||||
|
order: 3;
|
||||||
|
flex: 2 0 10em;
|
||||||
|
min-width: 10em;
|
||||||
|
margin-left: 0.125em;
|
||||||
|
margin-right: 0.125em;
|
||||||
|
|
||||||
|
/* hack */
|
||||||
|
.input-boolean {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.label {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-string {
|
||||||
|
flex: 1 0 5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.id-control {
|
||||||
|
align-items: stretch;
|
||||||
|
|
||||||
|
.shadow-switcher,
|
||||||
|
.btn {
|
||||||
|
min-width: 1px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 0 0.4em;
|
||||||
|
margin: 0 0.1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.-no-preview {
|
||||||
|
.shadow-tweak {
|
||||||
|
order: 0;
|
||||||
|
flex: 2 0 8em;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-range {
|
||||||
|
min-width: 5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.inset-alert {
|
||||||
|
padding: 0.25em 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.disabled {
|
||||||
|
.inset-alert {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-preview {
|
||||||
|
order: 2;
|
||||||
|
flex: 3 3 15em;
|
||||||
|
min-width: 10em;
|
||||||
|
margin-left: 0.125em;
|
||||||
|
align-self: start;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.inset-tooltip {
|
||||||
|
padding: 0.5em;
|
||||||
|
max-width: 30em;
|
||||||
|
}
|
||||||
|
|
@ -1,91 +1,51 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="shadow-control"
|
class="label shadow-control"
|
||||||
:class="{ disabled: !present }"
|
:class="{ disabled: disabled || !present, '-no-preview': noPreview }"
|
||||||
>
|
>
|
||||||
<div class="shadow-preview-container">
|
<ComponentPreview
|
||||||
<div
|
v-if="!noPreview"
|
||||||
:disabled="!present"
|
class="shadow-preview"
|
||||||
class="y-shift-control"
|
:shadow-control="true"
|
||||||
|
:shadow="selected"
|
||||||
|
:preview-style="style"
|
||||||
|
:disabled="disabled || !present"
|
||||||
|
@update:shadow="({ axis, value }) => updateProperty(axis, value)"
|
||||||
|
/>
|
||||||
|
<div class="shadow-switcher">
|
||||||
|
<Select
|
||||||
|
id="shadow-list"
|
||||||
|
v-model="selectedId"
|
||||||
|
class="shadow-list"
|
||||||
|
size="10"
|
||||||
|
:disabled="shadowsAreNull"
|
||||||
>
|
>
|
||||||
<input
|
<option
|
||||||
v-model="selected.y"
|
v-for="(shadow, index) in cValue"
|
||||||
:disabled="!present"
|
:key="index"
|
||||||
class="input input-number"
|
:value="index"
|
||||||
type="number"
|
:class="{ '-active': index === Number(selectedId) }"
|
||||||
>
|
>
|
||||||
<div class="wrap">
|
{{ shadow?.name ?? $t('settings.style.shadows.shadow_id', { value: index }) }}
|
||||||
<input
|
</option>
|
||||||
v-model="selected.y"
|
</Select>
|
||||||
:disabled="!present"
|
|
||||||
class="input input-range"
|
|
||||||
type="range"
|
|
||||||
max="20"
|
|
||||||
min="-20"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="preview-window">
|
|
||||||
<div
|
|
||||||
class="preview-block"
|
|
||||||
:style="style"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
:disabled="!present"
|
class="id-control btn-group arrange-buttons"
|
||||||
class="x-shift-control"
|
|
||||||
>
|
>
|
||||||
<input
|
|
||||||
v-model="selected.x"
|
|
||||||
:disabled="!present"
|
|
||||||
class="input input-number"
|
|
||||||
type="number"
|
|
||||||
>
|
|
||||||
<div class="wrap">
|
|
||||||
<input
|
|
||||||
v-model="selected.x"
|
|
||||||
:disabled="!present"
|
|
||||||
class="input input-range"
|
|
||||||
type="range"
|
|
||||||
max="20"
|
|
||||||
min="-20"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="shadow-tweak">
|
|
||||||
<div
|
|
||||||
:disabled="usingFallback"
|
|
||||||
class="id-control style-control"
|
|
||||||
>
|
|
||||||
<Select
|
|
||||||
id="shadow-switcher"
|
|
||||||
v-model="selectedId"
|
|
||||||
class="shadow-switcher"
|
|
||||||
:disabled="!ready || usingFallback"
|
|
||||||
>
|
|
||||||
<option
|
|
||||||
v-for="(shadow, index) in cValue"
|
|
||||||
:key="index"
|
|
||||||
:value="index"
|
|
||||||
>
|
|
||||||
{{ $t('settings.style.shadows.shadow_id', { value: index }) }}
|
|
||||||
</option>
|
|
||||||
</Select>
|
|
||||||
<button
|
<button
|
||||||
class="btn button-default"
|
class="btn button-default"
|
||||||
:disabled="!ready || !present"
|
:disabled="disabled || shadowsAreNull"
|
||||||
@click="del"
|
@click="add"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
fixed-width
|
fixed-width
|
||||||
icon="times"
|
icon="plus"
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="btn button-default"
|
class="btn button-default"
|
||||||
:disabled="!moveUpValid"
|
:disabled="disabled || !moveUpValid"
|
||||||
|
:class="{ disabled: disabled || !moveUpValid }"
|
||||||
@click="moveUp"
|
@click="moveUp"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
|
|
@ -95,7 +55,8 @@
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="btn button-default"
|
class="btn button-default"
|
||||||
:disabled="!moveDnValid"
|
:disabled="disabled || !moveDnValid"
|
||||||
|
:class="{ disabled: disabled || !moveDnValid }"
|
||||||
@click="moveDn"
|
@click="moveDn"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
|
|
@ -105,222 +66,191 @@
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="btn button-default"
|
class="btn button-default"
|
||||||
:disabled="usingFallback"
|
:disabled="disabled || !present"
|
||||||
@click="add"
|
:class="{ disabled: disabled || !present }"
|
||||||
|
@click="del"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
fixed-width
|
fixed-width
|
||||||
icon="plus"
|
icon="times"
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="shadow-tweak">
|
||||||
<div
|
<div
|
||||||
:disabled="!present"
|
:class="{ disabled: disabled || !present }"
|
||||||
class="inset-control style-control"
|
class="name-control style-control"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
for="inset"
|
for="name"
|
||||||
class="label"
|
class="label"
|
||||||
|
:class="{ faint: disabled || !present }"
|
||||||
>
|
>
|
||||||
{{ $t('settings.style.shadows.inset') }}
|
{{ $t('settings.style.shadows.name') }}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
id="inset"
|
id="name"
|
||||||
v-model="selected.inset"
|
:value="selected?.name"
|
||||||
:disabled="!present"
|
:disabled="disabled || !present"
|
||||||
name="inset"
|
:class="{ disabled: disabled || !present }"
|
||||||
class="input -checkbox input-inset visible-for-screenreader-only"
|
name="name"
|
||||||
type="checkbox"
|
class="input input-string"
|
||||||
|
@input="e => updateProperty('name', e.target.value)"
|
||||||
>
|
>
|
||||||
<label
|
|
||||||
class="checkbox-label"
|
|
||||||
for="inset"
|
|
||||||
:aria-hidden="true"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
:disabled="!present"
|
:disabled="disabled || !present"
|
||||||
|
class="inset-control style-control"
|
||||||
|
>
|
||||||
|
<Checkbox
|
||||||
|
id="inset"
|
||||||
|
:value="selected?.inset"
|
||||||
|
:disabled="disabled || !present"
|
||||||
|
name="inset"
|
||||||
|
class="input-inset input-boolean"
|
||||||
|
@input="e => updateProperty('inset', e.target.checked)"
|
||||||
|
>
|
||||||
|
<template #before>
|
||||||
|
{{ $t('settings.style.shadows.inset') }}
|
||||||
|
</template>
|
||||||
|
</Checkbox>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
:disabled="disabled || !present"
|
||||||
|
:class="{ disabled: disabled || !present }"
|
||||||
class="blur-control style-control"
|
class="blur-control style-control"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
for="spread"
|
for="blur"
|
||||||
class="label"
|
class="label"
|
||||||
|
:class="{ faint: disabled || !present }"
|
||||||
>
|
>
|
||||||
{{ $t('settings.style.shadows.blur') }}
|
{{ $t('settings.style.shadows.blur') }}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
id="blur"
|
id="blur"
|
||||||
v-model="selected.blur"
|
:value="selected?.blur"
|
||||||
:disabled="!present"
|
:disabled="disabled || !present"
|
||||||
|
:class="{ disabled: disabled || !present }"
|
||||||
name="blur"
|
name="blur"
|
||||||
class="input input-range"
|
class="input input-range"
|
||||||
type="range"
|
type="range"
|
||||||
max="20"
|
max="20"
|
||||||
min="0"
|
min="0"
|
||||||
|
@input="e => updateProperty('blur', e.target.value)"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
v-model="selected.blur"
|
:value="selected?.blur"
|
||||||
:disabled="!present"
|
class="input input-number -small"
|
||||||
class="input input-number"
|
:disabled="disabled || !present"
|
||||||
|
:class="{ disabled: disabled || !present }"
|
||||||
type="number"
|
type="number"
|
||||||
min="0"
|
min="0"
|
||||||
|
@input="e => updateProperty('blur', e.target.value)"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
:disabled="!present"
|
|
||||||
class="spread-control style-control"
|
class="spread-control style-control"
|
||||||
|
:class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
for="spread"
|
for="spread"
|
||||||
class="label"
|
class="label"
|
||||||
|
:class="{ faint: disabled || !present || (separateInset && !selected?.inset) }"
|
||||||
>
|
>
|
||||||
{{ $t('settings.style.shadows.spread') }}
|
{{ $t('settings.style.shadows.spread') }}
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
id="spread"
|
id="spread"
|
||||||
v-model="selected.spread"
|
:value="selected?.spread"
|
||||||
:disabled="!present"
|
:disabled="disabled || !present || (separateInset && !selected?.inset)"
|
||||||
|
:class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
|
||||||
name="spread"
|
name="spread"
|
||||||
class="input input-range"
|
class="input input-range"
|
||||||
type="range"
|
type="range"
|
||||||
max="20"
|
max="20"
|
||||||
min="-20"
|
min="-20"
|
||||||
|
@input="e => updateProperty('spread', e.target.value)"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
v-model="selected.spread"
|
:value="selected?.spread"
|
||||||
:disabled="!present"
|
class="input input-number -small"
|
||||||
class="input input-number"
|
:class="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
|
||||||
|
:disabled="{ disabled: disabled || !present || (separateInset && !selected?.inset) }"
|
||||||
type="number"
|
type="number"
|
||||||
|
@input="e => updateProperty('spread', e.target.value)"
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<ColorInput
|
<ColorInput
|
||||||
v-model="selected.color"
|
:model-value="selected?.color"
|
||||||
:disabled="!present"
|
:disabled="disabled || !present"
|
||||||
:label="$t('settings.style.common.color')"
|
:label="$t('settings.style.common.color')"
|
||||||
:fallback="currentFallback.color"
|
:fallback="currentFallback?.color"
|
||||||
:show-optional-tickbox="false"
|
:show-optional-tickbox="false"
|
||||||
name="shadow"
|
name="shadow"
|
||||||
|
@update:modelValue="e => updateProperty('color', e)"
|
||||||
/>
|
/>
|
||||||
<OpacityInput
|
<OpacityInput
|
||||||
v-model="selected.alpha"
|
:model-value="selected?.alpha"
|
||||||
:disabled="!present"
|
:disabled="disabled || !present"
|
||||||
|
@update:modelValue="e => updateProperty('alpha', e)"
|
||||||
/>
|
/>
|
||||||
<i18n-t
|
<i18n-t
|
||||||
scope="global"
|
scope="global"
|
||||||
keypath="settings.style.shadows.hintV3"
|
keypath="settings.style.shadows.hintV3"
|
||||||
|
:class="{ faint: disabled || !present }"
|
||||||
tag="p"
|
tag="p"
|
||||||
>
|
>
|
||||||
<code>--variable,mod</code>
|
<code>--variable,mod</code>
|
||||||
</i18n-t>
|
</i18n-t>
|
||||||
|
<Popover
|
||||||
|
v-if="separateInset"
|
||||||
|
trigger="hover"
|
||||||
|
>
|
||||||
|
<template #trigger>
|
||||||
|
<div
|
||||||
|
class="inset-alert alert warning"
|
||||||
|
>
|
||||||
|
<FAIcon icon="exclamation-triangle" />
|
||||||
|
|
||||||
|
{{ $t('settings.style.shadows.filter_hint.avatar_inset_short') }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #content>
|
||||||
|
<div class="inset-tooltip">
|
||||||
|
<i18n-t
|
||||||
|
scope="global"
|
||||||
|
keypath="settings.style.shadows.filter_hint.always_drop_shadow"
|
||||||
|
tag="p"
|
||||||
|
>
|
||||||
|
<code>filter: drop-shadow()</code>
|
||||||
|
</i18n-t>
|
||||||
|
<p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
|
||||||
|
<i18n-t
|
||||||
|
scope="global"
|
||||||
|
keypath="settings.style.shadows.filter_hint.drop_shadow_syntax"
|
||||||
|
tag="p"
|
||||||
|
>
|
||||||
|
<code>drop-shadow</code>
|
||||||
|
<code>spread-radius</code>
|
||||||
|
<code>inset</code>
|
||||||
|
</i18n-t>
|
||||||
|
<i18n-t
|
||||||
|
scope="global"
|
||||||
|
keypath="settings.style.shadows.filter_hint.inset_classic"
|
||||||
|
tag="p"
|
||||||
|
>
|
||||||
|
<code>box-shadow</code>
|
||||||
|
</i18n-t>
|
||||||
|
<p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</Popover>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script src="./shadow_control.js"></script>
|
<script src="./shadow_control.js"></script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style src="./shadow_control.scss" lang="scss"></style>
|
||||||
.shadow-control {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
|
|
||||||
.shadow-preview-container,
|
|
||||||
.shadow-tweak {
|
|
||||||
margin: 5px 6px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shadow-preview-container {
|
|
||||||
flex: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
input[type="number"] {
|
|
||||||
width: 5em;
|
|
||||||
min-width: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-shift-control,
|
|
||||||
.y-shift-control {
|
|
||||||
display: flex;
|
|
||||||
flex: 0;
|
|
||||||
|
|
||||||
&[disabled="disabled"] * {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-shift-control {
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.x-shift-control .wrap,
|
|
||||||
input[type="range"] {
|
|
||||||
margin: 0;
|
|
||||||
width: 15em;
|
|
||||||
height: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.y-shift-control {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-end;
|
|
||||||
|
|
||||||
.wrap {
|
|
||||||
width: 2em;
|
|
||||||
height: 15em;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="range"] {
|
|
||||||
transform-origin: 1em 1em;
|
|
||||||
transform: rotate(90deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview-window {
|
|
||||||
flex: 1;
|
|
||||||
background-color: #999;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
background-image:
|
|
||||||
linear-gradient(45deg, #666 25%, transparent 25%),
|
|
||||||
linear-gradient(-45deg, #666 25%, transparent 25%),
|
|
||||||
linear-gradient(45deg, transparent 75%, #666 75%),
|
|
||||||
linear-gradient(-45deg, transparent 75%, #666 75%);
|
|
||||||
background-size: 20px 20px;
|
|
||||||
background-position: 0 0, 0 10px, 10px -10px, -10px 0;
|
|
||||||
border-radius: var(--roundness);
|
|
||||||
|
|
||||||
.preview-block {
|
|
||||||
width: 33%;
|
|
||||||
height: 33%;
|
|
||||||
border-radius: var(--roundness);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.shadow-tweak {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 280px;
|
|
||||||
|
|
||||||
.id-control {
|
|
||||||
align-items: stretch;
|
|
||||||
|
|
||||||
.shadow-switcher {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shadow-switcher,
|
|
||||||
.btn {
|
|
||||||
min-width: 1px;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
padding: 0 0.4em;
|
|
||||||
margin: 0 0.1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||||
|
import { faChevronRight, faFolder } from '@fortawesome/free-solid-svg-icons'
|
||||||
|
import { mapState } from 'vuex'
|
||||||
|
|
||||||
|
import Popover from '../popover/popover.vue'
|
||||||
|
|
||||||
|
library.add(faChevronRight, faFolder)
|
||||||
|
|
||||||
|
const StatusBookmarkFolderMenu = {
|
||||||
|
props: [
|
||||||
|
'status'
|
||||||
|
],
|
||||||
|
data () {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Popover
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState({
|
||||||
|
folders: state => state.bookmarkFolders.allFolders
|
||||||
|
}),
|
||||||
|
folderId () {
|
||||||
|
return this.status.bookmark_folder_id
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleFolder (id) {
|
||||||
|
const value = id === this.folderId ? null : id
|
||||||
|
|
||||||
|
this.$store.dispatch('bookmark', { id: this.status.id, bookmark_folder_id: value })
|
||||||
|
.then(() => this.$emit('onSuccess'))
|
||||||
|
.catch(err => this.$emit('onError', err.error.error))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default StatusBookmarkFolderMenu
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<template>
|
||||||
|
<div class="StatusBookmarkFolderMenu">
|
||||||
|
<Popover
|
||||||
|
trigger="hover"
|
||||||
|
placement="left"
|
||||||
|
remove-padding
|
||||||
|
>
|
||||||
|
<template #content>
|
||||||
|
<div class="dropdown-menu">
|
||||||
|
<button
|
||||||
|
v-for="folder in folders"
|
||||||
|
:key="folder.id"
|
||||||
|
class="menu-item dropdown-item"
|
||||||
|
@click="toggleFolder(folder.id)"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="input menu-checkbox -radio"
|
||||||
|
:class="{ 'menu-checkbox-checked': status.bookmark_folder_id == folder.id }"
|
||||||
|
/>
|
||||||
|
{{ folder.name }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #trigger>
|
||||||
|
<button class="menu-item dropdown-item dropdown-item-icon -has-submenu">
|
||||||
|
<FAIcon
|
||||||
|
fixed-width
|
||||||
|
icon="folder"
|
||||||
|
/>{{ $t('bookmark_folders.select_folder') }}<FAIcon
|
||||||
|
class="chevron-icon"
|
||||||
|
size="lg"
|
||||||
|
icon="chevron-right"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script src="./status_bookmark_folder_menu.js"></script>
|
||||||
|
|
@ -26,6 +26,7 @@ const Timeline = {
|
||||||
'userId',
|
'userId',
|
||||||
'listId',
|
'listId',
|
||||||
'statusId',
|
'statusId',
|
||||||
|
'bookmarkFolderId',
|
||||||
'tag',
|
'tag',
|
||||||
'embedded',
|
'embedded',
|
||||||
'count',
|
'count',
|
||||||
|
|
@ -123,6 +124,7 @@ const Timeline = {
|
||||||
userId: this.userId,
|
userId: this.userId,
|
||||||
listId: this.listId,
|
listId: this.listId,
|
||||||
statusId: this.statusId,
|
statusId: this.statusId,
|
||||||
|
bookmarkFolderId: this.bookmarkFolderId,
|
||||||
tag: this.tag
|
tag: this.tag
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
@ -186,6 +188,7 @@ const Timeline = {
|
||||||
userId: this.userId,
|
userId: this.userId,
|
||||||
listId: this.listId,
|
listId: this.listId,
|
||||||
statusId: this.statusId,
|
statusId: this.statusId,
|
||||||
|
bookmarkFolderId: this.bookmarkFolderId,
|
||||||
tag: this.tag
|
tag: this.tag
|
||||||
}).then(({ statuses }) => {
|
}).then(({ statuses }) => {
|
||||||
if (statuses && statuses.length === 0) {
|
if (statuses && statuses.length === 0) {
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@ import Popover from '../popover/popover.vue'
|
||||||
import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
|
import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
|
||||||
import { mapState } from 'vuex'
|
import { mapState } from 'vuex'
|
||||||
import { ListsMenuContent } from '../lists_menu/lists_menu_content.vue'
|
import { ListsMenuContent } from '../lists_menu/lists_menu_content.vue'
|
||||||
|
import { BookmarkFoldersMenuContent } from '../bookmark_folders_menu/bookmark_folders_menu_content.vue'
|
||||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||||
import { TIMELINES } from 'src/components/navigation/navigation.js'
|
import { TIMELINES } from 'src/components/navigation/navigation.js'
|
||||||
import { filterNavigation } from 'src/components/navigation/filter.js'
|
import { filterNavigation } from 'src/components/navigation/filter.js'
|
||||||
|
|
@ -13,10 +14,10 @@ library.add(faChevronDown)
|
||||||
|
|
||||||
// Route -> i18n key mapping, exported and not in the computed
|
// Route -> i18n key mapping, exported and not in the computed
|
||||||
// because nav panel benefits from the same information.
|
// because nav panel benefits from the same information.
|
||||||
export const timelineNames = () => {
|
export const timelineNames = (supportsBookmarkFolders) => {
|
||||||
return {
|
return {
|
||||||
friends: 'nav.home_timeline',
|
friends: 'nav.home_timeline',
|
||||||
bookmarks: 'nav.bookmarks',
|
bookmarks: supportsBookmarkFolders ? 'nav.all_bookmarks' : 'nav.bookmarks',
|
||||||
dms: 'nav.dms',
|
dms: 'nav.dms',
|
||||||
'public-timeline': 'nav.public_tl',
|
'public-timeline': 'nav.public_tl',
|
||||||
'public-external-timeline': 'nav.twkn',
|
'public-external-timeline': 'nav.twkn',
|
||||||
|
|
@ -28,7 +29,8 @@ const TimelineMenu = {
|
||||||
components: {
|
components: {
|
||||||
Popover,
|
Popover,
|
||||||
NavigationEntry,
|
NavigationEntry,
|
||||||
ListsMenuContent
|
ListsMenuContent,
|
||||||
|
BookmarkFoldersMenuContent
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
|
@ -36,7 +38,7 @@ const TimelineMenu = {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created () {
|
created () {
|
||||||
if (timelineNames()[this.$route.name]) {
|
if (timelineNames(this.bookmarkFolders)[this.$route.name]) {
|
||||||
this.$store.dispatch('setLastTimeline', this.$route.name)
|
this.$store.dispatch('setLastTimeline', this.$route.name)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -45,10 +47,15 @@ const TimelineMenu = {
|
||||||
const route = this.$route.name
|
const route = this.$route.name
|
||||||
return route === 'lists-timeline'
|
return route === 'lists-timeline'
|
||||||
},
|
},
|
||||||
|
useBookmarkFoldersMenu () {
|
||||||
|
const route = this.$route.name
|
||||||
|
return this.bookmarkFolders && (route === 'bookmark-folder' || route === 'bookmarks')
|
||||||
|
},
|
||||||
...mapState({
|
...mapState({
|
||||||
currentUser: state => state.users.currentUser,
|
currentUser: state => state.users.currentUser,
|
||||||
privateMode: state => state.instance.private,
|
privateMode: state => state.instance.private,
|
||||||
federating: state => state.instance.federating
|
federating: state => state.instance.federating,
|
||||||
|
bookmarkFolders: state => state.instance.pleromaBookmarkFoldersAvailable
|
||||||
}),
|
}),
|
||||||
timelinesList () {
|
timelinesList () {
|
||||||
return filterNavigation(
|
return filterNavigation(
|
||||||
|
|
@ -57,7 +64,8 @@ const TimelineMenu = {
|
||||||
hasChats: this.pleromaChatMessagesAvailable,
|
hasChats: this.pleromaChatMessagesAvailable,
|
||||||
isFederating: this.federating,
|
isFederating: this.federating,
|
||||||
isPrivate: this.privateMode,
|
isPrivate: this.privateMode,
|
||||||
currentUser: this.currentUser
|
currentUser: this.currentUser,
|
||||||
|
supportsBookmarkFolders: this.bookmarkFolders
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
@ -89,7 +97,10 @@ const TimelineMenu = {
|
||||||
if (route === 'lists-timeline') {
|
if (route === 'lists-timeline') {
|
||||||
return this.$store.getters.findListTitle(this.$route.params.id)
|
return this.$store.getters.findListTitle(this.$route.params.id)
|
||||||
}
|
}
|
||||||
const i18nkey = timelineNames()[this.$route.name]
|
if (route === 'bookmark-folder') {
|
||||||
|
return this.$store.getters.findBookmarkFolderName(this.$route.params.id)
|
||||||
|
}
|
||||||
|
const i18nkey = timelineNames(this.bookmarkFolders)[this.$route.name]
|
||||||
return i18nkey ? this.$t(i18nkey) : route
|
return i18nkey ? this.$t(i18nkey) : route
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,10 @@
|
||||||
:show-pin="false"
|
:show-pin="false"
|
||||||
class="timelines"
|
class="timelines"
|
||||||
/>
|
/>
|
||||||
|
<BookmarkFoldersMenuContent
|
||||||
|
v-else-if="useBookmarkFoldersMenu"
|
||||||
|
class="timelines"
|
||||||
|
/>
|
||||||
<ul v-else>
|
<ul v-else>
|
||||||
<NavigationEntry
|
<NavigationEntry
|
||||||
v-for="item in timelinesList"
|
v-for="item in timelinesList"
|
||||||
|
|
|
||||||
|
|
@ -174,6 +174,8 @@
|
||||||
"home_timeline": "Home timeline",
|
"home_timeline": "Home timeline",
|
||||||
"twkn": "Known Network",
|
"twkn": "Known Network",
|
||||||
"bookmarks": "Bookmarks",
|
"bookmarks": "Bookmarks",
|
||||||
|
"all_bookmarks": "All bookmarks",
|
||||||
|
"bookmark_folders": "Bookmark folders",
|
||||||
"user_search": "User Search",
|
"user_search": "User Search",
|
||||||
"search": "Search",
|
"search": "Search",
|
||||||
"search_close": "Close search bar",
|
"search_close": "Close search bar",
|
||||||
|
|
@ -874,6 +876,9 @@
|
||||||
"component": "Component",
|
"component": "Component",
|
||||||
"override": "Override",
|
"override": "Override",
|
||||||
"shadow_id": "Shadow #{value}",
|
"shadow_id": "Shadow #{value}",
|
||||||
|
"offset": "Shadow offset",
|
||||||
|
"light_grid": "Use light checkerboard",
|
||||||
|
"name": "Name",
|
||||||
"blur": "Blur",
|
"blur": "Blur",
|
||||||
"spread": "Spread",
|
"spread": "Spread",
|
||||||
"inset": "Inset",
|
"inset": "Inset",
|
||||||
|
|
@ -881,6 +886,7 @@
|
||||||
"filter_hint": {
|
"filter_hint": {
|
||||||
"always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.",
|
"always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.",
|
||||||
"drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.",
|
"drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.",
|
||||||
|
"avatar_inset_short": "Separate inset shadow",
|
||||||
"avatar_inset": "Please note that combining both inset and non-inset shadows on avatars might give unexpected results with transparent avatars.",
|
"avatar_inset": "Please note that combining both inset and non-inset shadows on avatars might give unexpected results with transparent avatars.",
|
||||||
"spread_zero": "Shadows with spread > 0 will appear as if it was set to zero",
|
"spread_zero": "Shadows with spread > 0 will appear as if it was set to zero",
|
||||||
"inset_classic": "Inset shadows will be using {0}"
|
"inset_classic": "Inset shadows will be using {0}"
|
||||||
|
|
@ -1405,5 +1411,30 @@
|
||||||
},
|
},
|
||||||
"unicode_domain_indicator": {
|
"unicode_domain_indicator": {
|
||||||
"tooltip": "This domain contains non-ascii characters."
|
"tooltip": "This domain contains non-ascii characters."
|
||||||
|
},
|
||||||
|
"splash": {
|
||||||
|
"loading": "Loading...",
|
||||||
|
"theme": "Applying theme, please wait warmly...",
|
||||||
|
"instance": "Getting instance info...",
|
||||||
|
"settings": "Applying settings...",
|
||||||
|
"almost": "Reticulating splines...",
|
||||||
|
"fun_1": "Drink more water",
|
||||||
|
"fun_2": "Take it easy!",
|
||||||
|
"fun_3": "Suya...",
|
||||||
|
"fun_4": "My Pleroma machine is full power!",
|
||||||
|
"error": "Something went wrong"
|
||||||
|
},
|
||||||
|
"bookmark_folders": {
|
||||||
|
"select_folder": "Select bookmark folder",
|
||||||
|
"creating_folder": "Creating bookmark folder",
|
||||||
|
"editing_folder": "Editing folder {folderName}",
|
||||||
|
"emoji": "Emoji",
|
||||||
|
"name": "Folder name",
|
||||||
|
"new": "New Folder",
|
||||||
|
"create": "Create folder",
|
||||||
|
"delete": "Delete folder",
|
||||||
|
"update_folder": "Save changes",
|
||||||
|
"really_delete": "Do you really want to delete the folder?",
|
||||||
|
"error": "Error manipulating bookmark folders: {0}"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
115
src/main.js
115
src/main.js
|
|
@ -24,9 +24,9 @@ import pollsModule from './modules/polls.js'
|
||||||
import postStatusModule from './modules/postStatus.js'
|
import postStatusModule from './modules/postStatus.js'
|
||||||
import editStatusModule from './modules/editStatus.js'
|
import editStatusModule from './modules/editStatus.js'
|
||||||
import statusHistoryModule from './modules/statusHistory.js'
|
import statusHistoryModule from './modules/statusHistory.js'
|
||||||
|
|
||||||
import chatsModule from './modules/chats.js'
|
import chatsModule from './modules/chats.js'
|
||||||
import announcementsModule from './modules/announcements.js'
|
import announcementsModule from './modules/announcements.js'
|
||||||
|
import bookmarkFoldersModule from './modules/bookmark_folders.js'
|
||||||
|
|
||||||
import { createI18n } from 'vue-i18n'
|
import { createI18n } from 'vue-i18n'
|
||||||
|
|
||||||
|
|
@ -58,55 +58,76 @@ const persistedStateOptions = {
|
||||||
};
|
};
|
||||||
|
|
||||||
(async () => {
|
(async () => {
|
||||||
let storageError = false
|
const isFox = Math.floor(Math.random() * 2) > 0 ? '_fox' : ''
|
||||||
const plugins = [pushNotifications]
|
|
||||||
|
const splashError = (i18n, e) => {
|
||||||
|
const throbber = document.querySelector('#throbber')
|
||||||
|
throbber.addEventListener('animationend', () => {
|
||||||
|
document.querySelector('#mascot').src = `/static/pleromatan_orz${isFox}.png`
|
||||||
|
})
|
||||||
|
throbber.classList.add('dead')
|
||||||
|
document.querySelector('#status').textContent = i18n.global.t('splash.error')
|
||||||
|
console.error('PleromaFE failed to initialize: ', e)
|
||||||
|
}
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const persistedState = await createPersistedState(persistedStateOptions)
|
let storageError
|
||||||
plugins.push(persistedState)
|
const plugins = [pushNotifications]
|
||||||
} catch (e) {
|
try {
|
||||||
console.error(e)
|
const persistedState = await createPersistedState(persistedStateOptions)
|
||||||
storageError = true
|
plugins.push(persistedState)
|
||||||
}
|
} catch (e) {
|
||||||
const store = createStore({
|
console.error('Storage error', e)
|
||||||
modules: {
|
storageError = e
|
||||||
i18n: {
|
}
|
||||||
getters: {
|
document.querySelector('#mascot').src = `/static/pleromatan_apology${isFox}.png`
|
||||||
i18n: () => i18n.global
|
document.querySelector('#status').removeAttribute('class')
|
||||||
}
|
document.querySelector('#status').textContent = i18n.global.t('splash.loading')
|
||||||
|
document.querySelector('#splash-credit').textContent = i18n.global.t('update.art_by', { linkToArtist: 'pipivovott' })
|
||||||
|
const store = createStore({
|
||||||
|
modules: {
|
||||||
|
i18n: {
|
||||||
|
getters: {
|
||||||
|
i18n: () => i18n.global
|
||||||
|
}
|
||||||
|
},
|
||||||
|
interface: interfaceModule,
|
||||||
|
instance: instanceModule,
|
||||||
|
// TODO refactor users/statuses modules, they depend on each other
|
||||||
|
users: usersModule,
|
||||||
|
statuses: statusesModule,
|
||||||
|
notifications: notificationsModule,
|
||||||
|
lists: listsModule,
|
||||||
|
api: apiModule,
|
||||||
|
config: configModule,
|
||||||
|
profileConfig: profileConfigModule,
|
||||||
|
serverSideStorage: serverSideStorageModule,
|
||||||
|
adminSettings: adminSettingsModule,
|
||||||
|
shout: shoutModule,
|
||||||
|
oauth: oauthModule,
|
||||||
|
authFlow: authFlowModule,
|
||||||
|
mediaViewer: mediaViewerModule,
|
||||||
|
oauthTokens: oauthTokensModule,
|
||||||
|
reports: reportsModule,
|
||||||
|
polls: pollsModule,
|
||||||
|
postStatus: postStatusModule,
|
||||||
|
editStatus: editStatusModule,
|
||||||
|
statusHistory: statusHistoryModule,
|
||||||
|
chats: chatsModule,
|
||||||
|
announcements: announcementsModule,
|
||||||
|
bookmarkFolders: bookmarkFoldersModule
|
||||||
},
|
},
|
||||||
interface: interfaceModule,
|
plugins,
|
||||||
instance: instanceModule,
|
strict: false // Socket modifies itself, let's ignore this for now.
|
||||||
// TODO refactor users/statuses modules, they depend on each other
|
// strict: process.env.NODE_ENV !== 'production'
|
||||||
users: usersModule,
|
})
|
||||||
statuses: statusesModule,
|
if (storageError) {
|
||||||
notifications: notificationsModule,
|
store.dispatch('pushGlobalNotice', { messageKey: 'errors.storage_unavailable', level: 'error' })
|
||||||
lists: listsModule,
|
}
|
||||||
api: apiModule,
|
return await afterStoreSetup({ store, i18n })
|
||||||
config: configModule,
|
} catch (e) {
|
||||||
profileConfig: profileConfigModule,
|
splashError(i18n, e)
|
||||||
serverSideStorage: serverSideStorageModule,
|
|
||||||
adminSettings: adminSettingsModule,
|
|
||||||
shout: shoutModule,
|
|
||||||
oauth: oauthModule,
|
|
||||||
authFlow: authFlowModule,
|
|
||||||
mediaViewer: mediaViewerModule,
|
|
||||||
oauthTokens: oauthTokensModule,
|
|
||||||
reports: reportsModule,
|
|
||||||
polls: pollsModule,
|
|
||||||
postStatus: postStatusModule,
|
|
||||||
editStatus: editStatusModule,
|
|
||||||
statusHistory: statusHistoryModule,
|
|
||||||
chats: chatsModule,
|
|
||||||
announcements: announcementsModule
|
|
||||||
},
|
|
||||||
plugins,
|
|
||||||
strict: false // Socket modifies itself, let's ignore this for now.
|
|
||||||
// strict: process.env.NODE_ENV !== 'production'
|
|
||||||
})
|
|
||||||
if (storageError) {
|
|
||||||
store.dispatch('pushGlobalNotice', { messageKey: 'errors.storage_unavailable', level: 'error' })
|
|
||||||
}
|
}
|
||||||
afterStoreSetup({ store, i18n })
|
|
||||||
})()
|
})()
|
||||||
|
|
||||||
// These are inlined by webpack's DefinePlugin
|
// These are inlined by webpack's DefinePlugin
|
||||||
|
|
|
||||||
|
|
@ -203,12 +203,13 @@ const api = {
|
||||||
tag = false,
|
tag = false,
|
||||||
userId = false,
|
userId = false,
|
||||||
listId = false,
|
listId = false,
|
||||||
statusId = false
|
statusId = false,
|
||||||
|
bookmarkFolderId = false
|
||||||
}) {
|
}) {
|
||||||
if (store.state.fetchers[timeline]) return
|
if (store.state.fetchers[timeline]) return
|
||||||
|
|
||||||
const fetcher = store.state.backendInteractor.startFetchingTimeline({
|
const fetcher = store.state.backendInteractor.startFetchingTimeline({
|
||||||
timeline, store, userId, listId, statusId, tag
|
timeline, store, userId, listId, statusId, bookmarkFolderId, tag
|
||||||
})
|
})
|
||||||
store.commit('addFetcher', { fetcherName: timeline, fetcher })
|
store.commit('addFetcher', { fetcherName: timeline, fetcher })
|
||||||
},
|
},
|
||||||
|
|
@ -272,6 +273,18 @@ const api = {
|
||||||
store.commit('removeFetcher', { fetcherName: 'lists', fetcher })
|
store.commit('removeFetcher', { fetcherName: 'lists', fetcher })
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// Bookmark folders
|
||||||
|
startFetchingBookmarkFolders (store) {
|
||||||
|
if (store.state.fetchers.bookmarkFolders) return
|
||||||
|
const fetcher = store.state.backendInteractor.startFetchingBookmarkFolders({ store })
|
||||||
|
store.commit('addFetcher', { fetcherName: 'bookmarkFolders', fetcher })
|
||||||
|
},
|
||||||
|
stopFetchingBookmarkFolders (store) {
|
||||||
|
const fetcher = store.state.fetchers.bookmarkFolders
|
||||||
|
if (!fetcher) return
|
||||||
|
store.commit('removeFetcher', { fetcherName: 'bookmarkFolders', fetcher })
|
||||||
|
},
|
||||||
|
|
||||||
// Pleroma websocket
|
// Pleroma websocket
|
||||||
setWsToken (store, token) {
|
setWsToken (store, token) {
|
||||||
store.commit('setWsToken', token)
|
store.commit('setWsToken', token)
|
||||||
|
|
|
||||||
66
src/modules/bookmark_folders.js
Normal file
66
src/modules/bookmark_folders.js
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
import { remove, find } from 'lodash'
|
||||||
|
|
||||||
|
export const defaultState = {
|
||||||
|
allFolders: []
|
||||||
|
}
|
||||||
|
|
||||||
|
export const mutations = {
|
||||||
|
setBookmarkFolders (state, value) {
|
||||||
|
state.allFolders = value
|
||||||
|
},
|
||||||
|
setBookmarkFolder (state, { id, name, emoji, emoji_url: emojiUrl }) {
|
||||||
|
const entry = find(state.allFolders, { id })
|
||||||
|
if (!entry) {
|
||||||
|
state.allFolders.push({ id, name, emoji, emoji_url: emojiUrl })
|
||||||
|
} else {
|
||||||
|
entry.name = name
|
||||||
|
entry.emoji = emoji
|
||||||
|
entry.emoji_url = emojiUrl
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deleteBookmarkFolder (state, { folderId }) {
|
||||||
|
remove(state.allFolders, folder => folder.id === folderId)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const actions = {
|
||||||
|
setBookmarkFolders ({ commit }, value) {
|
||||||
|
commit('setBookmarkFolders', value)
|
||||||
|
},
|
||||||
|
createBookmarkFolder ({ rootState, commit }, { name, emoji }) {
|
||||||
|
return rootState.api.backendInteractor.createBookmarkFolder({ name, emoji })
|
||||||
|
.then((folder) => {
|
||||||
|
commit('setBookmarkFolder', folder)
|
||||||
|
return folder
|
||||||
|
})
|
||||||
|
},
|
||||||
|
setBookmarkFolder ({ rootState, commit }, { folderId, name, emoji }) {
|
||||||
|
return rootState.api.backendInteractor.updateBookmarkFolder({ folderId, name, emoji })
|
||||||
|
.then((folder) => {
|
||||||
|
commit('setBookmarkFolder', folder)
|
||||||
|
return folder
|
||||||
|
})
|
||||||
|
},
|
||||||
|
deleteBookmarkFolder ({ rootState, commit }, { folderId }) {
|
||||||
|
rootState.api.backendInteractor.deleteBookmarkFolder({ folderId })
|
||||||
|
commit('deleteBookmarkFolder', { folderId })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getters = {
|
||||||
|
findBookmarkFolderName: state => id => {
|
||||||
|
const folder = state.allFolders.find(folder => folder.id === id)
|
||||||
|
|
||||||
|
if (!folder) return
|
||||||
|
return folder.name
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const bookmarkFolders = {
|
||||||
|
state: defaultState,
|
||||||
|
mutations,
|
||||||
|
actions,
|
||||||
|
getters
|
||||||
|
}
|
||||||
|
|
||||||
|
export default bookmarkFolders
|
||||||
|
|
@ -140,6 +140,7 @@ const defaultState = {
|
||||||
shoutAvailable: false,
|
shoutAvailable: false,
|
||||||
pleromaChatMessagesAvailable: false,
|
pleromaChatMessagesAvailable: false,
|
||||||
pleromaCustomEmojiReactionsAvailable: false,
|
pleromaCustomEmojiReactionsAvailable: false,
|
||||||
|
pleromaBookmarkFoldersAvailable: false,
|
||||||
gopherAvailable: false,
|
gopherAvailable: false,
|
||||||
mediaProxyAvailable: false,
|
mediaProxyAvailable: false,
|
||||||
suggestionsEnabled: false,
|
suggestionsEnabled: false,
|
||||||
|
|
|
||||||
|
|
@ -385,10 +385,12 @@ export const mutations = {
|
||||||
setBookmarked (state, { status, value }) {
|
setBookmarked (state, { status, value }) {
|
||||||
const newStatus = state.allStatusesObject[status.id]
|
const newStatus = state.allStatusesObject[status.id]
|
||||||
newStatus.bookmarked = value
|
newStatus.bookmarked = value
|
||||||
|
newStatus.bookmark_folder_id = status.bookmark_folder_id
|
||||||
},
|
},
|
||||||
setBookmarkedConfirm (state, { status }) {
|
setBookmarkedConfirm (state, { status }) {
|
||||||
const newStatus = state.allStatusesObject[status.id]
|
const newStatus = state.allStatusesObject[status.id]
|
||||||
newStatus.bookmarked = status.bookmarked
|
newStatus.bookmarked = status.bookmarked
|
||||||
|
if (status.pleroma) newStatus.bookmark_folder_id = status.pleroma.bookmark_folder
|
||||||
},
|
},
|
||||||
setDeleted (state, { status }) {
|
setDeleted (state, { status }) {
|
||||||
const newStatus = state.allStatusesObject[status.id]
|
const newStatus = state.allStatusesObject[status.id]
|
||||||
|
|
@ -569,7 +571,7 @@ const statuses = {
|
||||||
},
|
},
|
||||||
bookmark ({ rootState, commit }, status) {
|
bookmark ({ rootState, commit }, status) {
|
||||||
commit('setBookmarked', { status, value: true })
|
commit('setBookmarked', { status, value: true })
|
||||||
rootState.api.backendInteractor.bookmarkStatus({ id: status.id })
|
rootState.api.backendInteractor.bookmarkStatus({ id: status.id, folder_id: status.bookmark_folder_id })
|
||||||
.then(status => {
|
.then(status => {
|
||||||
commit('setBookmarkedConfirm', { status })
|
commit('setBookmarkedConfirm', { status })
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
|
@ -579,6 +579,7 @@ const users = {
|
||||||
store.commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
|
store.commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
|
||||||
store.dispatch('stopFetchingNotifications')
|
store.dispatch('stopFetchingNotifications')
|
||||||
store.dispatch('stopFetchingLists')
|
store.dispatch('stopFetchingLists')
|
||||||
|
store.dispatch('stopFetchingBookmarkFolders')
|
||||||
store.dispatch('stopFetchingFollowRequests')
|
store.dispatch('stopFetchingFollowRequests')
|
||||||
store.commit('clearNotifications')
|
store.commit('clearNotifications')
|
||||||
store.commit('resetStatuses')
|
store.commit('resetStatuses')
|
||||||
|
|
@ -635,6 +636,7 @@ const users = {
|
||||||
}
|
}
|
||||||
|
|
||||||
dispatch('startFetchingLists')
|
dispatch('startFetchingLists')
|
||||||
|
dispatch('startFetchingBookmarkFolders')
|
||||||
|
|
||||||
if (user.locked) {
|
if (user.locked) {
|
||||||
dispatch('startFetchingFollowRequests')
|
dispatch('startFetchingFollowRequests')
|
||||||
|
|
|
||||||
|
|
@ -110,6 +110,8 @@ const PLEROMA_DELETE_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcemen
|
||||||
const PLEROMA_SCROBBLES_URL = id => `/api/v1/pleroma/accounts/${id}/scrobbles`
|
const PLEROMA_SCROBBLES_URL = id => `/api/v1/pleroma/accounts/${id}/scrobbles`
|
||||||
const PLEROMA_STATUS_QUOTES_URL = id => `/api/v1/pleroma/statuses/${id}/quotes`
|
const PLEROMA_STATUS_QUOTES_URL = id => `/api/v1/pleroma/statuses/${id}/quotes`
|
||||||
const PLEROMA_USER_FAVORITES_TIMELINE_URL = id => `/api/v1/pleroma/accounts/${id}/favourites`
|
const PLEROMA_USER_FAVORITES_TIMELINE_URL = id => `/api/v1/pleroma/accounts/${id}/favourites`
|
||||||
|
const PLEROMA_BOOKMARK_FOLDERS_URL = '/api/v1/pleroma/bookmark_folders'
|
||||||
|
const PLEROMA_BOOKMARK_FOLDER_URL = id => `/api/v1/pleroma/bookmark_folders/${id}`
|
||||||
|
|
||||||
const PLEROMA_ADMIN_CONFIG_URL = '/api/pleroma/admin/config'
|
const PLEROMA_ADMIN_CONFIG_URL = '/api/pleroma/admin/config'
|
||||||
const PLEROMA_ADMIN_DESCRIPTIONS_URL = '/api/pleroma/admin/config/descriptions'
|
const PLEROMA_ADMIN_DESCRIPTIONS_URL = '/api/pleroma/admin/config/descriptions'
|
||||||
|
|
@ -690,7 +692,8 @@ const fetchTimeline = ({
|
||||||
tag = false,
|
tag = false,
|
||||||
withMuted = false,
|
withMuted = false,
|
||||||
replyVisibility = 'all',
|
replyVisibility = 'all',
|
||||||
includeTypes = []
|
includeTypes = [],
|
||||||
|
bookmarkFolderId = false
|
||||||
}) => {
|
}) => {
|
||||||
const timelineUrls = {
|
const timelineUrls = {
|
||||||
public: MASTODON_PUBLIC_TIMELINE,
|
public: MASTODON_PUBLIC_TIMELINE,
|
||||||
|
|
@ -760,6 +763,9 @@ const fetchTimeline = ({
|
||||||
params.push(['include_types[]', type])
|
params.push(['include_types[]', type])
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
if (timeline === 'bookmarks' && bookmarkFolderId) {
|
||||||
|
params.push(['folder_id', bookmarkFolderId])
|
||||||
|
}
|
||||||
|
|
||||||
params.push(['limit', 20])
|
params.push(['limit', 20])
|
||||||
|
|
||||||
|
|
@ -829,11 +835,14 @@ const unretweet = ({ id, credentials }) => {
|
||||||
.then((data) => parseStatus(data))
|
.then((data) => parseStatus(data))
|
||||||
}
|
}
|
||||||
|
|
||||||
const bookmarkStatus = ({ id, credentials }) => {
|
const bookmarkStatus = ({ id, credentials, ...options }) => {
|
||||||
return promisedRequest({
|
return promisedRequest({
|
||||||
url: MASTODON_BOOKMARK_STATUS_URL(id),
|
url: MASTODON_BOOKMARK_STATUS_URL(id),
|
||||||
headers: authHeaders(credentials),
|
headers: authHeaders(credentials),
|
||||||
method: 'POST'
|
method: 'POST',
|
||||||
|
payload: {
|
||||||
|
folder_id: options.folder_id
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -1893,6 +1902,44 @@ const deleteEmojiFile = ({ packName, shortcode }) => {
|
||||||
return fetch(`${PLEROMA_EMOJI_UPDATE_FILE_URL(packName)}&shortcode=${shortcode}`, { method: 'DELETE' })
|
return fetch(`${PLEROMA_EMOJI_UPDATE_FILE_URL(packName)}&shortcode=${shortcode}`, { method: 'DELETE' })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const fetchBookmarkFolders = ({ credentials }) => {
|
||||||
|
const url = PLEROMA_BOOKMARK_FOLDERS_URL
|
||||||
|
return fetch(url, { headers: authHeaders(credentials) })
|
||||||
|
.then((data) => data.json())
|
||||||
|
}
|
||||||
|
|
||||||
|
const createBookmarkFolder = ({ name, emoji, credentials }) => {
|
||||||
|
const url = PLEROMA_BOOKMARK_FOLDERS_URL
|
||||||
|
const headers = authHeaders(credentials)
|
||||||
|
headers['Content-Type'] = 'application/json'
|
||||||
|
|
||||||
|
return fetch(url, {
|
||||||
|
headers,
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({ name, emoji })
|
||||||
|
}).then((data) => data.json())
|
||||||
|
}
|
||||||
|
|
||||||
|
const updateBookmarkFolder = ({ folderId, name, emoji, credentials }) => {
|
||||||
|
const url = PLEROMA_BOOKMARK_FOLDER_URL(folderId)
|
||||||
|
const headers = authHeaders(credentials)
|
||||||
|
headers['Content-Type'] = 'application/json'
|
||||||
|
|
||||||
|
return fetch(url, {
|
||||||
|
headers,
|
||||||
|
method: 'PATCH',
|
||||||
|
body: JSON.stringify({ name, emoji })
|
||||||
|
}).then((data) => data.json())
|
||||||
|
}
|
||||||
|
|
||||||
|
const deleteBookmarkFolder = ({ folderId, credentials }) => {
|
||||||
|
const url = PLEROMA_BOOKMARK_FOLDER_URL(folderId)
|
||||||
|
return fetch(url, {
|
||||||
|
method: 'DELETE',
|
||||||
|
headers: authHeaders(credentials)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
const apiService = {
|
const apiService = {
|
||||||
verifyCredentials,
|
verifyCredentials,
|
||||||
fetchTimeline,
|
fetchTimeline,
|
||||||
|
|
@ -2023,7 +2070,11 @@ const apiService = {
|
||||||
updateEmojiFile,
|
updateEmojiFile,
|
||||||
deleteEmojiFile,
|
deleteEmojiFile,
|
||||||
listRemoteEmojiPacks,
|
listRemoteEmojiPacks,
|
||||||
downloadRemoteEmojiPack
|
downloadRemoteEmojiPack,
|
||||||
|
fetchBookmarkFolders,
|
||||||
|
createBookmarkFolder,
|
||||||
|
updateBookmarkFolder,
|
||||||
|
deleteBookmarkFolder
|
||||||
}
|
}
|
||||||
|
|
||||||
export default apiService
|
export default apiService
|
||||||
|
|
|
||||||
|
|
@ -3,10 +3,11 @@ import timelineFetcher from '../timeline_fetcher/timeline_fetcher.service.js'
|
||||||
import notificationsFetcher from '../notifications_fetcher/notifications_fetcher.service.js'
|
import notificationsFetcher from '../notifications_fetcher/notifications_fetcher.service.js'
|
||||||
import followRequestFetcher from '../../services/follow_request_fetcher/follow_request_fetcher.service'
|
import followRequestFetcher from '../../services/follow_request_fetcher/follow_request_fetcher.service'
|
||||||
import listsFetcher from '../../services/lists_fetcher/lists_fetcher.service.js'
|
import listsFetcher from '../../services/lists_fetcher/lists_fetcher.service.js'
|
||||||
|
import bookmarkFoldersFetcher from '../../services/bookmark_folders_fetcher/bookmark_folders_fetcher.service.js'
|
||||||
|
|
||||||
const backendInteractorService = credentials => ({
|
const backendInteractorService = credentials => ({
|
||||||
startFetchingTimeline ({ timeline, store, userId = false, listId = false, statusId = false, tag }) {
|
startFetchingTimeline ({ timeline, store, userId = false, listId = false, statusId = false, bookmarkFolderId = false, tag }) {
|
||||||
return timelineFetcher.startFetching({ timeline, store, credentials, userId, listId, statusId, tag })
|
return timelineFetcher.startFetching({ timeline, store, credentials, userId, listId, statusId, bookmarkFolderId, tag })
|
||||||
},
|
},
|
||||||
|
|
||||||
fetchTimeline (args) {
|
fetchTimeline (args) {
|
||||||
|
|
@ -29,6 +30,10 @@ const backendInteractorService = credentials => ({
|
||||||
return listsFetcher.startFetching({ store, credentials })
|
return listsFetcher.startFetching({ store, credentials })
|
||||||
},
|
},
|
||||||
|
|
||||||
|
startFetchingBookmarkFolders ({ store }) {
|
||||||
|
return bookmarkFoldersFetcher.startFetching({ store, credentials })
|
||||||
|
},
|
||||||
|
|
||||||
startUserSocket ({ store }) {
|
startUserSocket ({ store }) {
|
||||||
const serv = store.rootState.instance.server.replace('http', 'ws')
|
const serv = store.rootState.instance.server.replace('http', 'ws')
|
||||||
const url = serv + getMastodonSocketURI({ credentials, stream: 'user' })
|
const url = serv + getMastodonSocketURI({ credentials, stream: 'user' })
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
import apiService from '../api/api.service.js'
|
||||||
|
import { promiseInterval } from '../promise_interval/promise_interval.js'
|
||||||
|
|
||||||
|
const fetchAndUpdate = ({ store, credentials }) => {
|
||||||
|
return apiService.fetchBookmarkFolders({ credentials })
|
||||||
|
.then(bookmarkFolders => {
|
||||||
|
store.commit('setBookmarkFolders', bookmarkFolders)
|
||||||
|
}, () => {})
|
||||||
|
.catch(() => {})
|
||||||
|
}
|
||||||
|
|
||||||
|
const startFetching = ({ credentials, store }) => {
|
||||||
|
const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
|
||||||
|
boundFetchAndUpdate()
|
||||||
|
return promiseInterval(boundFetchAndUpdate, 240000)
|
||||||
|
}
|
||||||
|
|
||||||
|
const bookmarkFoldersFetcher = {
|
||||||
|
startFetching
|
||||||
|
}
|
||||||
|
|
||||||
|
export default bookmarkFoldersFetcher
|
||||||
|
|
@ -332,6 +332,7 @@ export const parseStatus = (data) => {
|
||||||
output.quote_url = pleroma.quote_url
|
output.quote_url = pleroma.quote_url
|
||||||
output.quote_visible = pleroma.quote_visible
|
output.quote_visible = pleroma.quote_visible
|
||||||
output.quotes_count = pleroma.quotes_count
|
output.quotes_count = pleroma.quotes_count
|
||||||
|
output.bookmark_folder_id = pleroma.bookmark_folder
|
||||||
} else {
|
} else {
|
||||||
output.text = data.content
|
output.text = data.content
|
||||||
output.summary = data.spoiler_text
|
output.summary = data.spoiler_text
|
||||||
|
|
|
||||||
|
|
@ -43,16 +43,16 @@ const adoptStyleSheets = (styles) => {
|
||||||
// is nothing to do here.
|
// is nothing to do here.
|
||||||
}
|
}
|
||||||
|
|
||||||
export const generateTheme = async (inputRuleset, callbacks, debug) => {
|
export const generateTheme = (inputRuleset, callbacks, debug) => {
|
||||||
const {
|
const {
|
||||||
onNewRule = (rule, isLazy) => {},
|
onNewRule = (rule, isLazy) => {},
|
||||||
onLazyFinished = () => {},
|
onLazyFinished = () => {},
|
||||||
onEagerFinished = () => {}
|
onEagerFinished = () => {}
|
||||||
} = callbacks
|
} = callbacks
|
||||||
|
|
||||||
// Assuming that "worst case scenario background" is panel background since it's the most likely one
|
|
||||||
const themes3 = init({
|
const themes3 = init({
|
||||||
inputRuleset,
|
inputRuleset,
|
||||||
|
// Assuming that "worst case scenario background" is panel background since it's the most likely one
|
||||||
ultimateBackgroundColor: inputRuleset[0].directives['--bg'].split('|')[1].trim(),
|
ultimateBackgroundColor: inputRuleset[0].directives['--bg'].split('|')[1].trim(),
|
||||||
debug
|
debug
|
||||||
})
|
})
|
||||||
|
|
@ -146,11 +146,11 @@ export const tryLoadCache = () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
|
export const applyTheme = (input, onFinish = (data) => {}, debug) => {
|
||||||
const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
|
const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
|
||||||
const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
|
const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
|
||||||
|
|
||||||
const { lazyProcessFunc } = await generateTheme(
|
const { lazyProcessFunc } = generateTheme(
|
||||||
input,
|
input,
|
||||||
{
|
{
|
||||||
onNewRule (rule, isLazy) {
|
onNewRule (rule, isLazy) {
|
||||||
|
|
@ -169,15 +169,22 @@ export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
|
||||||
adoptStyleSheets([eagerStyles, lazyStyles])
|
adoptStyleSheets([eagerStyles, lazyStyles])
|
||||||
const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] }
|
const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] }
|
||||||
onFinish(cache)
|
onFinish(cache)
|
||||||
localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
|
try {
|
||||||
|
localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
|
||||||
|
} catch (e) {
|
||||||
|
localStorage.removeItem('pleroma-fe-theme-cache')
|
||||||
|
try {
|
||||||
|
localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('cannot save cache!', e)
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
debug
|
debug
|
||||||
)
|
)
|
||||||
|
|
||||||
setTimeout(lazyProcessFunc, 0)
|
setTimeout(lazyProcessFunc, 0)
|
||||||
|
|
||||||
return Promise.resolve()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const extractStyleConfig = ({
|
const extractStyleConfig = ({
|
||||||
|
|
@ -222,7 +229,7 @@ const extractStyleConfig = ({
|
||||||
|
|
||||||
const defaultStyleConfig = extractStyleConfig(defaultState)
|
const defaultStyleConfig = extractStyleConfig(defaultState)
|
||||||
|
|
||||||
export const applyConfig = (input) => {
|
export const applyConfig = (input, i18n) => {
|
||||||
const config = extractStyleConfig(input)
|
const config = extractStyleConfig(input)
|
||||||
|
|
||||||
if (config === defaultStyleConfig) {
|
if (config === defaultStyleConfig) {
|
||||||
|
|
@ -230,8 +237,6 @@ export const applyConfig = (input) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const head = document.head
|
const head = document.head
|
||||||
const body = document.body
|
|
||||||
body.classList.add('hidden')
|
|
||||||
|
|
||||||
const rules = Object
|
const rules = Object
|
||||||
.entries(config)
|
.entries(config)
|
||||||
|
|
@ -252,8 +257,6 @@ export const applyConfig = (input) => {
|
||||||
--roundness: var(--forcedRoundness) !important;
|
--roundness: var(--forcedRoundness) !important;
|
||||||
}`, 'index-max')
|
}`, 'index-max')
|
||||||
}
|
}
|
||||||
|
|
||||||
body.classList.remove('hidden')
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const getThemes = () => {
|
export const getThemes = () => {
|
||||||
|
|
|
||||||
|
|
@ -452,7 +452,7 @@ export const getCssShadow = (input, usesDropShadow) => {
|
||||||
]).join(' ')).join(', ')
|
]).join(' ')).join(', ')
|
||||||
}
|
}
|
||||||
|
|
||||||
const getCssShadowFilter = (input) => {
|
export const getCssShadowFilter = (input) => {
|
||||||
if (input.length === 0) {
|
if (input.length === 0) {
|
||||||
return 'none'
|
return 'none'
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -182,7 +182,7 @@ export const init = ({
|
||||||
|
|
||||||
const rulesetUnsorted = [
|
const rulesetUnsorted = [
|
||||||
...Object.values(components)
|
...Object.values(components)
|
||||||
.map(c => (c.defaultRules || []).map(r => ({ component: c.name, ...r, source: 'Built-in' })))
|
.map(c => (c.defaultRules || []).map(r => ({ source: 'Built-in', component: c.name, ...r })))
|
||||||
.reduce((acc, arr) => [...acc, ...arr], []),
|
.reduce((acc, arr) => [...acc, ...arr], []),
|
||||||
...inputRuleset
|
...inputRuleset
|
||||||
].map(rule => {
|
].map(rule => {
|
||||||
|
|
@ -198,18 +198,33 @@ export const init = ({
|
||||||
|
|
||||||
const ruleset = rulesetUnsorted
|
const ruleset = rulesetUnsorted
|
||||||
.map((data, index) => ({ data, index }))
|
.map((data, index) => ({ data, index }))
|
||||||
.sort(({ data: a, index: ai }, { data: b, index: bi }) => {
|
.toSorted(({ data: a, index: ai }, { data: b, index: bi }) => {
|
||||||
const parentsA = unroll(a).length
|
const parentsA = unroll(a).length
|
||||||
const parentsB = unroll(b).length
|
const parentsB = unroll(b).length
|
||||||
|
|
||||||
if (parentsA === parentsB) {
|
let aScore = 0
|
||||||
if (a.component === 'Text') return -1
|
let bScore = 0
|
||||||
if (b.component === 'Text') return 1
|
|
||||||
|
aScore += parentsA * 1000
|
||||||
|
bScore += parentsB * 1000
|
||||||
|
|
||||||
|
aScore += a.variant !== 'normal' ? 100 : 0
|
||||||
|
bScore += b.variant !== 'normal' ? 100 : 0
|
||||||
|
|
||||||
|
aScore += a.state.filter(x => x !== 'normal').length * 1000
|
||||||
|
bScore += b.state.filter(x => x !== 'normal').length * 1000
|
||||||
|
|
||||||
|
aScore += a.component === 'Text' ? 1 : 0
|
||||||
|
bScore += b.component === 'Text' ? 1 : 0
|
||||||
|
|
||||||
|
// Debug
|
||||||
|
a.specifityScore = aScore
|
||||||
|
b.specifityScore = bScore
|
||||||
|
|
||||||
|
if (aScore === bScore) {
|
||||||
return ai - bi
|
return ai - bi
|
||||||
}
|
}
|
||||||
if (parentsA === 0 && parentsB !== 0) return -1
|
return aScore - bScore
|
||||||
if (parentsB === 0 && parentsA !== 0) return 1
|
|
||||||
return parentsA - parentsB
|
|
||||||
})
|
})
|
||||||
.map(({ data }) => data)
|
.map(({ data }) => data)
|
||||||
|
|
||||||
|
|
@ -235,7 +250,10 @@ export const init = ({
|
||||||
|
|
||||||
// Inheriting all of the applicable rules
|
// Inheriting all of the applicable rules
|
||||||
const existingRules = ruleset.filter(findRules(combination))
|
const existingRules = ruleset.filter(findRules(combination))
|
||||||
const computedDirectives = existingRules.map(r => r.directives).reduce((acc, directives) => ({ ...acc, ...directives }), {})
|
const computedDirectives =
|
||||||
|
existingRules
|
||||||
|
.map(r => r.directives)
|
||||||
|
.reduce((acc, directives) => ({ ...acc, ...directives }), {})
|
||||||
const computedRule = {
|
const computedRule = {
|
||||||
...combination,
|
...combination,
|
||||||
directives: computedDirectives
|
directives: computedDirectives
|
||||||
|
|
|
||||||
|
|
@ -25,6 +25,7 @@ const fetchAndUpdate = ({
|
||||||
userId = false,
|
userId = false,
|
||||||
listId = false,
|
listId = false,
|
||||||
statusId = false,
|
statusId = false,
|
||||||
|
bookmarkFolderId = false,
|
||||||
tag = false,
|
tag = false,
|
||||||
until,
|
until,
|
||||||
since
|
since
|
||||||
|
|
@ -49,6 +50,7 @@ const fetchAndUpdate = ({
|
||||||
args.userId = userId
|
args.userId = userId
|
||||||
args.listId = listId
|
args.listId = listId
|
||||||
args.statusId = statusId
|
args.statusId = statusId
|
||||||
|
args.bookmarkFolderId = bookmarkFolderId
|
||||||
args.tag = tag
|
args.tag = tag
|
||||||
args.withMuted = !hideMutedPosts
|
args.withMuted = !hideMutedPosts
|
||||||
if (loggedIn && ['friends', 'public', 'publicAndExternal'].includes(timeline)) {
|
if (loggedIn && ['friends', 'public', 'publicAndExternal'].includes(timeline)) {
|
||||||
|
|
@ -80,15 +82,16 @@ const fetchAndUpdate = ({
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const startFetching = ({ timeline = 'friends', credentials, store, userId = false, listId = false, statusId = false, tag = false }) => {
|
const startFetching = ({ timeline = 'friends', credentials, store, userId = false, listId = false, statusId = false, bookmarkFolderId = false, tag = false }) => {
|
||||||
const rootState = store.rootState || store.state
|
const rootState = store.rootState || store.state
|
||||||
const timelineData = rootState.statuses.timelines[camelCase(timeline)]
|
const timelineData = rootState.statuses.timelines[camelCase(timeline)]
|
||||||
const showImmediately = timelineData.visibleStatuses.length === 0
|
const showImmediately = timelineData.visibleStatuses.length === 0
|
||||||
timelineData.userId = userId
|
timelineData.userId = userId
|
||||||
timelineData.listId = listId
|
timelineData.listId = listId
|
||||||
fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, listId, statusId, tag })
|
timelineData.bookmarkFolderId = bookmarkFolderId
|
||||||
|
fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, listId, statusId, bookmarkFolderId, tag })
|
||||||
const boundFetchAndUpdate = () =>
|
const boundFetchAndUpdate = () =>
|
||||||
fetchAndUpdate({ timeline, credentials, store, userId, listId, statusId, tag })
|
fetchAndUpdate({ timeline, credentials, store, userId, listId, statusId, bookmarkFolderId, tag })
|
||||||
return promiseInterval(boundFetchAndUpdate, 10000)
|
return promiseInterval(boundFetchAndUpdate, 10000)
|
||||||
}
|
}
|
||||||
const timelineFetcher = {
|
const timelineFetcher = {
|
||||||
|
|
|
||||||
BIN
static/pleromatan_apology.png
Normal file
BIN
static/pleromatan_apology.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 396 KiB |
BIN
static/pleromatan_apology_fox.png
Normal file
BIN
static/pleromatan_apology_fox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 521 KiB |
BIN
static/pleromatan_orz.png
Normal file
BIN
static/pleromatan_orz.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
BIN
static/pleromatan_orz_fox.png
Normal file
BIN
static/pleromatan_orz_fox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
Loading…
Add table
Reference in a new issue