mirror of
https://github.com/netzbegruenung/mumble-web.git
synced 2024-04-28 09:54:52 +02:00
Implement vertical toolbar
This commit is contained in:
Jonas Herzig
parent
5eefeeb721
commit
1f82d981a3
|
|
@ -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
22
app/index.js
|
|
@ -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 = []
|
||||
|
|
|
|||
|
|
@ -5,13 +5,7 @@ html, body {
|
|||
height: 100%
|
||||
}
|
||||
#container {
|
||||
height: 98%;
|
||||
margin: 0 1% 0 1%;
|
||||
}
|
||||
#container::before {
|
||||
display: block;
|
||||
content: "";
|
||||
height: 1%;
|
||||
height: 100%;
|
||||
}
|
||||
.channel-root-container {
|
||||
text-size: 16px;
|
||||
|
|
@ -19,17 +13,35 @@ html, body {
|
|||
background-color: white;
|
||||
border: 1px solid lightgray;
|
||||
float: left;
|
||||
width: calc(60% - 6px);
|
||||
height: calc(100% - 38px);
|
||||
border-radius: 3px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.toolbar-horizontal ~ .channel-root-container {
|
||||
margin-top: 2px;
|
||||
width: calc(59% - 6px);
|
||||
height: calc(98% - 38px);
|
||||
}
|
||||
.toolbar-vertical ~ .channel-root-container {
|
||||
margin-top: 1%;
|
||||
width: calc(59% - 6px);
|
||||
height: calc(98% - 6px);
|
||||
}
|
||||
.chat {
|
||||
margin-right: 2px;
|
||||
float: left;
|
||||
width: 40%;
|
||||
height: calc(100% - 38px);
|
||||
}
|
||||
.toolbar-horizontal ~ .chat {
|
||||
margin-top: 2px;
|
||||
margin-left: 1%;
|
||||
width: 39%;
|
||||
height: calc(98% - 38px);
|
||||
}
|
||||
.toolbar-vertical ~ .chat {
|
||||
margin-top: 1%;
|
||||
margin-left: 2px;
|
||||
width: calc(39% - 36px);
|
||||
height: calc(98% - 4px);
|
||||
}
|
||||
.log {
|
||||
background-color: white;
|
||||
|
|
@ -139,7 +151,8 @@ html, body {
|
|||
z-index: 100;
|
||||
}
|
||||
.toolbar {
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.toolbar img {
|
||||
height: 28px;
|
||||
|
|
@ -156,17 +169,52 @@ html, body {
|
|||
border: 1px solid #bbb;
|
||||
background-color: white;
|
||||
}
|
||||
.toolbar-horizontal {
|
||||
flex-direction: row;
|
||||
height: 36px;
|
||||
margin-top: 4px;
|
||||
margin-left: 1%;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.toolbar-vertical {
|
||||
flex-direction: column;
|
||||
width: 36px;
|
||||
margin-top: 1%;
|
||||
margin-left: 4px;
|
||||
padding-top: 5px;
|
||||
float: left;
|
||||
}
|
||||
.toolbar-horizontal > * {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.toolbar-vertical > * {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.divider {
|
||||
display: inline-block;
|
||||
}
|
||||
.toolbar-horizontal .divider {
|
||||
height: 32px;
|
||||
border-left: 1px lightgray solid;
|
||||
}
|
||||
.handle-horizontal {
|
||||
.toolbar-vertical .divider {
|
||||
width: 32px;
|
||||
border-top: 1px lightgray solid;
|
||||
}
|
||||
.toolbar-horizontal .handle-horizontal {
|
||||
width: auto !important;
|
||||
border: none !important;
|
||||
background-color: #eee !important;
|
||||
}
|
||||
.handle-vertical {
|
||||
.toolbar-horizontal .handle-vertical {
|
||||
display: none;
|
||||
}
|
||||
.toolbar-vertical .handle-vertical {
|
||||
height: auto !important;
|
||||
border: none !important;
|
||||
background-color: #eee !important;
|
||||
}
|
||||
.toolbar-vertical .handle-horizontal {
|
||||
display: none;
|
||||
}
|
||||
.channel-icon .channel-icon-active {
|
||||
|
|
@ -307,3 +355,67 @@ form {
|
|||
width: 400px;
|
||||
left: calc(50% - 200px);
|
||||
}
|
||||
|
||||
|
||||
/****************/
|
||||
/* Minimal view */
|
||||
/****************/
|
||||
|
||||
.minimal .toolbar-horizontal ~ .channel-root-container {
|
||||
width: calc(98% - 6px);
|
||||
}
|
||||
.minimal .toolbar-vertical ~ .channel-root-container {
|
||||
width: calc(98% - 42px);
|
||||
}
|
||||
.minimal .handle-horizontal {
|
||||
display: none;
|
||||
}
|
||||
.minimal .handle-vertical {
|
||||
display: none;
|
||||
}
|
||||
.minimal .divider {
|
||||
display: none;
|
||||
}
|
||||
.minimal .tb-connect {
|
||||
display: none;
|
||||
}
|
||||
.minimal .tb-information {
|
||||
display: none;
|
||||
}
|
||||
.minimal .tb-record {
|
||||
display: none;
|
||||
}
|
||||
.minimal .tb-comment {
|
||||
display: none;
|
||||
}
|
||||
.minimal .tb-settings {
|
||||
display: none;
|
||||
}
|
||||
.minimal .tb-sourcecode {
|
||||
display: none;
|
||||
}
|
||||
.minimal .chat {
|
||||
display: none;
|
||||
}
|
||||
.minimal .channel-wrapper {
|
||||
display: none;
|
||||
}
|
||||
.minimal .channel {
|
||||
display: none;
|
||||
}
|
||||
.minimal .user-tree {
|
||||
display: none;
|
||||
}
|
||||
.minimal .user-wrapper {
|
||||
margin-left: 0px;
|
||||
}
|
||||
.minimal .user {
|
||||
margin-left: 0px;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
border: none;
|
||||
height: 19px;
|
||||
}
|
||||
.minimal .user-status {
|
||||
height: 19px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue