refine ui prototype and document planned view hierarchy
This commit is contained in:
Bruno Windels
parent
db376d3ac6
commit
c8910b55e0
2 changed files with 295 additions and 41 deletions
15
doc/viewhierarchy.md
Normal file
15
doc/viewhierarchy.md
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
view hierarchy:
|
||||||
|
```
|
||||||
|
BrawlView
|
||||||
|
SyncStatusBar
|
||||||
|
SwitchView
|
||||||
|
SessionView
|
||||||
|
ListView(left-panel)
|
||||||
|
SwitchView
|
||||||
|
RoomPlaceholderView
|
||||||
|
RoomView
|
||||||
|
MiddlePanel
|
||||||
|
ListView(timeline)
|
||||||
|
ComposerView
|
||||||
|
RightPanel
|
||||||
|
```
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
Reference in a new issue