chris/website-gemompel
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Implement vertical toolbar

Browse source
This commit is contained in:
Jonas Herzig 2018-09-23 15:38:11 +02:00
parent 5eefeeb721
commit 1f82d981a3
3 changed files with 160 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

17
app/index.html
View file

@ -19,7 +19,8 @@
<div class="loading-container" data-bind="css: { loaded: true }">
<div class="loading-circle" data-bind="css: { loaded: true }"></div>
</div>
<div id="container" style="display: none" data-bind="visible: true">
<div id="container" style="display: none" data-bind="visible: true,
css: { minimal: minimalView }">
<!-- ko with: connectDialog -->
<div class="connect-dialog dialog" data-bind="visible: visible() && !joinOnly()">
<div class="dialog-header">
@ -171,9 +172,12 @@
<script type="text/html" id="channel-tag">
<span class="channel-tag" data-bind="text: name"></span>
</script>
<div class="toolbar">
<img class="handle-horizontal" src="/svg/handle_horizontal.svg">
<img class="handle-vertical" src="/svg/handle_horizontal.svg">
<div class="toolbar" data-bind="css: { 'toolbar-horizontal': toolbarHorizontal(),
'toolbar-vertical': !toolbarHorizontal() }">
<img class="handle-horizontal" src="/svg/handle_horizontal.svg"
data-bind="click: toggleToolbarOrientation">
<img class="handle-vertical" src="/svg/handle_vertical.svg"
data-bind="click: toggleToolbarOrientation">
<img class="tb-connect" data-bind="visible: !connectDialog.joinOnly(),
click: connectDialog.show"
rel="connect" src="/svg/applications-internet.svg">
@ -326,9 +330,12 @@
<!-- /ko -->
<!-- /ko -->
</script>
<div class="channel-root-container" data-bind="if: root">
<div class="channel-root-container" data-bind="if: root, visible: !minimalView()">
<div class="channel-root" data-bind="template: {name: 'channel', data: root}"></div>
</div>
<div class="channel-root-container" data-bind="if: thisUser, visible: minimalView()">
<div class="channel-root" data-bind="template: {name: 'channel', data: thisUser().channel}"></div>
</div>
</div>
</body>
<link rel="stylesheet" type="text/css" href="/main.css">

22
app/index.js
View file

@ -132,6 +132,7 @@ class Settings {
this.voiceMode = load('voiceMode') || 'vad'
this.pttKey = load('pttKey') || 'ctrl + shift'
this.vadLevel = load('vadLevel') || 0.3
this.toolbarVertical = load('toolbarVertical') || false
}
save () {
@ -139,6 +140,7 @@ class Settings {
save('voiceMode', this.voiceMode)
save('pttKey', this.pttKey)
save('vadLevel', this.vadLevel)
save('toolbarVertical', this.toolbarVertical)
}
}
@ -151,10 +153,12 @@ class GlobalBindings {
this.connectionInfo = new ConnectionInfo()
this.commentDialog = new CommentDialog()
this.settingsDialog = ko.observable()
this.minimalView = ko.observable(false)
this.log = ko.observableArray()
this.thisUser = ko.observable()
this.root = ko.observable()
this.messageBox = ko.observable('')
this.toolbarHorizontal = ko.observable(!this.settings.toolbarVertical)
this.selected = ko.observable()
this.selfMute = ko.observable()
this.selfDeaf = ko.observable()
@ -165,6 +169,12 @@ class GlobalBindings {
}
})
this.toggleToolbarOrientation = () => {
this.toolbarHorizontal(!this.toolbarHorizontal())
this.settings.toolbarVertical = !this.toolbarHorizontal()
this.settings.save()
}
this.select = element => {
this.selected(element)
}
@ -591,6 +601,15 @@ class GlobalBindings {
var homepage = require('../package.json').homepage
window.open(homepage, '_blank').focus()
}
this.updateSize = () => {
this.minimalView(window.innerWidth < 320)
if (this.minimalView()) {
this.toolbarHorizontal(window.innerWidth < window.innerHeight)
} else {
this.toolbarHorizontal(!this.settings.toolbarVertical)
}
}
}
}
var ui = new GlobalBindings()
@ -626,6 +645,9 @@ window.onload = function () {
ko.applyBindings(ui)
}
window.onresize = () => ui.updateSize()
ui.updateSize()
function log () {
console.log.apply(console, arguments)
var args = []