diff --git a/README.md b/README.md
index 34c0f5367..c3ef84c9a 100644
--- 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 (
+)
+
+- *.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
index f84e172f8..2647194eb 100644
--- 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
index d230c2e87..0f0d65cef 100644
--- a/src/components/SelectedPluginActionBar.tsx
+++ b/src/components/SelectedPluginActionBar.tsx
@@ -83,6 +83,20 @@ const SelectedPluginActionBar: React.FC = ({
}, 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 (
@@ -99,7 +113,7 @@ const SelectedPluginActionBar: React.FC = ({
)}
-
+
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
index a6d2f5d94..9a94aa515 100644
--- a/src/components/UpdateStatusIcon.tsx
+++ b/src/components/UpdateStatusIcon.tsx
@@ -136,7 +136,7 @@ export const UpdateStatusIconView: React.FC = ({
isHighlighted={isHighlighted}
className={`${CSS_CLASS_BASE} ${cssSelector}`}
>
-
+
= ({
padding={padding}
leftOffset={leftOffset}
isHighlighted={isHighlighted}
+ className={`${CSS_CLASS_BASE}-chip`}
>
{chipText}
diff --git a/versions.json b/versions.json
index e22ff4edb..d8b6b5b8c 100644
--- 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"
}