add colored background setting

This commit is contained in:
Fulmine 2022-03-19 10:18:19 +01:00
parent 5c37d689d6
commit 6eed689db2

View File

@ -10,7 +10,7 @@
banner_top: true, banner_top: true,
banner_bottom: true, banner_bottom: true,
gradient_background: false, gradient_background: false,
no_background: false, color_background: false,
twemoji: false twemoji: false
} }
}; };
@ -37,17 +37,21 @@
<h4>Appearance</h4> <h4>Appearance</h4>
<hr/> <hr/>
<Row> <Row>
<Col xs={12} lg={4}> <Col xs={12} lg={4} class="mb-2">
<span id="s-bannertop">Show banners in the background?</span> <Toggle hideLabel style="display: inline" label="Remove banner from background" toggled={settings.appearance.banner_top} on:toggle={() => {settings.appearance.banner_top = !settings.appearance.banner_top; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/> <span id="s-bannertop">Show banners in the background?</span> <Toggle hideLabel style="display: inline" label="Remove banner from background" toggled={settings.appearance.banner_top} on:toggle={() => {settings.appearance.banner_top = !settings.appearance.banner_top; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/>
<Tooltip target="s-bannertop" placement="bottom">Toggles banners from the top of the system, member and group pages.</Tooltip> <Tooltip target="s-bannertop" placement="bottom">If enabled, shows banners from the top of the system, member and group pages.</Tooltip>
</Col> </Col>
<Col xs={12} lg={4}> <Col xs={12} lg={4} class="mb-2">
<span id="s-bannerbottom">Show banners at the bottom of cards?</span> <Toggle hideLabel style="display: inline" label="Remove banner from bottom" toggled={settings.appearance.banner_bottom} on:toggle={() => {settings.appearance.banner_bottom = !settings.appearance.banner_bottom; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/> <span id="s-bannerbottom">Show banners at the bottom of cards?</span> <Toggle hideLabel style="display: inline" label="Remove banner from bottom" toggled={settings.appearance.banner_bottom} on:toggle={() => {settings.appearance.banner_bottom = !settings.appearance.banner_bottom; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/>
<Tooltip target="s-bannerbottom" placement="bottom">Toggles banners at the bottom of the system, member and group cards.</Tooltip> <Tooltip target="s-bannerbottom" placement="bottom">If enabled, shows banners at the bottom of the system, member and group cards.</Tooltip>
</Col> </Col>
<Col xs={12} lg={4}> <Col xs={12} lg={4} class="mb-2">
<span id="s-twemoji">Use twemoji?</span> <Toggle hideLabel style="display: inline" label="Convert to twemoji" toggled={settings.appearance.twemoji} on:toggle={() => {settings.appearance.twemoji = !settings.appearance.twemoji; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/> <span id="s-twemoji">Use twemoji?</span> <Toggle hideLabel style="display: inline" label="Convert to twemoji" toggled={settings.appearance.twemoji} on:toggle={() => {settings.appearance.twemoji = !settings.appearance.twemoji; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/>
<Tooltip target="s-bannerbottom" placement="bottom">Converts all emojis to twemoji.</Tooltip> <Tooltip target="s-bannerbottom" placement="bottom">If enabled, converts all emojis into twemoji.</Tooltip>
</Col>
<Col xs={12} lg={4} class="mb-2">
<span id="s-colorbackground">Colored background?</span> <Toggle hideLabel style="display: inline" label="Member color as background" toggled={settings.appearance.color_background} on:toggle={() => {settings.appearance.color_background = !settings.appearance.color_background; localStorage.setItem("pk-settings", JSON.stringify(settings));}}/>
<Tooltip target="s-colorbackground" placement="bottom">If enabled, turns the background on member pages into the member's color.</Tooltip>
</Col> </Col>
</Row> </Row>
</CardBody> </CardBody>