Fix button color (#139)

* update styles for obsidian 1.0.0

* add Buttons 1.0 teaser message

* update manifest

* wrap in onLayoutReady so it fires on reloed if needed

* add version.ts

manifest.json

@@ -2,7 +2,7 @@
   "id": "buttons",
   "name": "Buttons",
   "description": "Create Buttons in your Obsidian notes to run commands, open links, and insert templates",
-  "version": "0.4.17",
+  "version": "0.4.18",
   "author": "shabegom",
   "authorUrl": "https://shbgm.ca",
   "isDesktopOnly": false,

src/index.ts

@@ -1,23 +1,24 @@
 import {
   App,
-  Plugin,
   EventRef,
   Events,
-  MarkdownView,
   MarkdownRenderChild,
+  MarkdownView,
+  Plugin,
 } from "obsidian";
 import { createArgumentObject } from "./utils";
 import {
-  initializeButtonStore,
   addButtonToStore,
-  getButtonFromStore,
   getButtonById,
+  getButtonFromStore,
   getStore,
+  initializeButtonStore,
 } from "./buttonStore";
 import { buttonEventListener, openFileListener } from "./events";
 import { Arguments } from "./types";
 import { ButtonModal, InlineButtonModal } from "./modal";
-import { createButton, Button } from "./button";
+import { Button, createButton } from "./button";
+import { updateWarning } from "./version";
 
 export default class ButtonsPlugin extends Plugin {
   private buttonEvents: EventRef;
@@ -26,7 +27,7 @@ export default class ButtonsPlugin extends Plugin {
   private createButton: Button;
   private storeEvents = new Events();
   private indexCount = 0;
-  private storeEventsRef: EventRef
+  private storeEventsRef: EventRef;
 
   private async addButtonInEdit(app: App) {
     let widget: CodeMirror.LineWidget;
@@ -66,13 +67,20 @@ export default class ButtonsPlugin extends Plugin {
     }
   }
   async onload(): Promise<void> {
+    this.app.workspace.onLayoutReady(async () => {
+      await updateWarning();
+    });
     this.buttonEvents = buttonEventListener(this.app, addButtonToStore);
-    this.closedFile = openFileListener(this.app, this.storeEvents, initializeButtonStore);
+    this.closedFile = openFileListener(
+      this.app,
+      this.storeEvents,
+      initializeButtonStore
+    );
     this.createButton = createButton as Button;
-    this.storeEventsRef = this.storeEvents.on('index-complete', () => { 
+    this.storeEventsRef = this.storeEvents.on("index-complete", () => {
       this.indexCount++;
-    })
-        initializeButtonStore(this.app, this.storeEvents);
+    });
+    initializeButtonStore(this.app, this.storeEvents);
 
     this.buttonEdit = openFileListener(
       this.app,
@@ -117,20 +125,22 @@ export default class ButtonsPlugin extends Plugin {
         if (text.startsWith("button")) {
           const id = text.split("button-")[1].trim();
           if (this.indexCount < 2) {
-          this.storeEventsRef = this.storeEvents.on('index-complete', async () => {
-          this.indexCount++;
-          const args = await getButtonById(this.app, id);
-          if (args) {
-            ctx.addChild(new InlineButton(codeblock, this.app, args, id))
+            this.storeEventsRef = this.storeEvents.on(
+              "index-complete",
+              async () => {
+                this.indexCount++;
+                const args = await getButtonById(this.app, id);
+                if (args) {
+                  ctx.addChild(new InlineButton(codeblock, this.app, args, id));
+                }
+              }
+            );
+          } else {
+            const args = await getButtonById(this.app, id);
+            if (args) {
+              ctx.addChild(new InlineButton(codeblock, this.app, args, id));
+            }
           }
-        })
-
-      } else {
-        const args = await getButtonById(this.app, id);
-        if (args) {
-          ctx.addChild(new InlineButton(codeblock, this.app, args, id))
-        }
-      }
         }
       }
     });

src/version.ts

@@ -0,0 +1,81 @@
+export const checkVersion = () => {
+  const savedVersion = localStorage.getItem("buttonsVersion");
+  const installedVersion = app.plugins.plugins.buttons.manifest.version;
+  if (
+    parseInt(savedVersion) < parseInt(installedVersion) ||
+    savedVersion === null
+  ) {
+    return true;
+  }
+  return false;
+};
+
+export const saveVersion = () => {
+  localStorage.setItem(
+    "buttonsVersion",
+    app.plugins.plugins.buttons.manifest.version
+  );
+};
+
+const releaseNote = `
+There is a major update to Buttons coming that will bring much needed improvements. The plugin has been rewritten from scratch to make it easier to squash bugs and add new features. Some existing features will also be removed. This is a warning for all Buttons users to prepare for what may break your buttons.
+
+## Breaking Changes
+- Calculate buttons are deprecated: use template buttons and  Templater to do calculations
+- Text buttons are deprecated: use template buttons to add text
+- Core Templates plugin is no longer supported. Use Templater.
+- Button Inheritance is no longer supported (this doesn't include inline buttons, which will now work in Live Preview).
+- All Buttons now run Templater, no need to add templater true
+
+If you read that list and are like _"Hol Up! I need all those features"_. I will be forking the existing Buttons plugin which can be manually installed, but will no longer be supported.
+
+## Buttons 1.0 Features
+The biggest change is a much more reliable and safe plugin that should be easier to bugfix and build new features for. There are a few nice improvements that will come with it:
+- Templater processing is greatly improved.
+- New note templates can be opened in tabs/windows/splits/not at all
+- Button Maker command is rewritten with a cleaner UX
+- Inline buttons work in Live Preview
+- Button Block IDs are hidden unless the cursor is on the line
+- Swap buttons will remember their state when leaving and returning to the notes they are in
+- A new documentation site with easier to read docs
+- A boatload of bugfixes
+
+## When can I get it?
+It's coming soon! I want to release it as part of Obsidian October and am in the final 20% of work. That said, I will release when I'm confident I won't totally FUBAR your buttons.
+
+Yours in Buttons,
+
+shabegom
+
+(this note will be deleted when you close the tab and won't appear again)
+`;
+
+const deleteIfExists = async () => {
+  const file = await app.vault.getAbstractFileByPath(
+    "/Buttons 1.0 is Coming.md"
+  );
+  if (file) {
+    await app.vault.delete(file);
+  }
+};
+
+export const updateWarning = async () => {
+  const showReleaseNotes = checkVersion();
+  if (showReleaseNotes) {
+    deleteIfExists();
+    const releaseNotes = await app.vault.create(
+      "Buttons 1.0 is Coming.md",
+      releaseNote
+    );
+    app.workspace
+      .getLeaf(true)
+      .openFile(releaseNotes, { state: { mode: "preview" } });
+    saveVersion();
+    setTimeout(async () => {
+      const clearReleaseNotes = app.workspace.on("layout-change", async () => {
+        await app.vault.delete(releaseNotes);
+        app.workspace.offref(clearReleaseNotes);
+      });
+    }, 1000);
+  }
+};

styles.css

@@ -54,7 +54,7 @@ settings:
   padding: 5px;
 }
 
-.button-default {
+button.button-default {
   border: 0.5px solid var(--button-border, #7a9486);
   border-radius: var(--button-border-radius, 5px);
   background-color: var(--button-background);
@@ -68,66 +68,66 @@ settings:
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
-.button-default:hover {
+button.button-default:hover {
   z-index: 100;
   box-shadow: 0 4px 4px var(--button-box-shadow, rgba(0, 0, 0, 0.25)),
     0 10px 10px var(--button-box-shadow, rgba(0, 0, 0, 0.22));
   transform: translate3d(0px, -1.5px, 0px);
   background-color: var(--button-background);
 }
 
-.theme-dark .button-default {
+.theme-dark button.button-default {
   border: 0.5px solid var(--button-border, #84a83a);
 }
 
-.theme-dark .button-default:hover {
+.theme-dark button.button-default:hover {
   z-index: 100;
   box-shadow: 0 4px 4px var(--button-box-shadow, rgba(210, 210, 210, 0.25)),
     0 10px 10px var(--button-box-shadow, rgba(210, 210, 210, 0.22));
   transform: translate3d(0px, -1.5px, 0px);
 }
 
-.blue {
+button.blue {
   background: #76b3fa;
   color: black;
 }
 
-.red {
-  background: red;
+button.red {
+  background-color: red;
 }
 
-.green {
+button.green {
   background: green;
 }
 
-.yellow {
+button.yellow {
   background: yellow;
   color: black;
 }
 
-.purple {
+button.purple {
   background: #725585;
 }
 
-.blue:hover {
+button.blue:hover {
   background: #76b3fa;
   color: black;
 }
 
-.red:hover {
+button.red:hover {
   background: red;
 }
 
-.green:hover {
+button.green:hover {
   background: green;
 }
 
-.yellow:hover {
+button.yellow:hover {
   background: yellow;
   color: black;
 }
 
-.purple:hover {
+button.purple:hover {
   background: #725585;
 }