refine ui prototype and document planned view hierarchy

This commit is contained in:
Bruno Windels 2019-06-15 01:36:52 +02:00
parent db376d3ac6
commit c8910b55e0
2 changed files with 295 additions and 41 deletions

15
doc/viewhierarchy.md Normal file
View File

@ -0,0 +1,15 @@
view hierarchy:
```
BrawlView
SyncStatusBar
SwitchView
SessionView
ListView(left-panel)
SwitchView
RoomPlaceholderView
RoomView
MiddlePanel
ListView(timeline)
ComposerView
RightPanel
```

View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no"> <meta name="viewport" content="width=device-width, user-scalable=no">
<meta name="application-name" content="Talk to Bruno"/> <meta name="application-name" content="Brawl Chat"/>
<meta name="msapplication-navbutton-color" content="red"/> <meta name="msapplication-navbutton-color" content="red"/>
<style type="text/css"> <style type="text/css">
html { html {
@ -17,6 +17,12 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
font-family: sans-serif; font-family: sans-serif;
background-color: black;
color: white;
}
.syncbar {
background-color: grey;
} }
.log { .log {
@ -48,7 +54,7 @@
.left-panel { .left-panel {
flex: 1; flex: 1;
background: red; background: #333;
color: white; color: white;
overflow-y: auto; overflow-y: auto;
} }
@ -62,11 +68,18 @@
.left-panel li { .left-panel li {
margin: 5px; margin: 5px;
padding: 10px; padding: 10px;
background: darkred;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.left-panel li {
border-bottom: 1px #555 solid;
}
.left-panel li:last-child {
border-bottom: none;
}
.left-panel li > * { .left-panel li > * {
margin-right: 10px; margin-right: 10px;
} }
@ -89,8 +102,6 @@
.room-panel-placeholder, .room-panel { .room-panel-placeholder, .room-panel {
flex: 3; flex: 3;
color: white;
background: black;
} }
.room-panel { .room-panel {
@ -194,11 +205,69 @@
} }
.timeline-panel li { .timeline-panel li {
background: blue;
padding: 10px;
margin: 10px;
} }
.message {
display: flex;
min-width: 0;
}
.message.own .message-container {
margin-left: auto;
}
.message-container {
flex: 0 1 auto;
max-width: 80%;
padding: 5px 10px;
margin: 5px 10px;
background: blue;
}
.message-container .sender {
margin: 5px 0;
font-size: 0.9em;
font-weight: bold;
}
.text-message .message-container time {
float: right;
padding: 2px 0 0px 20px;
font-size: 0.9em;
color: lightblue;
}
.image-message .message-container time {
display: block;
text-align: right;
}
.image-message img {
width: 100%;
}
.message-container time {
font-size: 0.9em;
color: lightblue;
}
.own time {
color: lightgreen;
}
.own .message-container {
background-color: darkgreen;
}
.message-container p {
margin: 5px 0;
}
.timeline-panel .text-message.own {
}
.composer { .composer {
display: flex; display: flex;
} }
@ -218,6 +287,10 @@
border-radius: 100px; border-radius: 100px;
overflow: hidden; overflow: hidden;
flex-shrink: 0; flex-shrink: 0;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
line-height: var(--avatar-size); line-height: var(--avatar-size);
font-size: calc(var(--avatar-size) * 0.6); font-size: calc(var(--avatar-size) * 0.6);
text-align: center; text-align: center;
@ -237,7 +310,7 @@
</style> </style>
</head> </head>
<body> <body>
<ul class="log"></ul> <div class="syncbar"><button>Stop syncing</button></div>
<div class="container"> <div class="container">
<div class="left-panel"> <div class="left-panel">
<ul> <ul>
@ -356,38 +429,204 @@
<button class="more"></button> <button class="more"></button>
</div> </div>
<ul> <ul>
<li>Message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1</li> <li class="message text-message own">
<li>Message 2, message 2, message 2, message 2, message 2, message 2, message 2, message 2</li> <div class="message-container">
<li>Message 3, message 3, message 3, message 3, message 3, message 3, message 3, message 3</li> <div class="sender">@bruno:localhost</div>
<li>Message 4, message 4, message 4, message 4, message 4, message 4, message 4, message 4</li> <p>Message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1<time>15:24</time></p>
<li>Message 5, message 5, message 5, message 5, message 5, message 5, message 5, message 5</li> </div>
<li>Message 6, message 6, message 6, message 6, message 6, message 6, message 6, message 6</li> </li>
<li>Message 7, message 7, message 7, message 7, message 7, message 7, message 7, message 7</li> <li class="message text-message not-own">
<li>Message 8, message 8, message 8, message 8, message 8, message 8, message 8, message 8</li> <div class="message-container">
<li>Message 9, message 9, message 9, message 9, message 9, message 9, message 9, message 9</li> <div class="sender">@bruno2:localhost</div>
<li>Message 10, message 10, message 10, message 10, message 10, message 10, message 10, message 10</li> <p>Sounds about right<time>15:25</time></p>
<li>Message 11, message 11, message 11, message 11, message 11, message 11, message 11, message 11</li> </div>
<li>Message 12, message 12, message 12, message 12, message 12, message 12, message 12, message 12</li> </li>
<li>Message 12, message 12, message 12, message 12, message 12, message 12, message 12, message 12</li> <li class="message text-message not-own">
<li>Message 12, message 12, message 12, message 12, message 12, message 12, message 12, message 12</li> <div class="message-container">
<li>Message 12, message 12, message 12, message 12, message 12, message 12, message 12, message 12</li> <p>You wee prick!<time>15:25</time></p>
<li>Message 12, message 12, message 12, message 12, message 12, message 12, message 12, message 12</li> </div>
<li>Message 12, message 12, message 12, message 12, message 12, message 12, message 12, message 12</li> </li>
<li>Message 12, message 12, message 12, message 12, message 12, message 12, message 12, message 12</li> <li class="message text-message own">
<li>Message 12, message 12, message 12, message 12, message 12, message 12, message 12, message 12</li> <div class="message-container">
<li>Message 12, message 12, message 12, message 12, message 12, message 12, message 12, message 12</li> <div class="sender">@bruno:localhost</div>
<li>Message 12, message 12, message 12, message 12, message 12, message 12, message 12, message 12</li> <p>Oh, don't get me started!!<time>15:26</time></p>
<li>Message 12, message 12, message 12, message 12, message 12, message 12, message 12, message 12</li>
<li>Message 12, message 12, message 12, message 12, message 12, message 12, message 12, message 12</li> </div>
<li>Message 12, message 12, message 12, message 12, message 12, message 12, message 12, message 12</li> </li>
<li>Message 12, message 12, message 12, message 12, message 12, message 12, message 12, message 12</li> <li class="message text-message own">
<li>Message 12, message 12, message 12, message 12, message 12, message 12, message 12, message 12</li> <div class="message-container">
<li>Message 12, message 12, message 12, message 12, message 12, message 12, message 12, message 12</li> <div class="sender">@bruno:localhost</div>
<li>Message 12, message 12, message 12, message 12, message 12, message 12, message 12, message 12</li> <p>Message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1<time>15:24</time></p>
<li>Message 12, message 12, message 12, message 12, message 12, message 12, message 12, message 12</li>
<li>Message 12, message 12, message 12, message 12, message 12, message 12, message 12, message 12</li> </div>
<li>Message 12, message 12, message 12, message 12, message 12, message 12, message 12, message 12</li> </li>
<li>Message 12, message 12, message 12, message 12, message 12, message 12, message 12, message 12</li> <li class="message text-message not-own">
<div class="message-container">
<div class="sender">@bruno2:localhost</div>
<p>Sounds about right<time>15:25</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<p>You wee prick!<time>15:25</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Oh, don't get me started!!<time>15:26</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1<time>15:24</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<div class="sender">@bruno2:localhost</div>
<p>Sounds about right<time>15:25</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<p>You wee prick!<time>15:25</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Oh, don't get me started!!<time>15:26</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1<time>15:24</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<div class="sender">@bruno2:localhost</div>
<p>Sounds about right<time>15:25</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<p>You wee prick!<time>15:25</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Oh, don't get me started!!<time>15:26</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1<time>15:24</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<div class="sender">@bruno2:localhost</div>
<p>Sounds about right<time>15:25</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<p>You wee prick!<time>15:25</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Oh, don't get me started!!<time>15:26</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1<time>15:24</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<div class="sender">@bruno2:localhost</div>
<p>Sounds about right<time>15:25</time></p>
</div>
</li>
<li class="message image-message not-own">
<div class="message-container">
<p><img src="me.jpg" alt="Avatar for some room"/><time>15:25</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Oh, don't get me started!!<time>15:26</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1<time>15:24</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<div class="sender">@bruno2:localhost</div>
<p>Sounds about right<time>15:25</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<p>You wee prick!<time>15:25</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Oh, don't get me started!!<time>15:26</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1<time>15:24</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<div class="sender">@bruno2:localhost</div>
<p>Sounds about right<time>15:25</time></p>
</div>
</li>
<li class="message text-message not-own">
<div class="message-container">
<p>You wee prick!<time>15:25</time></p>
</div>
</li>
<li class="message text-message own">
<div class="message-container">
<div class="sender">@bruno:localhost</div>
<p>Oh, don't get me started!!<time>15:26</time></p>
</div>
</li>
</ul> </ul>
<div class="composer"><input type="text" placeholder="Send a message" /></div> <div class="composer"><input type="text" placeholder="Send a message" /></div>
</div> </div>