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 (image +) + +- *.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" }