Page MenuHomePhorge
Files F33266276

D6164.1768621727.diff
No OneTemporary
Actions

Size
3 KB
Referenced Files
None
Subscribers
None

D6164.1768621727.diff
View Options

diff --git a/web/sidebar/community-picker.css b/web/sidebar/community-picker.css
--- a/web/sidebar/community-picker.css
+++ b/web/sidebar/community-picker.css
@@ -1,34 +1,43 @@
.container {
display: flex;
flex-direction: column;
- align-items: center;
- width: 84px;
background: var(--community-bg);
padding: 24px 0 32px 0;
border-right: 1px solid var(--border-color);
flex-grow: 1;
+ overflow: auto;
}
.spacer {
flex-grow: 1;
}
-.container button {
- color: var(--fg);
+.activeContainer {
+ display: flex;
+ width: 100%;
+ box-sizing: border-box;
+ border-left: 8px solid var(--community-settings-selected);
+ border-right: 8px solid transparent;
+ padding-left: 12px;
+ height: 40px;
+ align-items: center;
}
-.container svg {
+.activeContainer svg {
color: var(--fg);
padding: 0;
}
-.activeContainer {
+.inactiveContainer {
display: flex;
- justify-content: center;
- width: 100%;
- box-sizing: border-box;
- border-left: 8px solid var(--community-settings-selected);
- border-right: 8px solid transparent;
+ padding-left: 20px;
+ height: 40px;
+ align-items: center;
+}
+
+.inactiveContainer svg {
+ color: var(--fg);
+ padding: 0;
}
.settingsIcon {
@@ -40,3 +49,8 @@
height: 30px;
border-radius: 50%;
}
+
+.drawerWrapper {
+ align-self: flex-start;
+ width: 100%;
+}
diff --git a/web/sidebar/community-picker.react.js b/web/sidebar/community-picker.react.js
--- a/web/sidebar/community-picker.react.js
+++ b/web/sidebar/community-picker.react.js
@@ -7,6 +7,7 @@
import { updateNavInfoActionType } from '../redux/action-types.js';
import { useSelector } from '../redux/redux-utils.js';
import SWMansionIcon from '../SWMansionIcon.react';
+import CommunityDrawer from './community-drawer.react';
import css from './community-picker.css';
function CommunityPicker(): React.Node {
@@ -25,6 +26,7 @@
const isSettingsOpen = useSelector(state => state.navInfo.tab === 'settings');
const settingsButtonContainerClass = classNames({
[css.activeContainer]: isSettingsOpen,
+ [css.inactiveContainer]: !isSettingsOpen,
});
const openChat = React.useCallback(
@@ -45,6 +47,7 @@
);
const inboxButtonContainerClass = classNames({
[css.activeContainer]: isInboxOpen,
+ [css.inactiveContainer]: !isInboxOpen,
});
return (
@@ -52,6 +55,9 @@
<a className={inboxButtonContainerClass} onClick={openChat}>
<SWMansionIcon icon="inbox" size={36} />
</a>
+ <div className={css.drawerWrapper}>
+ <CommunityDrawer />
+ </div>
<div className={css.spacer} />
<div className={settingsButtonContainerClass}>
<a className={css.settingsIcon} onClick={openAccountSettings}>
diff --git a/web/sidebar/left-layout-aside.css b/web/sidebar/left-layout-aside.css
--- a/web/sidebar/left-layout-aside.css
+++ b/web/sidebar/left-layout-aside.css
@@ -3,6 +3,7 @@
background: var(--bg);
border-right: 1px solid var(--border-color);
display: flex;
+ width: 560px;
}
.navigationPanelContainer {
diff --git a/web/style.css b/web/style.css
--- a/web/style.css
+++ b/web/style.css
@@ -58,7 +58,7 @@
grid-template-rows: 65px calc(100vh - 65px);
grid-template-areas:
'nav nav nav nav nav nav nav nav nav nav nav nav nav'
- 'sBar app app app app app app app app app app app app';
+ 'sBar sBar app app app app app app app app app app app';
}
header.header {

File Metadata

Mime Type
text/plain
Expires
Sat, Jan 17, 3:48 AM (21 h, 35 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5947085
Default Alt Text
D6164.1768621727.diff (3 KB)

Event Timeline