TeaSpeak/TeaWeb
TeaSpeak/TeaWeb
1
0
Fork 0
Code Issues 1 Pull requests Activity

Added a invite buddy dialog

Browse source
This commit is contained in:
WolverinDEV 2019-05-25 17:54:26 +02:00
parent 136893c404
commit f336a50870
7 changed files with 129 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
shared/css/static/modal-invite.scss Normal file
View file

@ -0,0 +1,37 @@
.modal-invite {
user-select: none;
.general-properties {
display: flex;
flex-direction: row;
justify-content: stretch;
> .form-group:first-of-type {
flex-grow: 1;
margin-right: 5px;
}
}
.text-output {
border-radius: 2px;
padding: 5px;
background: #00000012;
min-height: 120px;
width: 100%;
resize: none;
}
.buttons {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 5px;
.icon {
vertical-align: middle;
margin-right: 5px;
}
}
}

32
shared/html/templates.html
View file

@ -2595,6 +2595,38 @@
<button class="button-close">{{tr "Close" /}}</button>
</div>
</script>
<script class="jsrender-template" id="tmpl_invite" type="text/html">
<div class="modal-invite">
<div class="general-properties">
<div class="form-group property-type">
<label>{{tr "Link type:" /}}</label>
<select class="form-control">
<option value="0">{{tr "TeaWeb" /}}</option>
<option value="1" disabled>{{tr "TeaClient (Not supported yet)" /}}</option>
</select>
</div>
<div class="form-group">
<div class="switch flag-direct-connect">
<label>
<input type="checkbox">
{{tr "Connect directly" /}}
</label>
</div>
<div class="switch flag-resolved-address">
<label>
<input type="checkbox">
{{tr "Use resolved address" /}}
</label>
</div>
</div>
</div>
<textarea class="text-output" readonly></textarea>
<div class="buttons">
<button class="btn btn-primary button-copy"><div class="icon client-copy"></div>{{tr "Copy" /}}</button>
<button class="btn btn-primary button-close">{{tr "Close" /}}</button>
</div>
</div>
</script>
<script class="jsrender-template" id="tmpl_query_create" type="text/html">
<div class="query-create">

2
shared/js/load.ts
View file

@ -568,6 +568,7 @@ const loader_javascript = {
"js/ui/modal/ModalChangeVolume.js",
"js/ui/modal/ModalBanClient.js",
"js/ui/modal/ModalIconSelect.js",
"js/ui/modal/ModalInvite.js",
"js/ui/modal/ModalBanCreate.js",
"js/ui/modal/ModalBanList.js",
"js/ui/modal/ModalYesNo.js",
@ -711,6 +712,7 @@ const loader_style = {
"css/static/modal-connect.css",
"css/static/modal-channel.css",
"css/static/modal-query.css",
"css/static/modal-invite.css",
"css/static/modal-playlist.css",
"css/static/modal-banlist.css",
"css/static/modal-bancreate.css",

1
shared/js/main.ts
View file

@ -326,6 +326,7 @@ function main() {
password: password,
hashed: password_hashed
} : undefined);
Modals.spawnInviteEditor(connection);
} else {
Modals.spawnConnectModal({
url: address,

55
shared/js/ui/modal/ModalInvite.ts Normal file
View file

@ -0,0 +1,55 @@
/// <reference path="../../ui/elements/modal.ts" />
/// <reference path="../../ConnectionHandler.ts" />
/// <reference path="../../proto.ts" />
namespace Modals {
export function spawnInviteEditor(connection: ConnectionHandler) {
let modal: Modal;
modal = createModal({
header: tr("Invalid URL creator"),
body: () => {
let template = $("#tmpl_invite").renderTag();
template.find(".button-close").on('click', event => modal.close());
return template;
},
footer: undefined
});
const container_url = modal.htmlTag.find(".text-output");
const button_copy = modal.htmlTag.find(".button-copy");
button_copy.on('click', event => {
container_url.select();
document.execCommand('copy');
});
let flag_direct_connect = true;
let flag_resolved_address = false;
const update_link = () => {
const address = flag_resolved_address ? this.channelTree.client.serverConnection.remote_address() : connection.channelTree.server.remote_address;
const parameter = "connect_default=" + (flag_direct_connect ? 1 : 0) + "&connect_address=" + encodeURIComponent(address.host + (address.port === 9987 ? "" : address.port));
const url = document.location.origin + document.location.pathname + "?" + parameter;
container_url.text(url);
};
{
const input_direct_connect = modal.htmlTag.find(".flag-direct-connect input") as JQuery<HTMLInputElement>;
input_direct_connect.on('change', event => {
flag_direct_connect = input_direct_connect[0].checked;
update_link();
});
input_direct_connect[0].checked = flag_direct_connect;
}
{
const input = modal.htmlTag.find(".flag-resolved-address input") as JQuery<HTMLInputElement>;
input.on('change', event => {
flag_resolved_address = input[0].checked;
update_link();
});
input[0].checked = flag_direct_connect;
}
update_link();
modal.open();
}
}

9
shared/js/ui/server.ts
View file

@ -177,14 +177,7 @@ class ServerEntry {
type: MenuEntryType.ENTRY,
icon: "client-invite_buddy",
name: tr("Invite buddy"),
callback: () => {
const address = this.channelTree.client.serverConnection.remote_address().host + ":" + this.channelTree.client.serverConnection.remote_address().port;
const parameter = "connect_default=1&connect_address=" + encodeURIComponent(address);
const url = document.location.origin + document.location.pathname + "?" + parameter;
copy_to_clipboard(url);
createInfoModal(tr("Buddy invite URL"), tr("Your buddy invite URL:<br>") + url + tr("<bt>This has been copied to your clipboard.")).open();
}
callback: () => Modals.spawnInviteEditor(this.channelTree.client)
},
MenuEntry.CLOSE(() => (trigger_close ? on_close : () => {})())
);

1
shared/js/utils/helpers.ts
View file

@ -61,6 +61,7 @@ class LaterPromise<T> extends Promise<T> {
}
const copy_to_clipboard = str => {
console.log(tr("Copy text to clipboard: %s"), str);
const el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');