Skip to content

Commit

Permalink
Add empty and error messages
Browse files Browse the repository at this point in the history
  • Loading branch information
@mgmeyers
mgmeyers committed Apr 15, 2021
1 parent bb4d1d0 commit 4440059
Show file tree
Hide file tree
Showing 8 changed files with 226 additions and 73 deletions.
2 changes: 1 addition & 1 deletion manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"id": "obsidian-style-settings",
"name": "Style Settings",
"version": "0.2.1",
"version": "0.2.2",
"minAppVersion": "0.11.5",
"description": "Offers controls for adjusting theme, plugin, and snippet CSS variables.",
"author": "mgmeyers",
Expand Down
6 changes: 4 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,12 @@
"dependencies": {
"@simonwep/pickr": "^1.8.0",
"@types/chroma-js": "^2.1.3",
"@types/js-yaml": "^4.0.0",
"chroma-js": "^2.1.1",
"detect-indent": "^6.0.0",
"dotenv": "^8.2.0",
"js-yaml": "^4.1.0",
"rollup-plugin-copy": "^3.4.0",
"rollup-plugin-css-only": "^3.1.0",
"yaml": "^1.10.2"
"rollup-plugin-css-only": "^3.1.0"
}
}
84 changes: 73 additions & 11 deletions src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,21 @@ import { App, Plugin, PluginSettingTab } from "obsidian";
import { CSSSettingsManager } from "./SettingsManager";
import {
CleanupFunction,
createHeading,
createSettings,
CSSSetting,
ParsedCSSSettings,
} from "./settingHandlers";
import { parse } from "yaml";
import yaml from "js-yaml";
import detectIndent from "detect-indent";

import "@simonwep/pickr/dist/themes/nano.min.css";
import "./pickerOverrides.css";
import "./settings.css";

const settingRegExp = /\/\*\s*@settings[\r\n]+?([\s\S]+?)\*\//g;
const nameRegExp = /^name:\s*(.+)$/m;

type ErrorList = Array<{ name: string; error: string }>;

export default class CSSSettingsPlugin extends Plugin {
settingsManager: CSSSettingsManager;
Expand All @@ -32,29 +35,42 @@ export default class CSSSettingsPlugin extends Plugin {
this.app.workspace.on("css-change", () => {
const styleSheets = document.styleSheets;
const settingsList: ParsedCSSSettings[] = [];
const errorList: ErrorList = [];

for (let i = 0, len = styleSheets.length; i < len; i++) {
const sheet = styleSheets.item(i);
const text = sheet.ownerNode.textContent.trim();

let match = settingRegExp.exec(text);

if (match && match.length) {
const nameMatch = text.match(nameRegExp);
const name: string | null = nameMatch ? nameMatch[1] : null;

try {
do {
const str = match[1].trim().replace(/\t/g, " ");
const settings = parse(str);

if (settings.name && settings.id && settings.settings) {
settingsList.push(settings as ParsedCSSSettings);
const str = match[1].trim();
const indent = detectIndent(str);
const settings = yaml.load(str.replace(/\t/g, indent.indent), {
filename: name,
}) as ParsedCSSSettings;

if (
typeof settings === "object" &&
settings.name &&
settings.id &&
settings.settings
) {
settingsList.push(settings);
}
} while ((match = settingRegExp.exec(text)) !== null);
} catch (e) {
console.error("Error parsing style settings: ", e);
errorList.push({ name, error: `${e}` });
}
}
}

this.settingsTab.setSettings(settingsList);
this.settingsTab.setSettings(settingsList, errorList);
this.settingsManager.initClasses();
})
);
Expand All @@ -75,6 +91,7 @@ class CSSSettingsTab extends PluginSettingTab {
plugin: CSSSettingsPlugin;
cleanupFns: CleanupFunction[] = [];
settings: ParsedCSSSettings[] = [];
errorList: ErrorList = [];

constructor(app: App, plugin: CSSSettingsPlugin) {
super(app, plugin);
Expand All @@ -89,20 +106,65 @@ class CSSSettingsTab extends PluginSettingTab {
this.cleanupFns.forEach((fn) => fn && fn());
}

setSettings(settings: ParsedCSSSettings[]) {
setSettings(settings: ParsedCSSSettings[], errorList: ErrorList) {
this.settings = settings;
this.errorList = errorList;

this.plugin.settingsManager.setConfig(settings);

if (this.containerEl.parentNode) {
this.generate(settings);
}
}

displayErrors() {
let { containerEl, errorList } = this;

errorList.forEach((err) => {
containerEl.createDiv({ cls: "style-settings-error" }, (wrapper) => {
wrapper.createDiv({ cls: "style-settings-error-name", text: `Error: ${err.name}` });
wrapper.createDiv({
cls: "style-settings-error-desc",
text: err.error,
});
});
});
}

displayEmpty() {
let { containerEl } = this;

containerEl.createDiv({ cls: "style-settings-empty" }, (wrapper) => {
wrapper.createDiv({
cls: "style-settings-empty-name",
text: "No style settings found",
});
wrapper.createDiv({ cls: "style-settings-empty-desc" }).appendChild(
createFragment((frag) => {
frag.appendText(
"Style settings configured by theme and plugin authors will show up here. You can also create your own configuration by creating a CSS snippet in your vault. "
);
frag.createEl("a", {
text: "Click here for details and examples.",
href:
"https://github.com/mgmeyers/obsidian-style-settings#obsidian-style-settings-plugin",
});
})
);
});
}

generate(settings: ParsedCSSSettings[]) {
let { containerEl, plugin } = this;

containerEl.empty();

this.cleanup();
this.displayErrors();

if (settings.length === 0) {
return this.displayEmpty();
}

const cleanupFns: CleanupFunction[] = [];

Expand All @@ -116,7 +178,7 @@ class CSSSettingsTab extends PluginSettingTab {
collapsed: true,
resetFn: () => {
plugin.settingsManager.clearSection(s.id);
this.generate(this.settings)
this.generate(this.settings);
},
},
...s.settings,
Expand Down
2 changes: 1 addition & 1 deletion src/pickerOverrides.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,4 +30,4 @@

.themed-color-wrapper .pickr-reset > button > svg {
display: block;
}
}
29 changes: 29 additions & 0 deletions src/settings.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,4 +44,33 @@

.style-settings-heading.is-collapsed .style-settings-collapse-indicator > svg {
transform: rotate(-90deg);
}

.style-settings-error {
font-size: 14px;
border-radius: 6px;
background: rgba(var(--background-modifier-error-rgb), 0.2);
color: var(--text-error);
padding: 10px;
margin-bottom: 1rem;
}

.style-settings-error-name {
font-weight: bold;
margin-bottom: 5px;
}

.style-settings-error-desc {
white-space: pre;
}

.style-settings-empty {
font-size: 14px;
background: var(--background-secondary);
padding: 10px;
}

.style-settings-empty-name {
font-weight: bold;
margin-bottom: 5px;
}
72 changes: 51 additions & 21 deletions styles.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,36 @@
.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;
Expand Down Expand Up @@ -44,36 +77,33 @@

.style-settings-heading.is-collapsed .style-settings-collapse-indicator > svg {
transform: rotate(-90deg);
}.pcr-app .pcr-swatches > button {
padding: 0;
}

.pickr .pcr-button {
margin-right: 0;
}

.themed-color-wrapper > div {
background: var(--background-primary);
.style-settings-error {
font-size: 14px;
border-radius: 6px;
background: rgba(var(--background-modifier-error-rgb), 0.2);
color: var(--text-error);
padding: 10px;
display: flex;
align-items: center;
border-radius: 4px;
margin-bottom: 1rem;
}

.themed-color-wrapper > div + div {
margin-top: 6px;
.style-settings-error-name {
font-weight: bold;
margin-bottom: 5px;
}

.themed-color-wrapper button {
display: block;
.style-settings-error-desc {
white-space: pre;
}

.themed-color-wrapper .pickr-reset > button {
margin: 0 0 0 10px;
padding: 9px;
line-height: 1;
.style-settings-empty {
font-size: 14px;
background: var(--background-secondary);
padding: 10px;
}

.themed-color-wrapper .pickr-reset > button > svg {
display: block;
.style-settings-empty-name {
font-weight: bold;
margin-bottom: 5px;
}/*! Pickr 1.8.0 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:.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, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" stroke="%2342445A" stroke-width="5px" stroke-linecap="round"><path d="M45,45L5,5"></path><path d="M45,5L5,45"></path></svg>') no-repeat 50%;background-size:0;transition:all .3s}.pickr .pcr-button:before{background:url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:.5em;z-index:-1;z-index:auto}.pickr .pcr-button:after,.pickr .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;border-radius:.15em}.pickr .pcr-button:after{transition:background .3s;background:currentColor}.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 hsla(0,0%,100%,.85),0 0 0 3px currentColor}.pickr .pcr-button.disabled{cursor:not-allowed}.pcr-app *,.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pcr-app button.pcr-active,.pcr-app button:focus,.pcr-app input.pcr-active,.pcr-app input:focus,.pickr button.pcr-active,.pickr button:focus,.pickr input.pcr-active,.pickr input:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px currentColor}.pcr-app .pcr-palette,.pcr-app .pcr-slider,.pickr .pcr-palette,.pickr .pcr-slider{transition:box-shadow .3s}.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus,.pickr .pcr-palette:focus,.pickr .pcr-slider:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(0,0,0,.25)}.pcr-app{position:fixed;display:flex;flex-direction:column;z-index:10000;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);left:0;top:0}.pcr-app.visible{transition:opacity .3s;visibility:visible;opacity:1}.pcr-app .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.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:.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all .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, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');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:currentColor;border:1px solid rgba(0,0,0,.05);border-radius:.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 -.2em}.pcr-app .pcr-interaction>*{margin:0 .2em}.pcr-app .pcr-interaction input{letter-spacing:.07em;font-size:.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all .15s;padding:.45em .5em;margin-top:.75em}.pcr-app .pcr-interaction input:hover{filter:brightness(.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(66,133,244,.75)}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all .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-cancel,.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-save{width:auto;color:#fff}.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover,.pcr-app .pcr-interaction .pcr-save:hover{filter:brightness(.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{background:#f44250}.pcr-app .pcr-interaction .pcr-cancel:focus,.pcr-app .pcr-interaction .pcr-clear:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(244,66,80,.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-chooser,.pcr-app .pcr-selection .pcr-color-opacity,.pcr-app .pcr-selection .pcr-color-palette{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-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active,.pcr-app .pcr-selection .pcr-color-palette: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}.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:currentColor;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, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');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, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');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:.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(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(90deg,transparent,#000),url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>');background-size:100%,.25em}
1 change: 1 addition & 0 deletions versions.json
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
{
"0.2.2": "0.11.5",
"0.2.1": "0.11.5",
"0.2.0": "0.11.5",
"0.1.1": "0.11.5",
Expand Down
Loading

0 comments on commit 4440059

Please sign in to comment.