hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'themes3' into shigusegubu-themes3

Browse source
This commit is contained in:
Henry Jameson 2024-02-28 15:06:03 +02:00
commit dc5e37da39
24 changed files with 208 additions and 150 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
src/App.scss
View file

@ -41,12 +41,31 @@ body {
// have a cursor/pointer to operate them
@media (any-pointer: fine) {
* {
scrollbar-color: var(--btn) transparent;
scrollbar-color: var(--fg) transparent;
&::-webkit-scrollbar {
background: transparent;
}
&::-webkit-scrollbar-corner {
background: transparent;
}
&::-webkit-resizer {
/* stylelint-disable-next-line declaration-no-important */
background-color: transparent !important;
background-image:
linear-gradient(
135deg,
transparent calc(50% - 1px),
var(--textFaint) 50%,
transparent calc(50% + 1px),
transparent calc(75% - 1px),
var(--textFaint) 75%,
transparent calc(75% + 1px),
);
}
&::-webkit-scrollbar-button,
&::-webkit-scrollbar-thumb {
box-shadow: var(--shadow);
@ -74,7 +93,7 @@ body {
&:decrement {
background-image:
linear-gradient(45deg, transparent 50%, var(--text) 51%),
linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px)),
linear-gradient(-45deg, var(--text) 50%, transparent 51%);
background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
}
@ -102,7 +121,7 @@ body {
}
// Body should have background to scrollbar otherwise it will use white (body color?)
html {
scrollbar-color: var(--selectedMenu) var(--wallpaper);
scrollbar-color: var(--fg) var(--wallpaper);
background: var(--wallpaper);
}
}
@ -366,17 +385,42 @@ nav {
}
.menu-item {
display: block;
box-sizing: border-box;
border: none;
outline: none;
text-align: initial;
font-size: inherit;
font-family: inherit;
font-weight: 400;
cursor: pointer;
color: inherit;
clear: both;
position: relative;
border-bottom: 1px solid;
white-space: nowrap;
border-color: var(--border);
width: 100%;
line-height: var(--__line-height);
padding: var(--__vertical-gap) var(--__horizontal-gap);
--__line-height: 1.5em;
--__horizontal-gap: 0.75em;
--__vertical-gap: 0.5em;
a,
button {
text-align: initial;
padding: 0;
background: none;
border: none;
outline: none;
display: inline;
font-size: 100%;
font-family: inherit;
line-height: unset;
color: var(--text);
}
&:first-child {
border-top-right-radius: var(--roundness);
@ -693,6 +737,10 @@ option {
&.iconLetter {
font-size: 1.1em;
}
&.svg-inline--fa {
vertical-align: -0.15em;
}
}
.fa-old-padding {

14
src/components/account_actions/account_actions.vue
View file

@ -11,14 +11,14 @@
<template v-if="relationship.following">
<button
v-if="relationship.showing_reblogs"
class="btn button-default dropdown-item"
class="dropdown-item menu-item"
@click="hideRepeats"
>
{{ $t('user_card.hide_repeats') }}
</button>
<button
v-if="!relationship.showing_reblogs"
class="btn button-default dropdown-item"
class="dropdown-item menu-item"
@click="showRepeats"
>
{{ $t('user_card.show_repeats') }}
@ -31,34 +31,34 @@
<UserListMenu :user="user" />
<button
v-if="relationship.followed_by"
class="btn button-default btn-block dropdown-item"
class="dropdown-item menu-item"
@click="removeUserFromFollowers"
>
{{ $t('user_card.remove_follower') }}
</button>
<button
v-if="relationship.blocking"
class="btn button-default btn-block dropdown-item"
class="dropdown-item menu-item"
@click="unblockUser"
>
{{ $t('user_card.unblock') }}
</button>
<button
v-else
class="btn button-default btn-block dropdown-item"
class="dropdown-item menu-item"
@click="blockUser"
>
{{ $t('user_card.block') }}
</button>
<button
class="btn button-default btn-block dropdown-item"
class="dropdown-item menu-item"
@click="reportUser"
>
{{ $t('user_card.report') }}
</button>
<button
v-if="pleromaChatMessagesAvailable"
class="btn button-default btn-block dropdown-item"
class="dropdown-item menu-item"
@click="openChat"
>
{{ $t('user_card.message') }}

3
src/components/alert.style.js
View file

@ -18,7 +18,8 @@ export default {
{
directives: {
background: '--text',
opacity: 0.5
opacity: 0.5,
blur: '9px'
}
},
{

1
src/components/attachment/attachment.vue
View file

@ -175,7 +175,6 @@
:is="videoTag"
v-if="type === 'video' && !hidden"
class="video-container"
:class="{ 'button-unstyled': 'isModal' }"
:href="attachment.url"
@click.stop.prevent="openModal"
>

20
src/components/emoji_input/emoji_input.vue
View file

@ -185,23 +185,21 @@
position: absolute;
}
&-item {
&-item.menu-item {
display: flex;
cursor: pointer;
padding: 0.2em 0.4em;
height: 32px;
padding-top: 0;
padding-bottom: 0;
.image {
width: 32px;
height: 32px;
line-height: 32px;
width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
line-height: var(--__line-height);
text-align: center;
font-size: 32px;
margin-right: 4px;
margin-right: var(--__horizontal-gap);
img {
width: 32px;
height: 32px;
width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
object-fit: contain;
}
}

42
src/components/global_notice_list/global_notice_list.vue
View file

@ -4,7 +4,7 @@
v-for="(notice, index) in notices"
:key="index"
class="alert global-notice"
:class="{ ['global-' + notice.level]: true }"
:class="{ [notice.level]: true }"
>
<div class="notice-message">
{{ $t(notice.messageKey, notice.messageArgs) }}
@ -52,48 +52,8 @@
}
}
.global-error {
background-color: var(--alertPopupError, $fallback--cRed);
color: var(--alertPopupErrorText, $fallback--text);
.svg-inline--fa {
color: var(--alertPopupErrorText, $fallback--text);
}
}
.global-warning {
background-color: var(--alertPopupWarning, $fallback--cOrange);
color: var(--alertPopupWarningText, $fallback--text);
.svg-inline--fa {
color: var(--alertPopupWarningText, $fallback--text);
}
}
.global-success {
background-color: var(--alertPopupSuccess, $fallback--cGreen);
color: var(--alertPopupSuccessText, $fallback--text);
.svg-inline--fa {
color: var(--alertPopupSuccessText, $fallback--text);
}
}
.global-info {
background-color: var(--alertPopupNeutral, $fallback--fg);
color: var(--alertPopupNeutralText, $fallback--text);
.svg-inline--fa {
color: var(--alertPopupNeutralText, $fallback--text);
}
}
.close-notice {
padding-right: 0.2em;
.svg-inline--fa:hover {
opacity: 0.6;
}
}
}
</style>

38
src/components/menu_item.style.js
View file

@ -7,7 +7,8 @@ export default {
'Input',
'Border',
'ButtonUnstyled',
'Badge'
'Badge',
'Avatar'
],
states: {
hover: ':hover',
@ -30,17 +31,44 @@ export default {
{
state: ['active'],
directives: {
background: '$mod(--bg, 5)',
background: '$mod(--bg, 10)',
opacity: 1
}
},
{
state: ['active', 'hover'],
directives: {
background: '$mod(--bg, 15)',
opacity: 1
}
},
{
component: 'Text',
variant: 'normal',
parent: {
component: 'MenuItem',
state: ['normal', 'hover'],
variant: 'normal'
state: ['hover']
},
directives: {
textColor: '--link',
textAuto: 'no-preserve'
}
},
{
component: 'Text',
parent: {
component: 'MenuItem',
state: ['active']
},
directives: {
textColor: '--link',
textAuto: 'no-preserve'
}
},
{
component: 'Icon',
parent: {
component: 'MenuItem',
state: ['active']
},
directives: {
textColor: '--link',

22
src/components/moderation_tools/moderation_tools.vue
View file

@ -12,13 +12,13 @@
<div class="dropdown-menu">
<span v-if="canGrantRole">
<button
class="menu-item dropdown-item"
class="menu-item dropdown-item menu-item"
@click="toggleRight(&quot;admin&quot;)"
>
{{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
</button>
<button
class="menu-item dropdown-item"
class="menu-item dropdown-item menu-item"
@click="toggleRight(&quot;moderator&quot;)"
>
{{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
@ -31,14 +31,14 @@
</span>
<button
v-if="canChangeActivationState"
class="menu-item dropdown-item"
class="menu-item dropdown-item menu-item"
@click="toggleActivationStatus()"
>
{{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
</button>
<button
v-if="canDeleteAccount"
class="menu-item dropdown-item"
class="menu-item dropdown-item menu-item"
@click="deleteUserDialog(true)"
>
{{ $t('user_card.admin_menu.delete_account') }}
@ -50,7 +50,7 @@
/>
<span v-if="canUseTagPolicy">
<button
class="menu-item dropdown-item"
class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.FORCE_NSFW)"
>
<span
@ -60,7 +60,7 @@
{{ $t('user_card.admin_menu.force_nsfw') }}
</button>
<button
class="menu-item dropdown-item"
class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.STRIP_MEDIA)"
>
<span
@ -70,7 +70,7 @@
{{ $t('user_card.admin_menu.strip_media') }}
</button>
<button
class="menu-item dropdown-item"
class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.FORCE_UNLISTED)"
>
<span
@ -80,7 +80,7 @@
{{ $t('user_card.admin_menu.force_unlisted') }}
</button>
<button
class="menu-item dropdown-item"
class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.SANDBOX)"
>
<span
@ -91,7 +91,7 @@
</button>
<button
v-if="user.is_local"
class="menu-item dropdown-item"
class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
>
<span
@ -102,7 +102,7 @@
</button>
<button
v-if="user.is_local"
class="menu-item dropdown-item"
class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
>
<span
@ -113,7 +113,7 @@
</button>
<button
v-if="user.is_local"
class="menu-item dropdown-item"
class="menu-item dropdown-item menu-item"
@click="toggleTag(tags.QUARANTINE)"
>
<span

48
src/components/navigation/navigation_entry.vue
View file

@ -10,7 +10,7 @@
>
<component
:is="routeTo ? 'a' : 'button'"
class="main-link button-unstyled"
class="main-link"
:href="href"
@click="navigate"
>
@ -62,47 +62,53 @@
<script src="./navigation_entry.js"></script>
<style lang="scss">
@import "../../variables";
.NavigationEntry.menu-item {
--__line-height: 2.5em;
--__horizontal-gap: 0.5em;
--__vertical-gap: 0.4em;
.NavigationEntry {
display: flex;
box-sizing: border-box;
align-items: baseline;
height: 3.5em;
line-height: 3.5em;
padding: 0;
width: 100%;
color: $fallback--link;
color: var(--link, $fallback--link);
display: flex;
align-items: baseline;
&[aria-expanded] {
padding-right: 1em;
}
.timelines-chevron {
margin-right: 0;
padding-right: var(--__horizontal-gap);
}
.main-link {
line-height: var(--__line-height);
box-sizing: border-box;
flex: 1;
padding: 0 1em;
padding: var(--__vertical-gap) var(--__horizontal-gap);
}
.menu-icon {
margin-right: 0.8em;
line-height: var(--__line-height);
padding: 0;
width: var(--__line-height);
margin-right: var(--__horizontal-gap);
}
.timelines-chevron {
line-height: var(--__line-height);
padding: 0;
width: var(--__line-height);
margin-right: 0;
}
.extra-button {
width: 3em;
line-height: var(--__line-height);
padding: 0;
width: var(--__line-height);
text-align: center;
&:last-child {
margin-right: -0.8em;
margin-right: calc(-1 * var(--__horizontal-gap));
}
}
.badge {
margin: 0 0.8em;
margin: 0 var(--__horizontal-gap);
}
}
</style>

32
src/components/popover/popover.vue
View file

@ -94,26 +94,12 @@
}
.dropdown-item {
line-height: 21px;
overflow: hidden;
display: block;
padding: 0.5em 0.75em;
clear: both;
font-weight: 400;
text-align: inherit;
white-space: nowrap;
border: none;
border-radius: 0;
background-color: transparent;
box-shadow: none;
width: 100%;
height: 100%;
box-sizing: border-box;
border-bottom: none;
&-icon {
svg {
width: 22px;
margin-right: 0.75rem;
width: var(--__line-height);
margin-right: var(--__horizontal-gap);
}
}
@ -127,15 +113,15 @@
.menu-checkbox {
display: inline-block;
vertical-align: middle;
min-width: 22px;
max-width: 22px;
min-height: 22px;
max-height: 22px;
line-height: 22px;
min-width: calc(var(--__line-height) + 1px);
max-width: calc(var(--__line-height) + 1px);
min-height: calc(var(--__line-height) + 1px);
max-height: calc(var(--__line-height) + 1px);
line-height: var(--__line-height);
text-align: center;
border-radius: 0;
box-shadow: var(--shadow);
margin-right: 0.75em;
margin-right: var(--__horizontal-gap);
&.menu-checkbox-checked::after {
font-size: 1.25em;

5
src/components/root.style.js
View file

@ -9,13 +9,16 @@ export default {
'Scrollbar',
'ScrollbarElement',
'MobileDrawer',
'Alert',
'Button' // mobile post button
],
defaultRules: [
{
directives: {
'--font': 'generic | sans-serif',
'--monoFont': 'generic | monospace'
'--monoFont': 'generic | monospace',
'--bg': 'color | #000000', // just to establish order
'--wallpaper': 'color | --bg, -2'
}
}
]

2
src/components/scrollbar.style.js
View file

@ -4,7 +4,7 @@ export default {
defaultRules: [
{
directives: {
background: '--bg'
background: '--wallpaper'
}
}
]

2
src/components/settings_modal/settings_modal.vue
View file

@ -14,7 +14,7 @@
<div
v-if="currentSaveStateNotice"
class="alert"
:class="{ transparent: !currentSaveStateNotice.error, error: currentSaveStateNotice.error}"
:class="{ success: !currentSaveStateNotice.error, error: currentSaveStateNotice.error}"
@click.prevent
>
{{ currentSaveStateNotice.error ? $t('settings.saving_err') : $t('settings.saving_ok') }}

2
src/components/settings_modal/tabs/theme_tab/theme_tab.js
View file

@ -514,6 +514,7 @@ export default {
this.$store.dispatch('setOption', {
name: 'customTheme',
value: {
themeFileVersion: this.selectedVersion,
themeEngineVersion: CURRENT_VERSION,
...this.previewTheme
}
@ -521,6 +522,7 @@ export default {
this.$store.dispatch('setOption', {
name: 'customThemeSource',
value: {
themeFileVersion: this.selectedVersion,
themeEngineVersion: CURRENT_VERSION,
shadows: this.shadowsLocal,
fonts: this.fontsLocal,

10
src/components/shadow_control/shadow_control.vue
View file

@ -219,8 +219,6 @@
<script src="./shadow_control.js"></script>
<style lang="scss">
@import "../../variables";
.shadow-control {
display: flex;
flex-wrap: wrap;
@ -237,8 +235,6 @@
display: flex;
flex-wrap: wrap;
$side: 15em;
input[type="number"] {
width: 5em;
min-width: 2em;
@ -261,7 +257,7 @@
.x-shift-control .wrap,
input[type="range"] {
margin: 0;
width: $side;
width: 15em;
height: 2em;
}
@ -271,7 +267,7 @@
.wrap {
width: 2em;
height: $side;
height: 15em;
}
input[type="range"] {
@ -298,8 +294,6 @@
.preview-block {
width: 33%;
height: 33%;
background-color: $fallback--bg;
background-color: var(--bg, $fallback--bg);
border-radius: var(--roundness);
}
}

2
src/components/status/status.vue
View file

@ -450,7 +450,7 @@
>
<button
v-if="showOtherRepliesAsButton && replies.length > 1"
class="button-unstyled -link faint"
class="button-unstyled -link"
:title="$tc('status.ancestor_follow', replies.length - 1, { numReplies: replies.length - 1 })"
@click.prevent="dive"
>

3
src/components/underlay.style.js
View file

@ -6,8 +6,7 @@ export default {
// we are searching for underlay specifically or for whatever is laid on top of it.
outOfTreeSelector: '.underlay',
validInnerComponents: [
'Panel',
'Alert'
'Panel'
],
defaultRules: [
{

2
src/components/user_list_menu/user_list_menu.vue
View file

@ -22,7 +22,7 @@
</div>
</template>
<template #trigger>
<button class="btn button-default dropdown-item -has-submenu">
<button class="menu-item dropdown-item -has-submenu">
{{ $t('lists.manage_lists') }}
<FAIcon
class="chevron-icon"

4
src/panel.scss
View file

@ -118,6 +118,10 @@
padding-bottom: 0;
align-self: stretch;
}
> .alert {
line-height: calc(var(--__panel-heading-height-inner) - 2px);
}
}
}

15
src/services/style_setter/style_setter.js
View file

@ -8,14 +8,15 @@ import { chunk } from 'lodash'
export const applyTheme = async (input) => {
let extraRules
if (input.themeType !== 1) {
if (input.themeFileVersion === 1) {
extraRules = convertTheme2To3(input)
} else {
const { theme } = generatePreset(input)
extraRules = convertTheme2To3(theme)
} else {
extraRules = convertTheme2To3(input)
}
const themes3 = init(extraRules, '#FFFFFF')
// Assuming that "worst case scenario background" is panel background since it's the most likely one
const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim())
const head = document.head
const body = document.body
body.classList.add('hidden')
@ -32,6 +33,8 @@ export const applyTheme = async (input) => {
parts[0],
', ',
parts[0].replace(/button/, 'thumb'),
', ',
parts[0].replace(/scrollbar-button/, 'resizer'),
' {',
parts[1],
'}'
@ -54,7 +57,7 @@ export const applyTheme = async (input) => {
styleSheet.insertRule(rule, 'index-max')
})
})
}, 50)
}, 200)
})
return Promise.resolve()
@ -125,7 +128,7 @@ export const getPreset = (val) => {
.then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])
.then((theme) => {
const isV1 = Array.isArray(theme)
const data = isV1 ? { themeType: 1 } : theme.theme
const data = isV1 ? {} : theme.theme
if (isV1) {
const bg = hex2rgb(theme[1])

4
src/services/theme_data/css_utils.js
View file

@ -69,7 +69,7 @@ export const getCssShadowFilter = (input) => {
export const getCssRules = (rules) => rules.map(rule => {
let selector = rule.selector
if (!selector) {
selector = 'body'
selector = 'html'
}
const header = selector + ' {'
const footer = '}'
@ -155,7 +155,7 @@ export const getCssRules = (rules) => rules.map(rule => {
return [
header,
directives + ';',
(!rule.virtual && rule.directives.textNoCssColor !== 'yes') ? ' color: var(--text);' : '',
(rule.component === 'Text' && rule.state.indexOf('faint') < 0 && rule.directives.textNoCssColor !== 'yes') ? ' color: var(--text);' : '',
'',
virtualDirectives,
footer

1
src/services/theme_data/theme2_keys.js
View file

@ -90,6 +90,7 @@ export default [
// Top bar,
'topBar',
'topBarText',
'topBarLink',
// Tabs,

24
src/services/theme_data/theme2_to_theme3.js
View file

@ -346,6 +346,14 @@ export const convertTheme2To3 = (data) => {
}
if (key === 'buttonPressed') {
newRules.push({ ...rule, state: ['toggled'] })
newRules.push({ ...rule, state: ['toggled', 'focus'] })
newRules.push({ ...rule, state: ['pressed', 'focus'] })
}
if (key === 'buttonHover') {
newRules.push({ ...rule, state: ['toggled', 'hover'] })
newRules.push({ ...rule, state: ['pressed', 'hover'] })
newRules.push({ ...rule, state: ['toggled', 'focus', 'hover'] })
newRules.push({ ...rule, state: ['pressed', 'focus', 'hover'] })
}
if (rule.component === 'Button') {
@ -489,7 +497,21 @@ export const convertTheme2To3 = (data) => {
if (newRule.component === 'Panel') {
return [newRule, { ...newRule, component: 'MobileDrawer' }]
} else if (newRule.component === 'Button') {
return [newRule, { ...newRule, component: 'Tab' }, { ...newRule, component: 'ScrollbarElement' }]
const rules = [
newRule,
{ ...newRule, component: 'Tab' },
{ ...newRule, component: 'ScrollbarElement' }
]
console.log(newRule)
if (newRule.state?.indexOf('toggled') >= 0) {
rules.push({ ...newRule, state: [...newRule.state, 'focused'] })
rules.push({ ...newRule, state: [...newRule.state, 'hover'] })
rules.push({ ...newRule, state: [...newRule.state, 'hover', 'focused'] })
}
if (newRule.state?.indexOf('hover') >= 0) {
rules.push({ ...newRule, state: [...newRule.state, 'focused'] })
}
return rules
} else if (newRule.component === 'TopBar') {
return [newRule, { ...newRule, parent: { component: 'MobileDrawer' }, component: 'PanelHeader' }]
} else {

8
src/services/theme_data/theme_data_3.service.js
View file

@ -275,8 +275,12 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
selector: cssSelector.split(/ /g).slice(0, -1).join(' '),
...combination,
directives: {},
virtualDirectives,
virtualDirectivesRaw
virtualDirectives: {
[virtualName]: getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
},
virtualDirectivesRaw: {
[virtualName]: textColor
}
}
} else {
computed[selector] = computed[selector] || {}