mirror of
https://git.sr.ht/~emersion/gamja
synced 2024-11-14 19:25:26 -05:00
Implement togglable sidebars for narrow viewports
Closed: https://l.sr.ht/96AD.jpg Open: https://l.sr.ht/gr_9.jpg
This commit is contained in:
Drew DeVault
Simon Ser
parent
d612c91016
commit
64900fbe80
2 changed files with 178 additions and 19 deletions
|
|
@ -166,6 +166,10 @@ export default class App extends Component {
|
|||
activeBuffer: null,
|
||||
dialog: null,
|
||||
error: null,
|
||||
openPanels: {
|
||||
bufferList: false,
|
||||
memberList: false,
|
||||
},
|
||||
};
|
||||
clients = new Map();
|
||||
endOfHistory = new Map();
|
||||
|
|
@ -182,6 +186,8 @@ export default class App extends Component {
|
|||
this.handleConnectSubmit = this.handleConnectSubmit.bind(this);
|
||||
this.handleJoinSubmit = this.handleJoinSubmit.bind(this);
|
||||
this.handleBufferListClick = this.handleBufferListClick.bind(this);
|
||||
this.toggleBufferList = this.toggleBufferList.bind(this);
|
||||
this.toggleMemberList = this.toggleMemberList.bind(this);
|
||||
this.handleComposerSubmit = this.handleComposerSubmit.bind(this);
|
||||
this.handleNickClick = this.handleNickClick.bind(this);
|
||||
this.autocomplete = this.autocomplete.bind(this);
|
||||
|
|
@ -1028,6 +1034,47 @@ export default class App extends Component {
|
|||
|
||||
handleBufferListClick(id) {
|
||||
this.switchBuffer(id);
|
||||
this.closeBufferList();
|
||||
}
|
||||
|
||||
toggleBufferList() {
|
||||
this.setState((state) => {
|
||||
var openPanels = {
|
||||
...state.openPanels,
|
||||
bufferList: !state.openPanels.bufferList,
|
||||
};
|
||||
return { openPanels };
|
||||
});
|
||||
}
|
||||
|
||||
toggleMemberList() {
|
||||
this.setState((state) => {
|
||||
var openPanels = {
|
||||
...state.openPanels,
|
||||
memberList: !state.openPanels.memberList,
|
||||
};
|
||||
return { openPanels };
|
||||
});
|
||||
}
|
||||
|
||||
closeBufferList() {
|
||||
this.setState((state) => {
|
||||
var openPanels = {
|
||||
...state.openPanels,
|
||||
bufferList: false,
|
||||
};
|
||||
return { openPanels };
|
||||
});
|
||||
}
|
||||
|
||||
closeMemberList() {
|
||||
this.setState((state) => {
|
||||
var openPanels = {
|
||||
...state.openPanels,
|
||||
memberList: false,
|
||||
};
|
||||
return { openPanels };
|
||||
});
|
||||
}
|
||||
|
||||
handleJoinClick(netID) {
|
||||
|
|
@ -1218,14 +1265,26 @@ export default class App extends Component {
|
|||
var memberList = null;
|
||||
if (activeBuffer && activeBuffer.type == BufferType.CHANNEL) {
|
||||
memberList = html`
|
||||
<section id="member-list-header">
|
||||
${activeBuffer.members.size} users
|
||||
</section>
|
||||
<section id="member-list">
|
||||
<${MemberList}
|
||||
members=${activeBuffer.members}
|
||||
onNickClick=${this.handleNickClick}
|
||||
/>
|
||||
<section
|
||||
id="member-list"
|
||||
class=${this.state.openPanels.memberList ? "expand" : ""}
|
||||
>
|
||||
<button
|
||||
class="expander"
|
||||
onClick=${this.toggleMemberList}
|
||||
>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
<section>
|
||||
<section id="member-list-header">
|
||||
${activeBuffer.members.size} users
|
||||
</section>
|
||||
<${MemberList}
|
||||
members=${activeBuffer.members}
|
||||
onNickClick=${this.handleNickClick}
|
||||
/>
|
||||
</section>
|
||||
</section>
|
||||
`;
|
||||
}
|
||||
|
|
@ -1272,7 +1331,10 @@ export default class App extends Component {
|
|||
}
|
||||
|
||||
return html`
|
||||
<section id="buffer-list">
|
||||
<section
|
||||
id="buffer-list"
|
||||
class=${this.state.openPanels.bufferList ? "expand" : ""}
|
||||
>
|
||||
<${BufferList}
|
||||
buffers=${this.state.buffers}
|
||||
networks=${this.state.networks}
|
||||
|
|
@ -1281,6 +1343,13 @@ export default class App extends Component {
|
|||
activeBuffer=${this.state.activeBuffer}
|
||||
onBufferClick=${this.handleBufferListClick}
|
||||
/>
|
||||
<button
|
||||
class="expander"
|
||||
onClick=${this.toggleBufferList}
|
||||
>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
</section>
|
||||
${bufferHeader}
|
||||
<${ScrollManager}
|
||||
|
|
|
|||
110
style.css
110
style.css
|
|
@ -2,6 +2,9 @@
|
|||
--main-background: white;
|
||||
--main-color: black;
|
||||
--sidebar-background: #e3e3e3;
|
||||
--expander-background: #b5b5b5;
|
||||
--expander-background-hover: #a6a6a6;
|
||||
--expander-border: #6c6c6c;
|
||||
--green: green;
|
||||
|
||||
--gray: #4a4a4a;
|
||||
|
|
@ -12,6 +15,8 @@
|
|||
--main-background: #212529;
|
||||
--main-color: #f8f9fa;
|
||||
--sidebar-background: #131618;
|
||||
--expander-background: #424446;
|
||||
--expander-background-hover: #2a2d2f;
|
||||
--green: #53b266;
|
||||
|
||||
--red: #fb615b;
|
||||
|
|
@ -32,7 +37,7 @@ body {
|
|||
font-family: monospace;
|
||||
}
|
||||
|
||||
#buffer-list, #buffer, #connect, #member-list {
|
||||
#buffer, #connect {
|
||||
color: var(--main-color);
|
||||
background: var(--main-background);
|
||||
width: 100%;
|
||||
|
|
@ -41,13 +46,43 @@ body {
|
|||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#buffer-list {
|
||||
#buffer-list, #member-list {
|
||||
color: var(--main-color);
|
||||
background: var(--main-background);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background-color: var(--sidebar-background);
|
||||
grid-column: 1;
|
||||
grid-row: 1 / 4;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.expander {
|
||||
visibility: collapse;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: var(--expander-background);
|
||||
transition: background 0.25s linear;
|
||||
border: none;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.expander:hover {
|
||||
background: var(--expander-background-hover);
|
||||
}
|
||||
|
||||
.expander span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
margin-bottom: 2px;
|
||||
border-style: solid;
|
||||
border-width: 1px 0;
|
||||
border-color: var(--expander-border);
|
||||
}
|
||||
|
||||
#buffer-list ul {
|
||||
|
|
@ -55,6 +90,8 @@ body {
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
flex: 1 0 auto;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#buffer-list li a {
|
||||
display: inline-block;
|
||||
|
|
@ -108,21 +145,46 @@ body {
|
|||
grid-column: 2;
|
||||
}
|
||||
|
||||
#member-list-header {
|
||||
grid-row: 1;
|
||||
#member-list {
|
||||
grid-row: 1 / 4;
|
||||
grid-column: 3;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#member-list > section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#member-list-header {
|
||||
border-left: 1px solid var(--sidebar-background);
|
||||
}
|
||||
#member-list {
|
||||
grid-row: 2;
|
||||
grid-column: 3;
|
||||
border-left: 1px solid var(--sidebar-background);
|
||||
|
||||
@media(max-width: 640px) {
|
||||
#buffer-list ul {
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
#buffer-list.expand {
|
||||
z-index: 999;
|
||||
grid-column: 1 / 4;
|
||||
}
|
||||
|
||||
#buffer-list.expand ul {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#member-list ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex-grow: 1;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
#member-list li a {
|
||||
display: inline-block;
|
||||
|
|
@ -135,7 +197,7 @@ body {
|
|||
color: var(--main-color);
|
||||
background: var(--main-background);
|
||||
grid-row: 3;
|
||||
grid-column: 2 / 4;
|
||||
grid-column: 2 / 3;
|
||||
border-top: 1px solid var(--sidebar-background);
|
||||
}
|
||||
#composer input {
|
||||
|
|
@ -471,3 +533,31 @@ kbd {
|
|||
box-shadow: inset 0 -1px 0 var(--outline-color);
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 640px) {
|
||||
.expander {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#buffer-list ul, #member-list > section {
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
#buffer-list.expand, #member-list.expand {
|
||||
z-index: 999;
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 4;
|
||||
}
|
||||
|
||||
#buffer-list.expand ul {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#member-list.expand > section {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#member-list-header {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue