Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit24b26aa

Browse files
committed
Add channel joining UI,closes#37
1 parentf25594e commit24b26aa

File tree

20 files changed

+1131
-177
lines changed

20 files changed

+1131
-177
lines changed

‎assets/bindata.go‎

Lines changed: 145 additions & 145 deletions
Some generated files are not rendered by default. Learn more aboutcustomizing how changed files appear on GitHub.

‎client/css/style.css‎

Lines changed: 129 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -237,14 +237,18 @@ i[class*=' icon-']:before {
237237
top:0;
238238
bottom:50px;
239239
width:100%;
240-
overflow: auto;
240+
overflow-x: hidden;
241+
overflow-y: auto;
241242
}
242243

243244
.tablistp {
244245
height:30px;
245246
padding:3px15px;
246247
padding-right:10px;
247248
cursor: pointer;
249+
white-space: nowrap;
250+
overflow: hidden;
251+
text-overflow: ellipsis;
248252
}
249253

250254
.tablistp:last-child {
@@ -260,12 +264,6 @@ i[class*=' icon-']:before {
260264
border-left:5px solid#6bb758;
261265
}
262266

263-
.tab-content {
264-
white-space: nowrap;
265-
overflow: hidden;
266-
text-overflow: ellipsis;
267-
}
268-
269267
.tab-server {
270268
display: flex;
271269
align-items: center;
@@ -279,11 +277,29 @@ i[class*=' icon-']:before {
279277
}
280278

281279
.tab-label {
282-
margin-top:10px;
280+
margin:5px;
283281
margin-left:15px;
284-
margin-bottom:5px;
285282
font-size:12px;
286283
color:#999;
284+
display: flex;
285+
align-items: center;
286+
height:25px;
287+
}
288+
289+
.tab-labelspan {
290+
flex:1;
291+
}
292+
293+
.tab-labelbutton {
294+
width:24px;
295+
height:100%;
296+
font-size:20px;
297+
background: none;
298+
color:#999;
299+
}
300+
301+
.tab-labelbutton:hover {
302+
color:#ccc;
287303
}
288304

289305
.side-buttons {
@@ -859,11 +875,24 @@ input.message-input-nick.invalid {
859875
}
860876

861877
.suspense-fallback {
878+
position: absolute;
879+
top:0;
880+
left:0;
881+
right:0;
882+
bottom:0;
862883
display: flex;
863884
align-items: center;
864885
justify-content: center;
865886
font:70064px'Montserrat', sans-serif;
866-
height:100%;
887+
color:#ddd;
888+
}
889+
890+
.suspense-modal-fallback {
891+
position: fixed;
892+
right:15px;
893+
bottom:3px;
894+
z-index:1;
895+
font:70064px'Montserrat', sans-serif;
867896
color:#ddd;
868897
}
869898

@@ -874,6 +903,7 @@ input.message-input-nick.invalid {
874903
right:0;
875904
bottom:0;
876905
display: flex;
906+
flex-direction: row;
877907
align-items: center;
878908
justify-content: center;
879909
background:rgba(0,0,0,0.33);
@@ -890,7 +920,8 @@ input.message-input-nick.invalid {
890920
}
891921

892922
.modal {
893-
max-width:600px;
923+
width:600px;
924+
min-width:0;
894925
padding:15px;
895926
background:#f0f0f0;
896927
border:1px solid#ddd;
@@ -923,6 +954,82 @@ input.message-input-nick.invalid {
923954
margin-top:10px;
924955
}
925956

957+
.modal-channel {
958+
display: flex;
959+
flex-direction: column;
960+
height:calc(100vh-120px);
961+
padding:0;
962+
}
963+
964+
.modal-channelinput {
965+
flex:1;
966+
padding:15px;
967+
}
968+
969+
.modal-channel-button-join {
970+
margin:0!important;
971+
width:50px!important;
972+
height:24px;
973+
font-size:12px;
974+
}
975+
976+
.modal-channel-input-wrap {
977+
display: flex;
978+
}
979+
980+
.modal-channel-close {
981+
padding:15px;
982+
background:#fff;
983+
color:#999;
984+
cursor: pointer;
985+
}
986+
987+
.modal-channel-close:hover {
988+
color:#222;
989+
}
990+
991+
.modal-channel-result {
992+
margin:15px;
993+
text-align: left;
994+
}
995+
996+
.modal-channel-result-header {
997+
display: flex;
998+
align-items: center;
999+
}
1000+
1001+
.modal-channel-topic {
1002+
font-size:12px;
1003+
font-family: Roboto Mono, monospace;
1004+
color:#444;
1005+
}
1006+
1007+
.modal-channel-name {
1008+
margin-bottom:5px;
1009+
cursor: pointer;
1010+
}
1011+
1012+
.modal-channel-users {
1013+
font-size:16px;
1014+
color:#444;
1015+
margin:015px;
1016+
flex:1;
1017+
}
1018+
1019+
.modal-channel-usersi {
1020+
margin-right:3px;
1021+
}
1022+
1023+
.modal-channel-results {
1024+
flex:1;
1025+
overflow-y: auto;
1026+
overflow-x: hidden;
1027+
}
1028+
1029+
.modal-channel-button-more {
1030+
margin-bottom:15px!important;
1031+
}
1032+
9261033
@media (max-width:600px) {
9271034
.tablist {
9281035
width:200px;
@@ -992,4 +1099,15 @@ input.message-input-nick.invalid {
9921099
.button-install {
9931100
margin-left:50px;
9941101
}
1102+
1103+
.modal-channel {
1104+
margin:0;
1105+
width: auto;
1106+
height: auto;
1107+
position: fixed;
1108+
top:5px;
1109+
left:5px;
1110+
right:5px;
1111+
bottom:5px;
1112+
}
9951113
}

‎client/js/components/App.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const App = ({
1919
select,
2020
push,
2121
hideMenu,
22+
openModal,
2223
newVersionAvailable,
2324
hasOpenModals
2425
})=>{
@@ -59,10 +60,10 @@ const App = ({
5960
showTabList={showTabList}
6061
select={select}
6162
push={push}
63+
openModal={openModal}
6264
/>
6365
<divclassName={mainClass}>
6466
<Suspensefallback={<divclassName="suspense-fallback">...</div>}>
65-
{renderModals&&<Modals/>}
6667
<Routename="chat">
6768
<Chat/>
6869
</Route>
@@ -73,6 +74,11 @@ const App = ({
7374
<Settings/>
7475
</Route>
7576
</Suspense>
77+
<Suspense
78+
fallback={<divclassName="suspense-modal-fallback">...</div>}
79+
>
80+
{renderModals&&<Modals/>}
81+
</Suspense>
7682
</div>
7783
</div>
7884
</div>

‎client/js/components/TabList.js‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,14 @@ export default class TabList extends PureComponent {
1111
handleSettingsClick=()=>this.props.push('/settings');
1212

1313
render(){
14-
const{ tab, channels, servers, privateChats, showTabList}=this.props;
14+
const{
15+
tab,
16+
channels,
17+
servers,
18+
privateChats,
19+
showTabList,
20+
openModal
21+
}=this.props;
1522
consttabs=[];
1623

1724
constclassName=classnames('tablist',{
@@ -32,6 +39,17 @@ export default class TabList extends PureComponent {
3239
/>
3340
);
3441

42+
tabs.push(
43+
<div
44+
key={`${address}-chans}`}
45+
className="tab-label"
46+
onClick={()=>openModal('channel',{server:address})}
47+
>
48+
<span>CHANNELS ({server.channels.length})</span>
49+
<Button>+</Button>
50+
</div>
51+
);
52+
3553
server.channels.forEach(name=>
3654
tabs.push(
3755
<TabListItem
@@ -48,7 +66,8 @@ export default class TabList extends PureComponent {
4866
if(privateChats[address]&&privateChats[address].length>0){
4967
tabs.push(
5068
<divkey={`${address}-pm}`}className="tab-label">
51-
Private messages
69+
<span>DIRECT MESSAGES ({privateChats[address].length})</span>
70+
{/*<Button>+</Button>*/}
5271
</div>
5372
);
5473

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp