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>
|
||||
<aside
|
||||
v-if="currentUser"
|
||||
class="panel mobile-notifications-drawer"
|
||||
class="mobile-notifications-drawer mobile-drawer"
|
||||
:class="{ '-closed': !notificationsOpen }"
|
||||
@touchstart.stop="notificationsTouchStart"
|
||||
@touchmove.stop="notificationsTouchMove"
|
||||
>
|
||||
<div class="mobile-notifications-header">
|
||||
<div class="panel-heading mobile-notifications-header">
|
||||
<span class="title">
|
||||
{{ $t('notifications.notifications') }}
|
||||
<span
|
||||
|
@ -7,6 +7,7 @@ export default {
|
||||
'Popover',
|
||||
'TopBar',
|
||||
'Scrollbar',
|
||||
'ScrollbarElement'
|
||||
'ScrollbarElement',
|
||||
'MobileDrawer'
|
||||
]
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div
|
||||
class="side-drawer-container"
|
||||
class="side-drawer-container mobile-drawer"
|
||||
:class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
|
||||
>
|
||||
<div
|
||||
@ -35,7 +35,10 @@
|
||||
v-if="!currentUser"
|
||||
@click="toggleDrawer"
|
||||
>
|
||||
<router-link :to="{ name: 'login' }">
|
||||
<router-link
|
||||
:to="{ name: 'login' }"
|
||||
class="menu-item"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
@ -47,7 +50,10 @@
|
||||
v-if="currentUser || !privateMode"
|
||||
@click="toggleDrawer"
|
||||
>
|
||||
<router-link :to="timelinesRoute">
|
||||
<router-link
|
||||
:to="timelinesRoute"
|
||||
class="menu-item"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
@ -59,7 +65,10 @@
|
||||
v-if="currentUser"
|
||||
@click="toggleDrawer"
|
||||
>
|
||||
<router-link :to="{ name: 'lists' }">
|
||||
<router-link
|
||||
:to="{ name: 'lists' }"
|
||||
class="menu-item"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
@ -74,6 +83,7 @@
|
||||
<router-link
|
||||
:to="{ name: 'chats', params: { username: currentUser.screen_name } }"
|
||||
style="position: relative;"
|
||||
class="menu-item"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
@ -91,7 +101,10 @@
|
||||
</ul>
|
||||
<ul v-if="currentUser">
|
||||
<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
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
@ -103,7 +116,10 @@
|
||||
v-if="currentUser.locked"
|
||||
@click="toggleDrawer"
|
||||
>
|
||||
<router-link to="/friend-requests">
|
||||
<router-link
|
||||
to="/friend-requests"
|
||||
class="menu-item"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
@ -121,7 +137,10 @@
|
||||
v-if="shout"
|
||||
@click="toggleDrawer"
|
||||
>
|
||||
<router-link :to="{ name: 'shout-panel' }">
|
||||
<router-link
|
||||
:to="{ name: 'shout-panel' }"
|
||||
class="menu-item"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
@ -135,7 +154,10 @@
|
||||
v-if="currentUser || !privateMode"
|
||||
@click="toggleDrawer"
|
||||
>
|
||||
<router-link :to="{ name: 'search' }">
|
||||
<router-link
|
||||
:to="{ name: 'search' }"
|
||||
class="menu-item"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
@ -147,7 +169,10 @@
|
||||
v-if="currentUser && suggestionsEnabled"
|
||||
@click="toggleDrawer"
|
||||
>
|
||||
<router-link :to="{ name: 'who-to-follow' }">
|
||||
<router-link
|
||||
:to="{ name: 'who-to-follow' }"
|
||||
class="menu-item"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
@ -157,7 +182,7 @@
|
||||
</li>
|
||||
<li @click="toggleDrawer">
|
||||
<button
|
||||
class="button-unstyled -link -fullwidth"
|
||||
class="menu-item"
|
||||
@click="openSettingsModal"
|
||||
>
|
||||
<FAIcon
|
||||
@ -168,7 +193,10 @@
|
||||
</button>
|
||||
</li>
|
||||
<li @click="toggleDrawer">
|
||||
<router-link :to="{ name: 'about'}">
|
||||
<router-link
|
||||
:to="{ name: 'about'}"
|
||||
class="menu-item"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
@ -181,7 +209,7 @@
|
||||
@click="toggleDrawer"
|
||||
>
|
||||
<button
|
||||
class="button-unstyled -link -fullwidth"
|
||||
class="menu-item"
|
||||
@click.stop="openAdminModal"
|
||||
>
|
||||
<FAIcon
|
||||
@ -197,6 +225,7 @@
|
||||
>
|
||||
<router-link
|
||||
:to="{ name: 'announcements' }"
|
||||
class="menu-item"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
@ -215,7 +244,10 @@
|
||||
v-if="currentUser"
|
||||
@click="toggleDrawer"
|
||||
>
|
||||
<router-link :to="{ name: 'edit-navigation' }">
|
||||
<router-link
|
||||
:to="{ name: 'edit-navigation' }"
|
||||
class="menu-item"
|
||||
>
|
||||
<FAIcon
|
||||
fixed-width
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
@ -228,7 +260,7 @@
|
||||
@click="toggleDrawer"
|
||||
>
|
||||
<button
|
||||
class="button-unstyled -link -fullwidth"
|
||||
class="menu-item"
|
||||
@click="doLogout"
|
||||
>
|
||||
<FAIcon
|
||||
@ -305,17 +337,8 @@
|
||||
width: 80%;
|
||||
max-width: 20em;
|
||||
flex: 0 0 80%;
|
||||
box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
|
||||
box-shadow: var(--panelShadow);
|
||||
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);
|
||||
box-shadow: var(--shadow);
|
||||
background-color: var(--background);
|
||||
|
||||
.badge {
|
||||
margin-left: 10px;
|
||||
@ -362,8 +385,7 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-bottom: 1px solid;
|
||||
border-color: $fallback--border;
|
||||
border-color: var(--border, $fallback--border);
|
||||
border-color: var(--border);
|
||||
}
|
||||
|
||||
.side-drawer ul:last-child {
|
||||
@ -380,18 +402,6 @@
|
||||
height: 3em;
|
||||
line-height: 3em;
|
||||
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>
|
||||
|
@ -6,12 +6,12 @@ import { getCssRules } from '../theme_data/css_utils.js'
|
||||
import { defaultState } from '../../modules/config.js'
|
||||
|
||||
export const applyTheme = (input) => {
|
||||
const { version, theme: inputTheme } = input
|
||||
console.log({ ...input })
|
||||
let extraRules
|
||||
let fonts
|
||||
if (version === 2) {
|
||||
if (input.themeType !== 1) {
|
||||
const t0 = performance.now()
|
||||
const { rules, theme } = generatePreset(inputTheme)
|
||||
const { rules, theme } = generatePreset(input)
|
||||
fonts = rules.fonts
|
||||
const t1 = performance.now()
|
||||
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((theme) => {
|
||||
const isV1 = Array.isArray(theme)
|
||||
const data = isV1 ? {} : theme.theme
|
||||
const data = isV1 ? { themeType: 1 } : theme.theme
|
||||
|
||||
if (isV1) {
|
||||
const bg = hex2rgb(theme[1])
|
||||
@ -143,7 +143,7 @@ export const getPreset = (val) => {
|
||||
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
|
||||
}
|
||||
newRules.push(rule)
|
||||
if (key === 'topBar') {
|
||||
newRules.push({ ...rule, component: 'PanelHeader', parent: { component: 'MobileDrawer' } })
|
||||
}
|
||||
if (key === 'avatarStatus') {
|
||||
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' }]
|
||||
} else if (newRule.component === 'TopBar') {
|
||||
return [newRule, { ...newRule, parent: { component: 'MobileDrawer' }, component: 'PanelHeader' }]
|
||||
} else {
|
||||
return [newRule]
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user