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

Add query param to replace the connect dialog with a single join button

Browse source 
E.g. https://server/?address=server&port=443&username=test&joinDialog=true
This commit is contained in:
Jonas Herzig 2018-09-23 14:05:38 +02:00
parent 6357532bfa
commit 60413ecbea
3 changed files with 35 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
app/index.html
View file

@ -21,7 +21,7 @@
</div> </div>
<div id="container" style="display: none" data-bind="visible: true"> <div id="container" style="display: none" data-bind="visible: true">
<!-- ko with: connectDialog --> <!-- ko with: connectDialog -->
<div class="connect-dialog dialog" data-bind="visible: visible"> <div class="connect-dialog dialog" data-bind="visible: visible() && !joinOnly()">
<div class="dialog-header"> <div class="dialog-header">
Connect to Server Connect to Server
</div> </div>
@ -55,6 +55,16 @@
</form> </form>
</div> </div>
<!-- /ko --> <!-- /ko -->
<!-- ko with: connectDialog -->
<div class="join-dialog dialog" data-bind="visible: visible() && joinOnly()">
<div class="dialog-header">
Mumble Voice Conference
</div>
<form data-bind="submit: connect">
<input class="dialog-submit" type="submit" value="Join Conference">
</form>
</div>
<!-- /ko -->
<!-- ko with: settingsDialog --> <!-- ko with: settingsDialog -->
<div class="settings-dialog dialog" data-bind="visible: $data"> <div class="settings-dialog dialog" data-bind="visible: $data">
<div class="dialog-header"> <div class="dialog-header">
@ -106,7 +116,8 @@
<div class="toolbar"> <div class="toolbar">
<img class="handle-horizontal" src="/svg/handle_horizontal.svg"> <img class="handle-horizontal" src="/svg/handle_horizontal.svg">
<img class="handle-vertical" src="/svg/handle_horizontal.svg"> <img class="handle-vertical" src="/svg/handle_horizontal.svg">
<img class="tb-connect" data-bind="click: connectDialog.show" <img class="tb-connect" data-bind="visible: !connectDialog.joinOnly(),
click: connectDialog.show"
rel="connect" src="/svg/applications-internet.svg"> rel="connect" src="/svg/applications-internet.svg">
<img class="tb-information" data-bind="click: connectionInfo.show" <img class="tb-information" data-bind="click: connectionInfo.show"
rel="information" src="/svg/information_icon.svg"> rel="information" src="/svg/information_icon.svg">

9
app/index.js
View file

@ -28,6 +28,7 @@ function ConnectDialog () {
self.token = ko.observable('') self.token = ko.observable('')
self.username = ko.observable('') self.username = ko.observable('')
self.password = ko.observable('') self.password = ko.observable('')
self.joinOnly = ko.observable(false)
self.visible = ko.observable(true) self.visible = ko.observable(true)
self.show = self.visible.bind(self.visible, true) self.show = self.visible.bind(self.visible, true)
self.hide = self.visible.bind(self.visible, false) self.hide = self.visible.bind(self.visible, false)
@ -580,21 +581,29 @@ window.mumbleUi = ui
window.onload = function () { window.onload = function () {
var queryParams = url.parse(document.location.href, true).query var queryParams = url.parse(document.location.href, true).query
var useJoinDialog = queryParams.joinDialog
if (queryParams.address) { if (queryParams.address) {
ui.connectDialog.address(queryParams.address) ui.connectDialog.address(queryParams.address)
} else {
useJoinDialog = false
} }
if (queryParams.port) { if (queryParams.port) {
ui.connectDialog.port(queryParams.port) ui.connectDialog.port(queryParams.port)
} else {
useJoinDialog = false
} }
if (queryParams.token) { if (queryParams.token) {
ui.connectDialog.token(queryParams.token) ui.connectDialog.token(queryParams.token)
} }
if (queryParams.username) { if (queryParams.username) {
ui.connectDialog.username(queryParams.username) ui.connectDialog.username(queryParams.username)
} else {
useJoinDialog = false
} }
if (queryParams.password) { if (queryParams.password) {
ui.connectDialog.password(queryParams.password) ui.connectDialog.password(queryParams.password)
} }
ui.connectDialog.joinOnly(useJoinDialog)
ko.applyBindings(ui) ko.applyBindings(ui)
} }

13
themes/MetroMumbleLight/main.css
View file

@ -266,6 +266,19 @@ form {
.settings-dialog .mic-volume { .settings-dialog .mic-volume {
height: 100%; height: 100%;
} }
.join-dialog {
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
.join-dialog .dialog-submit {
float: none;
width: 200px;
position: absolute;
top: calc(50% - 10px);
left: calc(50% - 100px);
}
.connect-dialog { .connect-dialog {
width: 300px; width: 300px;
height: 227px; height: 227px;