initial work on mobile stuff
This commit is contained in:
parent
099a2eb27f
commit
5e0ba2bcd9
42
src/components/mobile_drawer.style.js
Normal file
42
src/components/mobile_drawer.style.js
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
export default {
|
||||||
|
name: 'MobileDrawer',
|
||||||
|
selector: '.mobile-drawer',
|
||||||
|
lazy: true,
|
||||||
|
validInnerComponents: [
|
||||||
|
'Text',
|
||||||
|
'Link',
|
||||||
|
'Icon',
|
||||||
|
'Border',
|
||||||
|
'Button',
|
||||||
|
'ButtonUnstyled',
|
||||||
|
'Input',
|
||||||
|
'PanelHeader',
|
||||||
|
'MenuItem',
|
||||||
|
'Notification',
|
||||||
|
'Alert',
|
||||||
|
'UserCard'
|
||||||
|
],
|
||||||
|
defaultRules: [
|
||||||
|
{
|
||||||
|
directives: {
|
||||||
|
background: '--bg',
|
||||||
|
backgroundNoCssColor: 'yes'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'PanelHeader',
|
||||||
|
parent: { component: 'MobileDrawer' },
|
||||||
|
directives: {
|
||||||
|
background: '--fg',
|
||||||
|
shadow: [{
|
||||||
|
x: 0,
|
||||||
|
y: 0,
|
||||||
|
blur: 4,
|
||||||
|
spread: 0,
|
||||||
|
color: '#000000',
|
||||||
|
alpha: 0.6
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
@ -44,12 +44,12 @@
|
|||||||
</nav>
|
</nav>
|
||||||
<aside
|
<aside
|
||||||
v-if="currentUser"
|
v-if="currentUser"
|
||||||
class="panel mobile-notifications-drawer"
|
class="mobile-notifications-drawer mobile-drawer"
|
||||||
:class="{ '-closed': !notificationsOpen }"
|
:class="{ '-closed': !notificationsOpen }"
|
||||||
@touchstart.stop="notificationsTouchStart"
|
@touchstart.stop="notificationsTouchStart"
|
||||||
@touchmove.stop="notificationsTouchMove"
|
@touchmove.stop="notificationsTouchMove"
|
||||||
>
|
>
|
||||||
<div class="mobile-notifications-header">
|
<div class="panel-heading mobile-notifications-header">
|
||||||
<span class="title">
|
<span class="title">
|
||||||
{{ $t('notifications.notifications') }}
|
{{ $t('notifications.notifications') }}
|
||||||
<span
|
<span
|
||||||
|
@ -7,6 +7,7 @@ export default {
|
|||||||
'Popover',
|
'Popover',
|
||||||
'TopBar',
|
'TopBar',
|
||||||
'Scrollbar',
|
'Scrollbar',
|
||||||
'ScrollbarElement'
|
'ScrollbarElement',
|
||||||
|
'MobileDrawer'
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="side-drawer-container"
|
class="side-drawer-container mobile-drawer"
|
||||||
:class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
|
:class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
@ -35,7 +35,10 @@
|
|||||||
v-if="!currentUser"
|
v-if="!currentUser"
|
||||||
@click="toggleDrawer"
|
@click="toggleDrawer"
|
||||||
>
|
>
|
||||||
<router-link :to="{ name: 'login' }">
|
<router-link
|
||||||
|
:to="{ name: 'login' }"
|
||||||
|
class="menu-item"
|
||||||
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
fixed-width
|
fixed-width
|
||||||
class="fa-scale-110 fa-old-padding"
|
class="fa-scale-110 fa-old-padding"
|
||||||
@ -47,7 +50,10 @@
|
|||||||
v-if="currentUser || !privateMode"
|
v-if="currentUser || !privateMode"
|
||||||
@click="toggleDrawer"
|
@click="toggleDrawer"
|
||||||
>
|
>
|
||||||
<router-link :to="timelinesRoute">
|
<router-link
|
||||||
|
:to="timelinesRoute"
|
||||||
|
class="menu-item"
|
||||||
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
fixed-width
|
fixed-width
|
||||||
class="fa-scale-110 fa-old-padding"
|
class="fa-scale-110 fa-old-padding"
|
||||||
@ -59,7 +65,10 @@
|
|||||||
v-if="currentUser"
|
v-if="currentUser"
|
||||||
@click="toggleDrawer"
|
@click="toggleDrawer"
|
||||||
>
|
>
|
||||||
<router-link :to="{ name: 'lists' }">
|
<router-link
|
||||||
|
:to="{ name: 'lists' }"
|
||||||
|
class="menu-item"
|
||||||
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
fixed-width
|
fixed-width
|
||||||
class="fa-scale-110 fa-old-padding"
|
class="fa-scale-110 fa-old-padding"
|
||||||
@ -74,6 +83,7 @@
|
|||||||
<router-link
|
<router-link
|
||||||
:to="{ name: 'chats', params: { username: currentUser.screen_name } }"
|
:to="{ name: 'chats', params: { username: currentUser.screen_name } }"
|
||||||
style="position: relative;"
|
style="position: relative;"
|
||||||
|
class="menu-item"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
fixed-width
|
fixed-width
|
||||||
@ -91,7 +101,10 @@
|
|||||||
</ul>
|
</ul>
|
||||||
<ul v-if="currentUser">
|
<ul v-if="currentUser">
|
||||||
<li @click="toggleDrawer">
|
<li @click="toggleDrawer">
|
||||||
<router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
|
<router-link
|
||||||
|
:to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
|
||||||
|
class="menu-item"
|
||||||
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
fixed-width
|
fixed-width
|
||||||
class="fa-scale-110 fa-old-padding"
|
class="fa-scale-110 fa-old-padding"
|
||||||
@ -103,7 +116,10 @@
|
|||||||
v-if="currentUser.locked"
|
v-if="currentUser.locked"
|
||||||
@click="toggleDrawer"
|
@click="toggleDrawer"
|
||||||
>
|
>
|
||||||
<router-link to="/friend-requests">
|
<router-link
|
||||||
|
to="/friend-requests"
|
||||||
|
class="menu-item"
|
||||||
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
fixed-width
|
fixed-width
|
||||||
class="fa-scale-110 fa-old-padding"
|
class="fa-scale-110 fa-old-padding"
|
||||||
@ -121,7 +137,10 @@
|
|||||||
v-if="shout"
|
v-if="shout"
|
||||||
@click="toggleDrawer"
|
@click="toggleDrawer"
|
||||||
>
|
>
|
||||||
<router-link :to="{ name: 'shout-panel' }">
|
<router-link
|
||||||
|
:to="{ name: 'shout-panel' }"
|
||||||
|
class="menu-item"
|
||||||
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
fixed-width
|
fixed-width
|
||||||
class="fa-scale-110 fa-old-padding"
|
class="fa-scale-110 fa-old-padding"
|
||||||
@ -135,7 +154,10 @@
|
|||||||
v-if="currentUser || !privateMode"
|
v-if="currentUser || !privateMode"
|
||||||
@click="toggleDrawer"
|
@click="toggleDrawer"
|
||||||
>
|
>
|
||||||
<router-link :to="{ name: 'search' }">
|
<router-link
|
||||||
|
:to="{ name: 'search' }"
|
||||||
|
class="menu-item"
|
||||||
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
fixed-width
|
fixed-width
|
||||||
class="fa-scale-110 fa-old-padding"
|
class="fa-scale-110 fa-old-padding"
|
||||||
@ -147,7 +169,10 @@
|
|||||||
v-if="currentUser && suggestionsEnabled"
|
v-if="currentUser && suggestionsEnabled"
|
||||||
@click="toggleDrawer"
|
@click="toggleDrawer"
|
||||||
>
|
>
|
||||||
<router-link :to="{ name: 'who-to-follow' }">
|
<router-link
|
||||||
|
:to="{ name: 'who-to-follow' }"
|
||||||
|
class="menu-item"
|
||||||
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
fixed-width
|
fixed-width
|
||||||
class="fa-scale-110 fa-old-padding"
|
class="fa-scale-110 fa-old-padding"
|
||||||
@ -157,7 +182,7 @@
|
|||||||
</li>
|
</li>
|
||||||
<li @click="toggleDrawer">
|
<li @click="toggleDrawer">
|
||||||
<button
|
<button
|
||||||
class="button-unstyled -link -fullwidth"
|
class="menu-item"
|
||||||
@click="openSettingsModal"
|
@click="openSettingsModal"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
@ -168,7 +193,10 @@
|
|||||||
</button>
|
</button>
|
||||||
</li>
|
</li>
|
||||||
<li @click="toggleDrawer">
|
<li @click="toggleDrawer">
|
||||||
<router-link :to="{ name: 'about'}">
|
<router-link
|
||||||
|
:to="{ name: 'about'}"
|
||||||
|
class="menu-item"
|
||||||
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
fixed-width
|
fixed-width
|
||||||
class="fa-scale-110 fa-old-padding"
|
class="fa-scale-110 fa-old-padding"
|
||||||
@ -181,7 +209,7 @@
|
|||||||
@click="toggleDrawer"
|
@click="toggleDrawer"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
class="button-unstyled -link -fullwidth"
|
class="menu-item"
|
||||||
@click.stop="openAdminModal"
|
@click.stop="openAdminModal"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
@ -197,6 +225,7 @@
|
|||||||
>
|
>
|
||||||
<router-link
|
<router-link
|
||||||
:to="{ name: 'announcements' }"
|
:to="{ name: 'announcements' }"
|
||||||
|
class="menu-item"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
fixed-width
|
fixed-width
|
||||||
@ -215,7 +244,10 @@
|
|||||||
v-if="currentUser"
|
v-if="currentUser"
|
||||||
@click="toggleDrawer"
|
@click="toggleDrawer"
|
||||||
>
|
>
|
||||||
<router-link :to="{ name: 'edit-navigation' }">
|
<router-link
|
||||||
|
:to="{ name: 'edit-navigation' }"
|
||||||
|
class="menu-item"
|
||||||
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
fixed-width
|
fixed-width
|
||||||
class="fa-scale-110 fa-old-padding"
|
class="fa-scale-110 fa-old-padding"
|
||||||
@ -228,7 +260,7 @@
|
|||||||
@click="toggleDrawer"
|
@click="toggleDrawer"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
class="button-unstyled -link -fullwidth"
|
class="menu-item"
|
||||||
@click="doLogout"
|
@click="doLogout"
|
||||||
>
|
>
|
||||||
<FAIcon
|
<FAIcon
|
||||||
@ -305,17 +337,8 @@
|
|||||||
width: 80%;
|
width: 80%;
|
||||||
max-width: 20em;
|
max-width: 20em;
|
||||||
flex: 0 0 80%;
|
flex: 0 0 80%;
|
||||||
box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
|
box-shadow: var(--shadow);
|
||||||
box-shadow: var(--panelShadow);
|
background-color: var(--background);
|
||||||
background-color: $fallback--bg;
|
|
||||||
background-color: var(--popover, $fallback--bg);
|
|
||||||
color: $fallback--link;
|
|
||||||
color: var(--popoverText, $fallback--link);
|
|
||||||
|
|
||||||
--faint: var(--popoverFaintText, $fallback--faint);
|
|
||||||
--faintLink: var(--popoverFaintLink, $fallback--faint);
|
|
||||||
--lightText: var(--popoverLightText, $fallback--lightText);
|
|
||||||
--icon: var(--popoverIcon, $fallback--icon);
|
|
||||||
|
|
||||||
.badge {
|
.badge {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
@ -362,8 +385,7 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border-bottom: 1px solid;
|
border-bottom: 1px solid;
|
||||||
border-color: $fallback--border;
|
border-color: var(--border);
|
||||||
border-color: var(--border, $fallback--border);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.side-drawer ul:last-child {
|
.side-drawer ul:last-child {
|
||||||
@ -380,18 +402,6 @@
|
|||||||
height: 3em;
|
height: 3em;
|
||||||
line-height: 3em;
|
line-height: 3em;
|
||||||
padding: 0 0.7em;
|
padding: 0 0.7em;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $fallback--lightBg;
|
|
||||||
background-color: var(--selectedMenuPopover, $fallback--lightBg);
|
|
||||||
color: $fallback--text;
|
|
||||||
color: var(--selectedMenuPopoverText, $fallback--text);
|
|
||||||
|
|
||||||
--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
|
|
||||||
--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
|
|
||||||
--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
|
|
||||||
--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -6,12 +6,12 @@ import { getCssRules } from '../theme_data/css_utils.js'
|
|||||||
import { defaultState } from '../../modules/config.js'
|
import { defaultState } from '../../modules/config.js'
|
||||||
|
|
||||||
export const applyTheme = (input) => {
|
export const applyTheme = (input) => {
|
||||||
const { version, theme: inputTheme } = input
|
console.log({ ...input })
|
||||||
let extraRules
|
let extraRules
|
||||||
let fonts
|
let fonts
|
||||||
if (version === 2) {
|
if (input.themeType !== 1) {
|
||||||
const t0 = performance.now()
|
const t0 = performance.now()
|
||||||
const { rules, theme } = generatePreset(inputTheme)
|
const { rules, theme } = generatePreset(input)
|
||||||
fonts = rules.fonts
|
fonts = rules.fonts
|
||||||
const t1 = performance.now()
|
const t1 = performance.now()
|
||||||
console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
|
console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
|
||||||
@ -127,7 +127,7 @@ export const getPreset = (val) => {
|
|||||||
.then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])
|
.then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])
|
||||||
.then((theme) => {
|
.then((theme) => {
|
||||||
const isV1 = Array.isArray(theme)
|
const isV1 = Array.isArray(theme)
|
||||||
const data = isV1 ? {} : theme.theme
|
const data = isV1 ? { themeType: 1 } : theme.theme
|
||||||
|
|
||||||
if (isV1) {
|
if (isV1) {
|
||||||
const bg = hex2rgb(theme[1])
|
const bg = hex2rgb(theme[1])
|
||||||
@ -143,7 +143,7 @@ export const getPreset = (val) => {
|
|||||||
data.colors = { bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
|
data.colors = { bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
|
||||||
}
|
}
|
||||||
|
|
||||||
return { theme: data, source: theme.source, version: isV1 ? 1 : 2 }
|
return { theme: data, source: theme.source }
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -210,6 +210,9 @@ export const convertTheme2To3 = (data) => {
|
|||||||
shadow: originalShadow
|
shadow: originalShadow
|
||||||
}
|
}
|
||||||
newRules.push(rule)
|
newRules.push(rule)
|
||||||
|
if (key === 'topBar') {
|
||||||
|
newRules.push({ ...rule, component: 'PanelHeader', parent: { component: 'MobileDrawer' } })
|
||||||
|
}
|
||||||
if (key === 'avatarStatus') {
|
if (key === 'avatarStatus') {
|
||||||
newRules.push({ ...rule, parent: { component: 'Notification' } })
|
newRules.push({ ...rule, parent: { component: 'Notification' } })
|
||||||
}
|
}
|
||||||
@ -355,8 +358,12 @@ export const convertTheme2To3 = (data) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (newRule.component === 'Button') {
|
if (newRule.component === 'Panel') {
|
||||||
|
return [newRule, { ...newRule, component: 'MobileDrawer' }]
|
||||||
|
} else if (newRule.component === 'Button') {
|
||||||
return [newRule, { ...newRule, component: 'Tab' }, { ...newRule, component: 'ScrollbarElement' }]
|
return [newRule, { ...newRule, component: 'Tab' }, { ...newRule, component: 'ScrollbarElement' }]
|
||||||
|
} else if (newRule.component === 'TopBar') {
|
||||||
|
return [newRule, { ...newRule, parent: { component: 'MobileDrawer' }, component: 'PanelHeader' }]
|
||||||
} else {
|
} else {
|
||||||
return [newRule]
|
return [newRule]
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user