diff --git a/src/SettingHandlers.ts b/src/SettingHandlers.ts index 3f784d3..2d47409 100644 --- a/src/SettingHandlers.ts +++ b/src/SettingHandlers.ts @@ -67,9 +67,13 @@ export interface Heading extends Meta { resetFn?: () => void; } +export interface InfoText extends Meta { + markdown?: boolean; +} + export interface ClassToggle extends Meta { default?: boolean; - addCommand: boolean; + addCommand?: boolean; } export interface SelectOption { @@ -143,6 +147,7 @@ export interface VariableThemedColor extends Meta { export type CSSSetting = | Heading + | InfoText | ClassToggle | ClassMultiToggle | VariableText diff --git a/src/css/settings.css b/src/css/settings.css index 47016dc..bba27a7 100644 --- a/src/css/settings.css +++ b/src/css/settings.css @@ -189,4 +189,12 @@ width: 0 !important; height: 0 !important; pointer-events: none; +} + +.style-settings-info-text .style-settings-markdown :first-child { + margin-top: 0; +} + +.style-settings-info-text .style-settings-markdown :last-child { + margin-bottom: 0; } \ No newline at end of file diff --git a/src/settingsView/SettingComponents/HeadingSettingComponent.ts b/src/settingsView/SettingComponents/HeadingSettingComponent.ts index 7b05758..e73d09a 100644 --- a/src/settingsView/SettingComponents/HeadingSettingComponent.ts +++ b/src/settingsView/SettingComponents/HeadingSettingComponent.ts @@ -12,6 +12,7 @@ import { VariableNumberSliderSettingComponent } from './VariableNumberSliderSett import { VariableSelectSettingComponent } from './VariableSelectSettingComponent'; import { VariableColorSettingComponent } from './VariableColorSettingComponent'; import { VariableThemedColorSettingComponent } from './VariableThemedColorSettingComponent'; +import { InfoTextSettingComponent } from './InfoTextSettingComponent'; export function createSettingComponent( sectionId: string, @@ -28,6 +29,14 @@ export function createSettingComponent( settingsManager, isView ); + } else if (setting.type === SettingType.INFO_TEXT) { + return new InfoTextSettingComponent( + sectionId, + sectionName, + setting, + settingsManager, + isView + ); } else if (setting.type === SettingType.CLASS_TOGGLE) { return new ClassToggleSettingComponent( sectionId, diff --git a/src/settingsView/SettingComponents/InfoTextSettingComponent.ts b/src/settingsView/SettingComponents/InfoTextSettingComponent.ts new file mode 100644 index 0000000..03a5115 --- /dev/null +++ b/src/settingsView/SettingComponents/InfoTextSettingComponent.ts @@ -0,0 +1,40 @@ +import { AbstractSettingComponent } from './AbstractSettingComponent'; +import { MarkdownRenderer, Setting } from 'obsidian'; +import { InfoText } from '../../SettingHandlers'; +import { getDescription, getTitle } from '../../Utils'; + +export class InfoTextSettingComponent extends AbstractSettingComponent { + settingEl: Setting; + + setting: InfoText; + + render(containerEl: HTMLElement): void { + const title = getTitle(this.setting); + const description = getDescription(this.setting); + + this.settingEl = new Setting(containerEl); + this.settingEl.setClass('style-settings-info-text'); + if (title) { + this.settingEl.setName(title); + } + if (description) { + if (this.setting.markdown) { + MarkdownRenderer.renderMarkdown( + description, + this.settingEl.descEl, + '', + undefined + ); + this.settingEl.descEl.addClass('style-settings-markdown'); + } else { + this.settingEl.setDesc(description); + } + } + + this.settingEl.settingEl.dataset.id = this.setting.id; + } + + destroy(): void { + this.settingEl?.settingEl.remove(); + } +} diff --git a/src/settingsView/SettingComponents/types.ts b/src/settingsView/SettingComponents/types.ts index ca8079e..ccb01ef 100644 --- a/src/settingsView/SettingComponents/types.ts +++ b/src/settingsView/SettingComponents/types.ts @@ -1,5 +1,6 @@ export const SettingType = { HEADING: 'heading', + INFO_TEXT: 'info-text', CLASS_TOGGLE: 'class-toggle', CLASS_SELECT: 'class-select', VARIABLE_TEXT: 'variable-text', diff --git a/styles.css b/styles.css index 3eb4e2f..2971809 100644 --- a/styles.css +++ b/styles.css @@ -1,44 +1,3 @@ -.style-settings-container .pcr-app { - display: none; -} - -.style-settings-container .pcr-app.visible { - display: flex; -} - -.pcr-app .pcr-swatches > button { - padding: 0; -} - -.pickr .pcr-button { - margin-right: 0; -} - -.themed-color-wrapper > div { - background: var(--background-primary); - padding: 10px; - display: flex; - align-items: center; - border-radius: 4px; -} - -.themed-color-wrapper > div + div { - margin-top: 6px; -} - -.themed-color-wrapper button { - display: block; -} - -.themed-color-wrapper .pickr-reset > button { - margin: 0 0 0 10px; - padding: 9px; - line-height: 1; -} - -.themed-color-wrapper .pickr-reset > button > svg { - display: block; -} .style-settings-heading { cursor: pointer; margin-bottom: 18px; @@ -230,6 +189,55 @@ width: 0 !important; height: 0 !important; pointer-events: none; -}/*! Pickr 1.8.4 MIT | https://github.com/Simonwep/pickr */ +} + +.style-settings-info-text .style-settings-markdown :first-child { + margin-top: 0; +} + +.style-settings-info-text .style-settings-markdown :last-child { + margin-bottom: 0; +}.style-settings-container .pcr-app { + display: none; +} + +.style-settings-container .pcr-app.visible { + display: flex; +} + +.pcr-app .pcr-swatches > button { + padding: 0; +} + +.pickr .pcr-button { + margin-right: 0; +} + +.themed-color-wrapper > div { + background: var(--background-primary); + padding: 10px; + display: flex; + align-items: center; + border-radius: 4px; +} + +.themed-color-wrapper > div + div { + margin-top: 6px; +} + +.themed-color-wrapper button { + display: block; +} + +.themed-color-wrapper .pickr-reset > button { + margin: 0 0 0 10px; + padding: 9px; + line-height: 1; +} + +.themed-color-wrapper .pickr-reset > button > svg { + display: block; +} +/*! Pickr 1.8.4 MIT | https://github.com/Simonwep/pickr */ .pickr{position:relative;overflow:visible;transform:translateY(0)}.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr .pcr-button{position:relative;height:2em;width:2em;padding:0.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, ') no-repeat center;background-size:0;transition:all 0.3s}.pickr .pcr-button::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, ');background-size:.5em;border-radius:.15em;z-index:-1}.pickr .pcr-button::before{z-index:initial}.pickr .pcr-button::after{position:absolute;content:'';top:0;left:0;height:100%;width:100%;transition:background 0.3s;background:var(--pcr-color);border-radius:.15em}.pickr .pcr-button.clear{background-size:70%}.pickr .pcr-button.clear::before{opacity:0}.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px var(--pcr-color)}.pickr .pcr-button.disabled{cursor:not-allowed}.pickr *,.pcr-app *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr input:focus,.pickr input.pcr-active,.pickr button:focus,.pickr button.pcr-active,.pcr-app input:focus,.pcr-app input.pcr-active,.pcr-app button:focus,.pcr-app button.pcr-active{box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px var(--pcr-color)}.pickr .pcr-palette,.pickr .pcr-slider,.pcr-app .pcr-palette,.pcr-app .pcr-slider{transition:box-shadow 0.3s}.pickr .pcr-palette:focus,.pickr .pcr-slider:focus,.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus{box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px rgba(0,0,0,0.25)}.pcr-app{position:fixed;display:flex;flex-direction:column;z-index:10000;border-radius:0.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity 0.3s, visibility 0s 0.3s;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;box-shadow:0 0.15em 1.5em 0 rgba(0,0,0,0.1),0 0 1em 0 rgba(0,0,0,0.03);left:0;top:0}.pcr-app.visible{transition:opacity 0.3s;visibility:visible;opacity:1}.pcr-app .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:0.75em}.pcr-app .pcr-swatches.pcr-last{margin:0}@supports (display: grid){.pcr-app .pcr-swatches{display:grid;align-items:center;grid-template-columns:repeat(auto-fit, 1.75em)}}.pcr-app .pcr-swatches>button{font-size:1em;position:relative;width:calc(1.75em - 5px);height:calc(1.75em - 5px);border-radius:0.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all 0.15s;overflow:hidden;background:transparent;z-index:1}.pcr-app .pcr-swatches>button::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, ');background-size:6px;border-radius:.15em;z-index:-1}.pcr-app .pcr-swatches>button::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:var(--pcr-color);border:1px solid rgba(0,0,0,0.05);border-radius:0.15em;box-sizing:border-box}.pcr-app .pcr-swatches>button:hover{filter:brightness(1.05)}.pcr-app .pcr-swatches>button:not(.pcr-active){box-shadow:none}.pcr-app .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -0.2em 0 -0.2em}.pcr-app .pcr-interaction>*{margin:0 0.2em}.pcr-app .pcr-interaction input{letter-spacing:0.07em;font-size:0.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all 0.15s;padding:0.45em 0.5em;margin-top:0.75em}.pcr-app .pcr-interaction input:hover{filter:brightness(0.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px rgba(66,133,244,0.75)}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all 0.2s;border-radius:.15em;background:#f1f3f4;cursor:text}.pcr-app .pcr-interaction .pcr-result::-moz-selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff;width:auto}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff}.pcr-app .pcr-interaction .pcr-save:hover,.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover{filter:brightness(0.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-cancel{background:#f44250}.pcr-app .pcr-interaction .pcr-clear:focus,.pcr-app .pcr-interaction .pcr-cancel:focus{box-shadow:0 0 0 1px rgba(255,255,255,0.85),0 0 0 3px rgba(244,66,80,0.75)}.pcr-app .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pcr-app .pcr-selection .pcr-color-palette,.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:column;cursor:grab;cursor:-webkit-grab}.pcr-app .pcr-selection .pcr-color-palette:active,.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active{cursor:grabbing;cursor:-webkit-grabbing}.pcr-app[data-theme='nano']{width:14.25em;max-width:95vw}.pcr-app[data-theme='nano'] .pcr-swatches{margin-top:.6em;padding:0 .6em}.pcr-app[data-theme='nano'] .pcr-interaction{padding:0 .6em .6em .6em}.pcr-app[data-theme='nano'] .pcr-selection{display:grid;grid-gap:.6em;grid-template-columns:1fr 4fr;grid-template-rows:5fr auto auto;align-items:center;height:10.5em;width:100%;align-self:flex-start}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-preview{grid-area:2 / 1 / 4 / 1;height:100%;width:100%;display:flex;flex-direction:row;justify-content:center;margin-left:.6em}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-preview .pcr-last-color{display:none}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-preview .pcr-current-color{position:relative;background:var(--pcr-color);width:2em;height:2em;border-radius:50em;overflow:hidden}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-preview .pcr-current-color::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, ');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-palette{grid-area:1 / 1 / 2 / 3;width:100%;height:100%;z-index:1}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-palette .pcr-palette{border-radius:.15em;width:100%;height:100%}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-palette .pcr-palette::before{position:absolute;content:'';top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, ');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser{grid-area:2 / 2 / 2 / 2}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity{grid-area:3 / 2 / 3 / 2}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity{height:0.5em;margin:0 .6em}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity .pcr-picker{top:50%;transform:translateY(-50%)}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity .pcr-slider{flex-grow:1;border-radius:50em}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(to right, red, #ff0, lime, cyan, blue, #f0f, red)}.pcr-app[data-theme='nano'] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(to right, transparent, black),url('data:image/svg+xml;utf8, ');background-size:100%, 0.25em}