From 4a38afb45a791764f0f175a4e9baa7b18ee35f9d Mon Sep 17 00:00:00 2001 From: SrGooglo Date: Wed, 11 Sep 2024 01:14:24 +0000 Subject: [PATCH] improve settings desing --- .../config/settingsMenuGroupsDecorators.json | 12 +- .../src/components/UserShareBadge/index.jsx | 70 ++++++++++ .../src/components/UserShareBadge/index.less | 60 +++++++++ .../components/SettingItemComponent/index.jsx | 88 ++++++------ .../SettingItemComponent/index.less | 3 +- packages/app/src/pages/settings/index.jsx | 4 +- packages/app/src/pages/settings/index.less | 39 +++++- packages/app/src/settings/apparence/index.jsx | 6 +- .../components/slidersWithPresets/index.jsx | 100 +++++++++----- .../{widgetsView => widgetsManager}/index.jsx | 10 +- .../index.less | 11 +- packages/app/src/settings/player/index.jsx | 125 ++++++------------ .../player/items/player.compressor/index.jsx | 6 + packages/app/src/settings/tap_share/index.jsx | 20 ++- packages/app/src/settings/widgets/index.jsx | 33 +++-- packages/app/src/styles/fonts.less | 1 + 16 files changed, 395 insertions(+), 193 deletions(-) create mode 100644 packages/app/src/components/UserShareBadge/index.jsx create mode 100644 packages/app/src/components/UserShareBadge/index.less rename packages/app/src/settings/components/{widgetsView => widgetsManager}/index.jsx (88%) rename packages/app/src/settings/components/{widgetsView => widgetsManager}/index.less (84%) diff --git a/packages/app/config/settingsMenuGroupsDecorators.json b/packages/app/config/settingsMenuGroupsDecorators.json index 61e7cacb..2bce2676 100755 --- a/packages/app/config/settingsMenuGroupsDecorators.json +++ b/packages/app/config/settingsMenuGroupsDecorators.json @@ -1,20 +1,20 @@ { "app": { - "label": "Application Settings" + "label": "Application" }, "basic": { - "label": "Basic Settings" + "label": "Basic" }, "security": { - "label": "Security Settings" + "label": "Security" }, "privacy": { - "label": "Privacy Settings" + "label": "Privacy" }, "advanced": { - "label": "Advanced Settings" + "label": "Advanced" }, "other": { - "label": "Other Settings" + "label": "Other" } } \ No newline at end of file diff --git a/packages/app/src/components/UserShareBadge/index.jsx b/packages/app/src/components/UserShareBadge/index.jsx new file mode 100644 index 00000000..0432c455 --- /dev/null +++ b/packages/app/src/components/UserShareBadge/index.jsx @@ -0,0 +1,70 @@ +import React from "react" +import * as antd from "antd" + +import Image from "@components/Image" +import UserBadges from "@components/UserBadges" +import { Icons, createIconRender } from "@components/Icons" + +import ContrastYIQ from "@utils/contrastYIQ" + +import "./index.less" + +const UserShareBadge = (props) => { + const { user } = props + + const [loading, setLoading] = React.useState(true) + const [contrastColor, setContrastColor] = React.useState(null) + + async function initialize(params) { + setLoading(true) + + const contrastYIQ = await ContrastYIQ.fromUrl(user.cover) + + setContrastColor(contrastYIQ) + + setLoading(false) + } + + React.useEffect(() => { + initialize() + }, []) + + if (loading) { + return
+ +
+ } + + return
+
+
+ +
+ +
+

+ {user.public_name || user.username} + {user.verified && } +

+ + @{user.username} + +
+ + { + user.badges?.length > 0 && + } +
+ +
+} + +export default UserShareBadge \ No newline at end of file diff --git a/packages/app/src/components/UserShareBadge/index.less b/packages/app/src/components/UserShareBadge/index.less new file mode 100644 index 00000000..4b33131e --- /dev/null +++ b/packages/app/src/components/UserShareBadge/index.less @@ -0,0 +1,60 @@ +.user-share-badge { + width: 400px; + height: 240px; + + border-radius: 24px; + + // background-color: rgb(255, 96, 100); + // background-image: radial-gradient(circle, currentcolor 0%, transparent 110%); + + outline: 2px solid var(--border-color); + + padding: 20px; + + background-position: center; + background-repeat: no-repeat; + background-size: cover; + + h1, + h2, + h3, + h4, + h5, + h6, + p, + span { + color: currentColor; + margin: 0; + } + + .user-share-badge-info { + display: flex; + flex-direction: column; + + backdrop-filter: blur(5px); + -webkit-backdrop-filter: blur(5px); + + background-color: rgba(var(--bg_color_4), 0.4); + + width: fit-content; + + padding: 10px; + border-radius: 12px; + + .user-share-badge-avatar { + display: flex; + flex-direction: column; + + img { + border-radius: 12px; + } + } + + .user-share-badge-username { + display: flex; + flex-direction: column; + + font-size: 1.3rem; + } + } +} \ No newline at end of file diff --git a/packages/app/src/pages/settings/components/SettingItemComponent/index.jsx b/packages/app/src/pages/settings/components/SettingItemComponent/index.jsx index ab2c3e05..071d7686 100755 --- a/packages/app/src/pages/settings/components/SettingItemComponent/index.jsx +++ b/packages/app/src/pages/settings/components/SettingItemComponent/index.jsx @@ -360,6 +360,14 @@ export default class SettingItemComponent extends React.PureComponent { })) } + computeSwitchEnablerDefault = () => { + if (typeof this.props.setting.switchDefault === "function") { + return this.props.setting.switchDefault() + } + + return this.props.setting.switchDefault + } + render() { if (!this.props.setting) { console.error(`Item [${this.props.setting.id}] has no an setting!`) @@ -428,8 +436,9 @@ export default class SettingItemComponent extends React.PureComponent { {(t) => t(this.props.setting.title ?? this.props.setting.id)} + { - this.props.setting.experimental && Experimental + this.props.setting.experimental && Experimental }
@@ -441,45 +450,50 @@ export default class SettingItemComponent extends React.PureComponent {
- { - this.props.setting.extraActions &&
- { - this.props.setting.extraActions.map((action, index) => { - if (typeof action === "function") { - return React.createElement(action, { - ctx: { - updateCurrentValue: (updateValue) => this.setState({ - value: updateValue - }), - getCurrentValue: () => this.state.value, - currentValue: this.state.value, - dispatchUpdate: this.dispatchUpdate, - onUpdateItem: this.onUpdateItem, - processedCtx: this.props.ctx - }, - }) - } +
+ { + this.props.setting.extraActions && this.props.setting.extraActions.map((action, index) => { + if (typeof action === "function") { + return React.createElement(action, { + ctx: { + updateCurrentValue: (updateValue) => this.setState({ + value: updateValue + }), + getCurrentValue: () => this.state.value, + currentValue: this.state.value, + dispatchUpdate: this.dispatchUpdate, + onUpdateItem: this.onUpdateItem, + processedCtx: this.props.ctx + }, + }) + } - const handleOnClick = () => { - if (action.onClick) { - action.onClick(finalProps.ctx) - } + const handleOnClick = () => { + if (action.onClick) { + action.onClick(finalProps.ctx) } + } - return - {action.title} - - }) - } -
- } + return + {action.title} + + }) + } + + { + typeof this.props.setting.onEnabledChange === "function" && + } +
diff --git a/packages/app/src/pages/settings/components/SettingItemComponent/index.less b/packages/app/src/pages/settings/components/SettingItemComponent/index.less index 198ba880..e87df646 100644 --- a/packages/app/src/pages/settings/components/SettingItemComponent/index.less +++ b/packages/app/src/pages/settings/components/SettingItemComponent/index.less @@ -45,12 +45,13 @@ flex-direction: row; align-items: center; - justify-content: space-between; width: 100%; color: var(--background-color-contrast); + gap: 5px; + h1 { font-size: 1rem; margin: 0; diff --git a/packages/app/src/pages/settings/index.jsx b/packages/app/src/pages/settings/index.jsx index d69740d0..de0dd4e0 100755 --- a/packages/app/src/pages/settings/index.jsx +++ b/packages/app/src/pages/settings/index.jsx @@ -55,7 +55,7 @@ const generateMenuItems = () => { return { key: item.id, type: "item", - label:
+ label:
{createIconRender(item.icon ?? "Settings")} {item.label}
, @@ -126,7 +126,9 @@ export default () => { if (app.layout.tools_bar) { app.layout.tools_bar.toggleVisibility(false) } + }, [activeKey]) + React.useEffect(() => { return () => { if (app.layout.tools_bar) { app.layout.tools_bar.toggleVisibility(true) diff --git a/packages/app/src/pages/settings/index.less b/packages/app/src/pages/settings/index.less index 3c620d38..e7e4d3ac 100755 --- a/packages/app/src/pages/settings/index.less +++ b/packages/app/src/pages/settings/index.less @@ -29,6 +29,43 @@ padding: 0 30px; + gap: 3px; + + .ant-menu-item-group-list { + display: flex; + flex-direction: column; + + width: 100%; + gap: 3px; + } + + .menu-item-content { + display: flex; + flex-direction: row; + + align-items: center; + + height: fit-content; + + gap: 10px; + + svg { + margin: 0 !important; + } + } + + .ant-menu-item { + padding: 0 !important; + padding-inline: 20px !important; + margin: 0; + + border-radius: 24px; + + .ant-menu-title-content { + height: fit-content; + } + } + .ant-menu-item-danger { .ant-menu-title-content { svg { @@ -59,7 +96,7 @@ border-radius: 12px; - padding: 20px; + padding: 15px; gap: 15px; diff --git a/packages/app/src/settings/apparence/index.jsx b/packages/app/src/settings/apparence/index.jsx index d830679e..a0ae8a92 100755 --- a/packages/app/src/settings/apparence/index.jsx +++ b/packages/app/src/settings/apparence/index.jsx @@ -78,6 +78,10 @@ export default { width: "100%" }, options: [ + { + label: "Noto Sans", + value: "'Noto Sans', sans-serif" + }, { label: "Inter (Default)", value: "'Inter', sans-serif" @@ -117,7 +121,7 @@ export default { }, storaged: false, }, - + { id: "style.backgroundImage", group: "aspect", diff --git a/packages/app/src/settings/components/slidersWithPresets/index.jsx b/packages/app/src/settings/components/slidersWithPresets/index.jsx index abcbad43..7a8d69fa 100755 --- a/packages/app/src/settings/components/slidersWithPresets/index.jsx +++ b/packages/app/src/settings/components/slidersWithPresets/index.jsx @@ -88,41 +88,75 @@ export default (props) => { }, [selectedPreset]) return <> -
- - { + if (key === "new") { + handleCreateNewPreset() + } else { + setSelectedPreset(key) + } + }} + /> +
+
} \ No newline at end of file diff --git a/packages/app/src/settings/components/widgetsView/index.jsx b/packages/app/src/settings/components/widgetsManager/index.jsx similarity index 88% rename from packages/app/src/settings/components/widgetsView/index.jsx rename to packages/app/src/settings/components/widgetsManager/index.jsx index c3f06a2d..3fc17170 100755 --- a/packages/app/src/settings/components/widgetsView/index.jsx +++ b/packages/app/src/settings/components/widgetsManager/index.jsx @@ -7,14 +7,14 @@ import WidgetItemPreview from "@components/WidgetItemPreview" import "./index.less" -export default class WidgetsView extends React.Component { +export default class WidgetsManager extends React.Component { state = { - loadedWidgets: this.props.ctx.currentValue ?? [], + loadedWidgets: app.cores.widgets.getInstalled() ?? [], } render() { - return
-
+ return
+
{ Array.isArray(this.state.loadedWidgets) && this.state.loadedWidgets.map((manifest) => { return @@ -52,7 +52,7 @@ export default class WidgetsView extends React.Component { icon={} onClick={openWidgetsBrowserModal} > - Add widget + Install more
diff --git a/packages/app/src/settings/components/widgetsView/index.less b/packages/app/src/settings/components/widgetsManager/index.less similarity index 84% rename from packages/app/src/settings/components/widgetsView/index.less rename to packages/app/src/settings/components/widgetsManager/index.less index 76c23b9a..1b4b0305 100755 --- a/packages/app/src/settings/components/widgetsView/index.less +++ b/packages/app/src/settings/components/widgetsManager/index.less @@ -1,16 +1,16 @@ -.widgets_load { +.widgets-manager { display: flex; flex-direction: column; gap: 20px; - .widgets_load_list { + .widgets-manager-list { display: flex; flex-direction: column; gap: 10px; - .widget_load_list_item { + .widgets-manager-list-item { display: flex; flex-direction: row; @@ -22,14 +22,14 @@ border: 1px var(--border-color) solid; border-radius: 12px; - .widget_load_list_item_info { + .widgets-manager-list-item-info { display: flex; flex-direction: row; gap: 20px; } - .widget_load_list_item_icon { + .widgets-manager-list-item-icon { display: flex; flex-direction: row; @@ -47,7 +47,6 @@ object-fit: contain; } - } } } diff --git a/packages/app/src/settings/player/index.jsx b/packages/app/src/settings/player/index.jsx index 6435723c..7be685da 100755 --- a/packages/app/src/settings/player/index.jsx +++ b/packages/app/src/settings/player/index.jsx @@ -7,17 +7,35 @@ export default { group: "app", settings: [ { - id: "player.allowVolumeOver100", - title: "Allow volume over 100%", + id: "player.gain", + title: "Gain", + icon: "MdGraphicEq", group: "general", - icon: "MdHearing", - description: "Allow volume amplification over 100% (may cause distortion)", - component: "Switch", - storaged: true, + description: "Adjust gain for audio output", + component: "Slider", + props: { + min: 1, + max: 2, + step: 0.1, + marks: { + 1: "Normal", + 1.5: "+50%", + 2: "+100%" + } + }, + defaultValue: () => { + return app.cores.player.gain.values().gain + }, + onUpdate: (value) => { + app.cores.player.gain.modifyValues({ + gain: value + }) + }, + storaged: false, }, { id: "player.sample_rate", - title: "Sample rate", + title: "Sample Rate", icon: "MdHearing", group: "general", description: "Internal sample rate for audio output", @@ -52,54 +70,9 @@ export default { }, storaged: false, }, - { - id: "player.crossfade", - title: "Crossfade", - icon: "MdSwapHoriz", - group: "general", - description: "Enable crossfade between tracks", - component: "Slider", - props: { - min: 0, - max: 10, - step: 0.1, - marks: { - 0: "Off", - 1: "1s", - 2: "2s", - 3: "3s", - 4: "4s", - 5: "5s", - 6: "6s", - 7: "7s", - 8: "8s", - 9: "9s", - 10: "10s", - } - }, - storaged: true, - disabled: true, - }, - { - id: "player.compressor", - title: "Compression", - icon: "MdGraphicEq", - group: "general", - description: "Enable compression for audio output", - component: "Switch", - experimental: true, - beforeSave: (value) => { - if (value) { - app.cores.player.compressor.attach() - } else { - app.cores.player.compressor.detach() - } - }, - storaged: true, - }, { id: "player.compressor.values", - title: "Compression adjustment", + title: "Compression", icon: "Sliders", group: "general", description: "Adjust compression values (Warning: may cause distortion when changing values)", @@ -108,6 +81,18 @@ export default { "player.compressor": true }, component: loadable(() => import("./items/player.compressor")), + switchDefault: () => { + return app.cores.settings.get("player.compressor") + }, + onEnabledChange: (enabled) => { + if (enabled === true) { + app.cores.settings.set("player.compressor", true) + app.cores.player.compressor.attach() + } else { + app.cores.settings.set("player.compressor", false) + app.cores.player.compressor.detach() + } + }, props: { valueFormat: (value) => `${value}dB`, sliders: [ @@ -149,7 +134,7 @@ export default { extraActions: [ { id: "reset", - title: "Reset", + title: "Default", icon: "MdRefresh", onClick: async (ctx) => { const values = await app.cores.player.compressor.resetDefaultValues() @@ -165,33 +150,7 @@ export default { }, storaged: false, }, - { - id: "player.gain", - title: "Gain", - icon: "MdGraphicEq", - group: "general", - description: "Adjust gain for audio output", - component: "Slider", - props: { - min: 1, - max: 2, - step: 0.1, - marks: { - 1: "Off", - 1.5: "50%", - 2: "100%" - } - }, - defaultValue: () => { - return app.cores.player.gain.values().gain - }, - onUpdate: (value) => { - app.cores.player.gain.modifyValues({ - gain: value - }) - }, - storaged: false, - }, + { id: "player.eq", title: "Equalizer", @@ -211,7 +170,9 @@ export default { } }, ], - usePadding: false, + dependsOn: { + "player.equalizer": true + }, props: { valueFormat: (value) => `${value}dB`, marks: [ diff --git a/packages/app/src/settings/player/items/player.compressor/index.jsx b/packages/app/src/settings/player/items/player.compressor/index.jsx index caafdb6d..86f4aeec 100755 --- a/packages/app/src/settings/player/items/player.compressor/index.jsx +++ b/packages/app/src/settings/player/items/player.compressor/index.jsx @@ -1,8 +1,14 @@ +import { Switch } from "antd" import SlidersWithPresets from "../../../components/slidersWithPresets" export default (props) => { return + ]} /> } \ No newline at end of file diff --git a/packages/app/src/settings/tap_share/index.jsx b/packages/app/src/settings/tap_share/index.jsx index 0dcdf9e8..70efe3bd 100755 --- a/packages/app/src/settings/tap_share/index.jsx +++ b/packages/app/src/settings/tap_share/index.jsx @@ -3,15 +3,16 @@ import * as antd from "antd" import classnames from "classnames" import NFCModel from "comty.js/models/nfc" -import StepsContext from "./context" - import { Icons } from "@components/Icons" +import UserShareBadge from "@components/UserShareBadge" import CheckRegister from "./steps/check_register" import DataEditor from "./steps/data_editor" import TagWritter from "./steps/tag_writter" import Success from "./steps/success" +import StepsContext from "./context" + import "./index.less" const RegisterNewTagSteps = [ @@ -306,14 +307,29 @@ const TapShareRender = () => { Registered Tags
+ { app.cores.nfc.scanning && You can quickly edit your tags by tapping them. } +
+
+
+

+ Your Badge +

+
+ + +
+ { app.isMobile && import("../components/widgetsView")), - defaultValue: () => { - if (typeof app.cores.widgets === "undefined") { - return [] - } + render: () => { + React.useEffect(() => { + if (app.layout.tools_bar) { + app.layout.tools_bar.toggleVisibility(true) + } + }, []) - return app.cores.widgets.getInstalled() - }, - reloadValueOnUpdateEvent: "widgets:update", - storaged: false, - } - ] + return
+

Widgets

+ + +
+ }, } \ No newline at end of file diff --git a/packages/app/src/styles/fonts.less b/packages/app/src/styles/fonts.less index e6c18bb4..7319703b 100755 --- a/packages/app/src/styles/fonts.less +++ b/packages/app/src/styles/fonts.less @@ -1,6 +1,7 @@ /* Selectable fonts for users */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap'); /* Required secondary fonts */ @import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');