Remove ui.isEditing, enable forcing desktop window open without sidebar
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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)) {
|
||||
|
||||
@@ -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")}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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") {
|
||||
|
||||
Reference in New Issue
Block a user