thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Style conversation menu

Browse source
This commit is contained in:
lilia 2015-01-26 10:37:13 -10:00
parent ed13d47125
commit b13e36a11c
4 changed files with 72 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
conversation.html
View file

@ -15,14 +15,19 @@
<div id='file-modal'></div> <div id='file-modal'></div>
<script type='text/x-tmpl-mustache' id='conversation'> <script type='text/x-tmpl-mustache' id='conversation'>
<div class='title-bar' id='header'> <div class='title-bar' id='header'>
<div class='menu'>
<button class='hamburger'></button>
<ul class='menu-list'>
{{#group}} {{#group}}
<button class='new-group-update'>Update group</button> <li><a class='new-group-update'>Update group</a></li>
<button class='leave-group'>Leave group</button> <li><a class='leave-group'>Leave group</a></li>
{{/group}} {{/group}}
{{^group}} {{^group}}
<button class='end-session'>End Session</button> <li><a class='end-session'>End Session</a></li>
{{/group}} {{/group}}
<button class='destroy'>Delete this conversation</button> <li><a class='destroy'>Delete messages</a></li>
</ul>
</div>
</div> </div>
<div class='discussion-container'></div> <div class='discussion-container'></div>

7
js/views/conversation_view.js
View file

@ -50,7 +50,12 @@
'click .destroy': 'destroyMessages', 'click .destroy': 'destroyMessages',
'click .new-group-update': 'newGroupUpdate', 'click .new-group-update': 'newGroupUpdate',
'click .settings-btn': 'toggleSettings', 'click .settings-btn': 'toggleSettings',
'click .go-back': 'toggleSettings' 'click .go-back': 'toggleSettings',
'click .hamburger': 'toggleMenu'
},
toggleMenu: function() {
this.$el.find('.menu-list').toggle();
}, },
newGroupUpdate: function() { newGroupUpdate: function() {

23
stylesheets/manifest.css
View file

@ -134,6 +134,29 @@ body {
outline: 0; outline: 0;
color: white; } color: white; }
.menu {
position: relative;
float: left;
height: 36px;
line-height: 36px;
padding-left: 8px; }
.menu .hamburger {
width: 36px;
background: url("/images/menu.png") no-repeat center; }
.menu .menu-list {
display: none;
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
border: solid 1px #2a92e7; }
.menu .menu-list li {
display: block;
cursor: pointer;
white-space: nowrap;
padding: 5px; }
button { button {
cursor: pointer; } cursor: pointer; }

30
stylesheets/view/_conversation.scss
View file

@ -30,6 +30,36 @@ body {
outline: 0; outline: 0;
color: white; color: white;
} }
}
.menu {
position: relative;
float: left;
height: 36px;
line-height: 36px;
padding-left: 8px;
.hamburger {
width: 36px;
background: url('/images/menu.png') no-repeat center;
}
.menu-list {
display: none;
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
border: solid 1px $blue;
li {
display: block;
cursor: pointer;
white-space: nowrap;
padding: 5px;
}
}
} }