Page MenuHomePhabricator
Files F3392814

D6164.id21148.diff
No OneTemporary
Actions

D6164.id21148.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,40 @@
.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;
+ width: 400px;
}
.spacer {
flex-grow: 1;
}
-.container button {
- color: var(--fg);
-}
-
-.container svg {
- color: var(--fg);
- padding: 0;
-}
-
.activeContainer {
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: 12px;
+ height: 40px;
+ align-items: center;
+}
+
+.inactiveContainer {
+ display: flex;
+ padding-left: 20px;
+ height: 40px;
+ align-items: center;
+}
+
+.inactiveContainer svg,
+.activeContainer svg {
+ color: var(--fg);
+ padding: 0;
}
.settingsIcon {
@@ -40,3 +46,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
@@ -54,7 +54,7 @@
div.layout {
height: 100vh;
display: grid;
- grid-template-columns: 244px repeat(12, 1fr);
+ grid-template-columns: 560px repeat(12, 1fr);
grid-template-rows: 65px calc(100vh - 65px);
grid-template-areas:
'nav nav nav nav nav nav nav nav nav nav nav nav nav'

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 1, 10:08 AM (16 h, 30 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2604695
Default Alt Text
D6164.id21148.diff (3 KB)

Event Timeline