Remove ui.isEditing, enable forcing desktop window open without sidebar

This commit is contained in:
Tom Moor
2022-12-04 11:55:33 -05:00
parent cd29cd3aec
commit d16133fda8
4 changed files with 26 additions and 28 deletions

View File

@@ -26,9 +26,7 @@ type Props = {
function Header({ left, title, actions, hasSidebar }: Props) {
const { ui } = useStores();
const isMobile = useMobile();
const hasMobileSidebar = hasSidebar && isMobile;
const sidebarCollapsed = ui.isEditing || ui.sidebarCollapsed;
const passThrough = !actions && !left && !title;
@@ -57,7 +55,7 @@ function Header({ left, title, actions, hasSidebar }: Props) {
align="center"
shrink={false}
$passThrough={passThrough}
$insetTitleAdjust={sidebarCollapsed && Desktop.hasInsetTitlebar()}
$insetTitleAdjust={ui.sidebarIsClosed && Desktop.hasInsetTitlebar()}
>
{left || hasMobileSidebar ? (
<Breadcrumbs>

View File

@@ -25,7 +25,7 @@ const Layout: React.FC<Props> = ({
sidebarRight,
}) => {
const { ui } = useStores();
const sidebarCollapsed = !sidebar || ui.isEditing || ui.sidebarCollapsed;
const sidebarCollapsed = !sidebar || ui.sidebarIsClosed;
useKeyDown(".", (event) => {
if (isModKey(event)) {

View File

@@ -37,7 +37,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(
const { user } = auth;
const width = ui.sidebarWidth;
const collapsed = (ui.isEditing || ui.sidebarCollapsed) && !isMenuOpen;
const collapsed = ui.sidebarIsClosed && !isMenuOpen;
const maxWidth = theme.sidebarMaxWidth;
const minWidth = theme.sidebarMinWidth + 16; // padding
@@ -191,9 +191,9 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(
)}
<ResizeBorder
onMouseDown={handleMouseDown}
onDoubleClick={ui.sidebarCollapsed ? undefined : handleReset}
onDoubleClick={ui.sidebarIsClosed ? undefined : handleReset}
/>
{ui.sidebarCollapsed && !ui.isEditing && (
{ui.sidebarIsClosed && (
<Toggle
onClick={ui.toggleCollapsedSidebar}
direction={"right"}
@@ -201,14 +201,12 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(
/>
)}
</Container>
{!ui.isEditing && (
<Toggle
style={toggleStyle}
onClick={ui.toggleCollapsedSidebar}
direction={ui.sidebarCollapsed ? "right" : "left"}
aria-label={ui.sidebarCollapsed ? t("Expand") : t("Collapse")}
/>
)}
<Toggle
style={toggleStyle}
onClick={ui.toggleCollapsedSidebar}
direction={ui.sidebarIsClosed ? "right" : "left"}
aria-label={ui.sidebarIsClosed ? t("Expand") : t("Collapse")}
/>
</>
);
}

View File

@@ -6,6 +6,9 @@ import Storage from "~/utils/Storage";
const UI_STORE = "UI_STORE";
// Whether the window launched with sidebar force hidden
let sidebarHidden = window.location.search.includes("sidebarHidden=true");
export enum Theme {
Light = "light",
Dark = "dark",
@@ -45,9 +48,6 @@ class UiStore {
@observable
progressBarVisible = false;
@observable
isEditing = false;
@observable
tocVisible = false;
@@ -164,11 +164,13 @@ class UiStore {
@action
expandSidebar = () => {
sidebarHidden = false;
this.sidebarCollapsed = false;
};
@action
toggleCollapsedSidebar = () => {
sidebarHidden = false;
this.sidebarCollapsed = !this.sidebarCollapsed;
};
@@ -182,16 +184,6 @@ class UiStore {
this.tocVisible = false;
};
@action
enableEditMode = () => {
this.isEditing = true;
};
@action
disableEditMode = () => {
this.isEditing = false;
};
@action
enableProgressBar = () => {
this.progressBarVisible = true;
@@ -222,6 +214,16 @@ class UiStore {
this.mobileSidebarVisible = false;
};
/**
* Returns the current state of the sidebar taking into account user preference
* and whether the sidebar has been hidden as part of launching in a new
* desktop window.
*/
@computed
get sidebarIsClosed() {
return this.sidebarCollapsed || sidebarHidden;
}
@computed
get resolvedTheme(): Theme | SystemTheme {
if (this.theme === "system") {