V1.4.4 (#46)

* v1.4.4 adds some padding below buttons for updating/ignoring plugin versions so that its never cut-off by the status bar * v1.4.4 add css selectors for the plug icon and chip/icon beside it * v1.4.4 update version numbers * Update README.md Co-authored-by: Steven Swartz <[email protected]>
swar8080 · Jan 6, 2023 · 2ba37a9 · 2ba37a9
1 parent c942028
commit 2ba37a9
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -100,14 +100,18 @@ Appearance can also be customized using obsidian CSS snippets (Go to *Settings >
 
 The following CSS selectors exist:
 
-- *.status-bar-item.plugin-obsidian-plugin-update-tracker*: The status bar plugin icon
+- *.status-bar-item.plugin-obsidian-plugin-update-tracker*: The container of the +status bar plugin icon
 
-- *.plugin-update-tracker-icon--loading*: Plugic icon in the loading state (⌛)
+- *.plugin-update-tracker-icon--loading*: Plugic icon container in the loading state (⌛)
 
-- *.plugin-update-tracker-icon--no-updates-available*: Plugin icon when no updates are available (✓)
+- *.plugin-update-tracker-icon--no-updates-available*: Plugic icon container when no updates are available (✓)
 
-- *.plugin-update-tracker-icon--updates-available*: Plugic icon when updates are available
+- *.plugin-update-tracker-icon--updates-available*: Plugic icon container when updates are available
 
+- *.plugin-update-tracker-icon-plug-icon*: The plug icon (<img width="14" alt="image" src="https://user-images.githubusercontent.com/17691679/211116452-04d72518-4229-4013-88e5-ef4edc0b135c.png">
+)
+
+- *.plugin-update-tracker-icon-chip*: The status icon to the right of the plug icon
 
 **Examples**
 

diff --git a/manifest-beta.json b/manifest-beta.json
@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-plugin-update-tracker",
 	"name": "Plugin Update Tracker",
-	"version": "1.4.3",
+	"version": "1.4.4",
 	"minAppVersion": "0.15.0",
 	"description": "Know when installed plugins have updates and evaluate the risk of upgrading",
 	"author": "Obsidian",

diff --git a/src/components/SelectedPluginActionBar.tsx b/src/components/SelectedPluginActionBar.tsx
@@ -83,6 +83,20 @@ const SelectedPluginActionBar: React.FC<SelectedPluginActionBarProps> = ({
         }, LOADING_ANIMATION_SEQUENCE_MS);
     }
 
+    const statusBarHeight: number = React.useMemo(() => {
+        const statusBar = document.querySelector('.status-bar') as HTMLElement;
+        if (statusBar) {
+            const computedStyle = window.getComputedStyle(statusBar);
+            return (
+                statusBar.offsetHeight +
+                parseInt(computedStyle.getPropertyValue('margin-top')) +
+                parseInt(computedStyle.getPropertyValue('margin-bottom'))
+            );
+        }
+        return 0;
+    }, []);
+    const actionButtonPaddingBottomPx = statusBarHeight + 3;
+
     return (
         <DivSelectedPluginActionBarContainer>
             <DivHeaderContainer>
@@ -99,7 +113,7 @@ const SelectedPluginActionBar: React.FC<SelectedPluginActionBarProps> = ({
                 )}
             </DivHeaderContainer>
 
-            <DivActionButtonContainer>
+            <DivActionButtonContainer paddingBottom={actionButtonPaddingBottomPx}>
                 <ButtonAction
                     onClick={() => handleActionClick(onClickInstall)}
                     disabled={disabled}
@@ -155,7 +169,7 @@ const H4HeaderText = styled.h4`
     margin: 0;
 `;
 
-const DivActionButtonContainer = styled.div`
+const DivActionButtonContainer = styled.div<{ paddingBottom: number }>`
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -167,6 +181,8 @@ const DivActionButtonContainer = styled.div`
     button:last-child {
         margin-right: 0;
     }
+
+    padding-bottom: ${(props) => `${props.paddingBottom}px`};
 `;
 
 const ButtonAction = styled.button<{ isDisabled: boolean }>`

diff --git a/src/components/UpdateStatusIcon.tsx b/src/components/UpdateStatusIcon.tsx
@@ -136,14 +136,15 @@ export const UpdateStatusIconView: React.FC<UpdateStatusIconViewProps> = ({
             isHighlighted={isHighlighted}
             className={`${CSS_CLASS_BASE} ${cssSelector}`}
         >
-            <FontAwesomeIcon icon={faPlug} />
+            <FontAwesomeIcon icon={faPlug} className={`${CSS_CLASS_BASE}-plug-icon`} />
             <DivPluginStatusChip
                 color={chipColour}
                 fontSize={fontSize}
                 width={width}
                 padding={padding}
                 leftOffset={leftOffset}
                 isHighlighted={isHighlighted}
+                className={`${CSS_CLASS_BASE}-chip`}
             >
                 {chipText}
             </DivPluginStatusChip>

diff --git a/versions.json b/versions.json
@@ -11,5 +11,6 @@
 	"1.4.0": "0.15.0",
 	"1.4.1": "0.15.0",
 	"1.4.2": "0.15.0",
-	"1.4.3": "0.15.0"
+	"1.4.3": "0.15.0",
+	"1.4.4": "0.15.0"
 }