Skip to content

Commit

Permalink
Fix UI issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@perry-mitchell
perry-mitchell committed Jun 14, 2024
1 parent 96bb9ff commit 63000a1
Show file tree
Hide file tree
Showing 9 changed files with 134 additions and 24 deletions.
1 change: 0 additions & 1 deletion source/renderer/components/VaultEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,6 @@ export function VaultEditor(props: VaultEditorProps) {
attachmentsMaxSize={ATTACHMENTS_MAX_SIZE}
attachmentPreviews={attachmentPreviews}
icons
iconsPath="icons"
onAddAttachments={addAttachments}
onDeleteAttachment={deleteAttachment}
onDownloadAttachment={downloadAttachment}
Expand Down
2 changes: 1 addition & 1 deletion source/renderer/components/vault/EntriesList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export const EntriesList = ({ className }: EntriesListProps) => {
{entries.length === 0 && trashSelected && (
<NonIdealState title={t("vault-ui.entries-list.trash-empty")} icon="trash" />
)}
{entries.length === 0 && filters.term && !trashSelected && (
{entries.length === 0 && !filters.term && !trashSelected && (
<NonIdealState
title={t("vault-ui.entries-list.no-entries")}
description={t("vault-ui.entries-list.create-one-cta")}
Expand Down
3 changes: 1 addition & 2 deletions source/renderer/components/vault/Entry.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ const ContentWrapper = styled.div`
export function Entry({ entry, selected, onClick, innerRef, ...props }) {
const [contextMenuOpen, setContextMenuVisibility] = useState(false);
const { groups, onMoveEntryToGroup, onMoveEntryToTrash, trashID } = useGroups();
const { iconsEnabled, iconsPath, readOnly } = useContext(VaultContext);
const { iconsEnabled, readOnly } = useContext(VaultContext);
const mounted = useRef(false);

useEffect(() => {
Expand Down Expand Up @@ -206,7 +206,6 @@ export function Entry({ entry, selected, onClick, innerRef, ...props }) {
<ImageWrapper>
<SiteIcon
domain={iconsEnabled ? getEntryDomain(entry) : null}
iconPath={iconsPath}
type={entry.type || DEFAULT_ENTRY_TYPE}
/>
</ImageWrapper>
Expand Down
13 changes: 4 additions & 9 deletions source/renderer/components/vault/SiteIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React, { useEffect, useMemo, useRef, useState } from "react";
import styled from "styled-components";
import { DEFAULT_ENTRY_TYPE, EntryType } from "buttercup";
import path from "path-posix";
import ICON_LOGIN from "../../../../resources/images/login.png";
import ICON_WEBSITE from "../../../../resources/images/website.png";
import ICON_NOTE from "../../../../resources/images/note.png";
Expand Down Expand Up @@ -34,7 +33,7 @@ const IconContainer = styled.div`
`;

export function SiteIcon(props) {
const { className, domain = null, iconPath = null, type = DEFAULT_ENTRY_TYPE } = props;
const { className, domain = null, type = DEFAULT_ENTRY_TYPE } = props;
const imgRef = useRef<HTMLImageElement | null>(null);
const [dynamicState, setDynamicState] = useState(DYNAMIC_STATE_LOADING);
const onImgError = useMemo(
Expand Down Expand Up @@ -67,16 +66,12 @@ export function SiteIcon(props) {
}, [imgRef.current]);
return (
<IconContainer className={className}>
{dynamicState === DYNAMIC_STATE_LOADED || dynamicState === DYNAMIC_STATE_LOADING && (
{(dynamicState === DYNAMIC_STATE_LOADED || dynamicState === DYNAMIC_STATE_LOADING) && (
<img ref={imgRef} loading="lazy" />
)}
{dynamicState === DYNAMIC_STATE_FAILED || dynamicState === DYNAMIC_STATE_LOADING && (
{(dynamicState === DYNAMIC_STATE_FAILED || dynamicState === DYNAMIC_STATE_LOADING) && (
<FallbackIcon
src={
iconPath
? path.join(iconPath, path.basename(ICON_TYPES[type]))
: ICON_TYPES[type]
}
src={ICON_TYPES[type]}
dynamicLoading={dynamicState === DYNAMIC_STATE_LOADING}
/>
)}
Expand Down
4 changes: 0 additions & 4 deletions source/renderer/components/vault/VaultContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,6 @@ export interface VaultContextState {

// Icons
iconsEnabled: boolean;
iconsPath: string | null;

// Editing
readOnly: boolean;
Expand Down Expand Up @@ -68,7 +67,6 @@ export interface VaultProviderProps {
attachmentPreviews?: Record<string, string> | null,
children?: React.ReactNode;
icons?: boolean;
iconsPath?: string | null;
onAddAttachments: (entryID: EntryID, files: Array<File>) => Promise<void>;
onDeleteAttachment: (entryID: EntryID, attachmentID: string) => Promise<void>;
onDownloadAttachment: (entryID: EntryID, attachmentID: string) => Promise<void>;
Expand All @@ -93,7 +91,6 @@ export const VaultProvider = ({
attachmentsMaxSize = Infinity,
attachmentPreviews = null,
icons = false,
iconsPath = null,
onAddAttachments,
onDeleteAttachment,
onDownloadAttachment,
Expand Down Expand Up @@ -181,7 +178,6 @@ export const VaultProvider = ({

// Icons
iconsEnabled: icons,
iconsPath,

// Editing
readOnly,
Expand Down
5 changes: 2 additions & 3 deletions source/renderer/components/vault/VaultUI.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { EntriesList } from "./EntriesList";
import { EntryDetails } from "./EntryDetails";
import { GroupsList } from "./GroupsList";

// import "allotment/dist/style.css";
import "./styles/vault-ui.sass";

const GridWrapper = styled.div`
Expand All @@ -20,10 +19,10 @@ export const VaultUI = () => {
<Allotment.Pane>
<GroupsList />
</Allotment.Pane>
<Allotment.Pane>
<Allotment.Pane className="split-pane-entries">
<EntriesList />
</Allotment.Pane>
<Allotment.Pane>
<Allotment.Pane className="split-pane-entry-details">
<EntryDetails />
</Allotment.Pane>
</Allotment>
Expand Down
6 changes: 5 additions & 1 deletion source/renderer/components/vault/styles/vault-ui.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,13 @@ $bc-brand-colour-dark: #179E94
.bp4-input:focus, .bp4-input.bp4-active
box-shadow: inset 0 0 0 1px $bc-brand-colour, 0 0 0 2px rgba(45, 114, 210, 0.3), inset 0 1px 1px rgba(17, 20, 24, 0.2)


a
color: $bc-brand-colour-dark

&:hover
color: $bc-brand-colour

// Splitter
.split-pane-entries, .split-pane-entry-details
background-color: #252A31 //rgb(48, 64, 77);
7 changes: 4 additions & 3 deletions source/renderer/components/vault/utils/theme.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { pathOr } from "ramda";
import nestedProperty from "nested-property";
import { ExecutionContext } from "styled-components";

export function getThemeProp(props, propName) {
const res = pathOr(null, ["theme", "vault", ...propName.split("vault-ui..")], props);
export function getThemeProp(props: unknown, propName: string): string {
const res = nestedProperty.get(props, `theme.vault.${propName}`);
if (res === null) {
console.warn(`No theme value found for \`${propName}\`.`);
return "red";
Expand Down
117 changes: 117 additions & 0 deletions source/renderer/styles/themes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,45 @@ interface AppTheme {
color: string;
};
};
vault: {
list: {
focusedBackgroundColor: string;
selectedBackgroundColor: string;
selectedTextColor: string;
};
colors: {
divider: string;
paneDivider: string;
uiBackground: string;
mainPaneBackground: string;
};
tree: {
selectedBackgroundColor: string;
hoverBackgroundColor: string;
selectedTextColor: string;
selectedIconColor: string;
};
entry: {
primaryContainer: string;
separatorTextColor: string;
separatorBorder: string;
fieldHoverBorder: string;
};
attachment: {
dropBackground: string;
dropBorder: string;
dropText: string;
};
tab: {
background: string;
backgroundSelected: string;
barBackground: string;
border: string;
close: string;
closeBackgroundHover: string;
dropBorder: string;
};
};
vaultChooser: {
selectVaultAnchor: {
color: string;
Expand All @@ -40,6 +79,45 @@ export const THEME_DARK: AppTheme = {
color: Colors.LIGHT_GRAY2
}
},
vault: {
list: {
focusedBackgroundColor: Colors.DARK_GRAY5,
selectedBackgroundColor: Colors.TURQUOISE3,
selectedTextColor: "#fff"
},
colors: {
divider: Colors.DARK_GRAY5,
paneDivider: Colors.GRAY3,
uiBackground: Colors.DARK_GRAY2,
mainPaneBackground: Colors.DARK_GRAY3
},
tree: {
selectedBackgroundColor: Colors.DARK_GRAY5,
hoverBackgroundColor: "transparent",
selectedTextColor: Colors.LIGHT_GRAY5,
selectedIconColor: Colors.LIGHT_GRAY5
},
entry: {
primaryContainer: Colors.DARK_GRAY3,
separatorTextColor: Colors.GRAY3,
separatorBorder: Colors.GRAY1,
fieldHoverBorder: Colors.GRAY1
},
attachment: {
dropBackground: Colors.DARK_GRAY3,
dropBorder: Colors.DARK_GRAY5,
dropText: Colors.GRAY2
},
tab: {
background: Colors.DARK_GRAY2,
backgroundSelected: Colors.DARK_GRAY3,
barBackground: Colors.DARK_GRAY1,
border: Colors.GRAY1,
close: Colors.GRAY3,
closeBackgroundHover: Colors.DARK_GRAY5,
dropBorder: Colors.GRAY1
}
},
vaultChooser: {
selectVaultAnchor: {
color: Colors.GRAY2,
Expand All @@ -64,6 +142,45 @@ export const THEME_LIGHT: AppTheme = {
color: Colors.GRAY2
}
},
vault: {
list: {
focusedBackgroundColor: Colors.LIGHT_GRAY5,
selectedBackgroundColor: Colors.TURQUOISE3,
selectedTextColor: "#fff"
},
colors: {
divider: Colors.LIGHT_GRAY4,
paneDivider: Colors.GRAY3,
uiBackground: Colors.LIGHT_GRAY5,
mainPaneBackground: Colors.LIGHT_GRAY4
},
tree: {
selectedBackgroundColor: Colors.LIGHT_GRAY2,
hoverBackgroundColor: "transparent",
selectedTextColor: Colors.DARK_GRAY1,
selectedIconColor: Colors.DARK_GRAY5
},
entry: {
primaryContainer: Colors.LIGHT_GRAY4,
separatorTextColor: Colors.GRAY3,
separatorBorder: Colors.LIGHT_GRAY2,
fieldHoverBorder: Colors.LIGHT_GRAY1
},
attachment: {
dropBackground: Colors.LIGHT_GRAY5,
dropBorder: Colors.LIGHT_GRAY2,
dropText: Colors.GRAY4
},
tab: {
background: Colors.LIGHT_GRAY2,
backgroundSelected: Colors.LIGHT_GRAY3,
barBackground: Colors.LIGHT_GRAY4,
border: Colors.GRAY4,
close: Colors.GRAY1,
closeBackgroundHover: Colors.LIGHT_GRAY1,
dropBorder: Colors.GRAY5
}
},
vaultChooser: {
selectVaultAnchor: {
color: Colors.GRAY2,
Expand Down

0 comments on commit 63000a1

Please sign in to comment.