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

Merge pull request #133: Add tooltips and alt texts to toolbar buttons

Browse source
This commit is contained in:
Jonas Herzig 2020-11-25 13:05:51 +01:00
parent da75c72bd7 335f46603a
commit e641906c87
3 changed files with 64 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
app/index.html
View file

@ -463,40 +463,52 @@
</script> </script>
<div class="toolbar" data-bind="css: { 'toolbar-horizontal': toolbarHorizontal(), <div class="toolbar" data-bind="css: { 'toolbar-horizontal': toolbarHorizontal(),
'toolbar-vertical': !toolbarHorizontal() }"> 'toolbar-vertical': !toolbarHorizontal() }">
<img class="handle-horizontal" src="/svg/handle_horizontal.svg" <img class="tb-horizontal handle-horizontal" src="/svg/handle_horizontal.svg"
data-bind="click: toggleToolbarOrientation"> data-bind="click: toggleToolbarOrientation"
<img class="handle-vertical" src="/svg/handle_vertical.svg" title="Switch Orientation" alt="Switch Orientation">
data-bind="click: toggleToolbarOrientation"> <img class="tb-vertical handle-vertical" src="/svg/handle_vertical.svg"
data-bind="click: toggleToolbarOrientation"
title="Switch Orientation" alt="Switch Orientation">
<img class="tb-connect" data-bind="visible: !connectDialog.joinOnly(), <img class="tb-connect" data-bind="visible: !connectDialog.joinOnly(),
click: connectDialog.show" click: connectDialog.show"
rel="connect" src="/svg/applications-internet.svg"> rel="connect" src="/svg/applications-internet.svg"
title="Connect to Server" alt="Connection">
<img class="tb-information" rel="information" src="/svg/information_icon.svg" <img class="tb-information" rel="information" src="/svg/information_icon.svg"
data-bind="click: connectionInfo.show, data-bind="click: connectionInfo.show,
css: { disabled: !thisUser() }"> css: { disabled: !thisUser() }"
title="Information" alt="Information">
<div class="divider"></div> <div class="divider"></div>
<img class="tb-mute" data-bind="visible: !selfMute(), <img class="tb-mute" data-bind="visible: !selfMute(),
click: function () { requestMute(thisUser()) }" click: function () { requestMute(thisUser()) }"
rel="mute" src="/svg/audio-input-microphone.svg"> rel="mute" src="/svg/audio-input-microphone.svg"
title="Mute" alt="Mute">
<img class="tb-unmute tb-active" data-bind="visible: selfMute, <img class="tb-unmute tb-active" data-bind="visible: selfMute,
click: function () { requestUnmute(thisUser()) }" click: function () { requestUnmute(thisUser()) }"
rel="unmute" src="/svg/audio-input-microphone-muted.svg"> rel="unmute" src="/svg/audio-input-microphone-muted.svg"
title="Unmute" alt="Unmute">
<img class="tb-deaf" data-bind="visible: !selfDeaf(), <img class="tb-deaf" data-bind="visible: !selfDeaf(),
click: function () { requestDeaf(thisUser()) }" click: function () { requestDeaf(thisUser()) }"
rel="deaf" src="/svg/audio-output.svg"> rel="deaf" src="/svg/audio-output.svg"
title="Deafen" alt="Deafen">
<img class="tb-undeaf tb-active" data-bind="visible: selfDeaf, <img class="tb-undeaf tb-active" data-bind="visible: selfDeaf,
click: function () { requestUndeaf(thisUser()) }" click: function () { requestUndeaf(thisUser()) }"
rel="undeaf" src="/svg/audio-output-deafened.svg"> rel="undeaf" src="/svg/audio-output-deafened.svg"
title="Undeafen" alt="Undeafen">
<img class="tb-record" data-bind="click: function(){}" <img class="tb-record" data-bind="click: function(){}"
rel="record" src="/svg/media-record.svg"> rel="record" src="/svg/media-record.svg"
title="Record" alt="Record">
<div class="divider"></div> <div class="divider"></div>
<img class="tb-comment" data-bind="click: commentDialog.show" <img class="tb-comment" data-bind="click: commentDialog.show"
rel="comment" src="/svg/toolbar-comment.svg"> rel="comment" src="/svg/toolbar-comment.svg"
title="Comment" alt="Comment">
<div class="divider"></div> <div class="divider"></div>
<img class="tb-settings" data-bind="click: openSettings" <img class="tb-settings" data-bind="click: openSettings"
rel="settings" src="/svg/config_basic.svg"> rel="settings" src="/svg/config_basic.svg"
title="Settings" alt="Settings">
<div class="divider"></div> <div class="divider"></div>
<img class="tb-sourcecode" data-bind="click: openSourceCode" <img class="tb-sourcecode" data-bind="click: openSourceCode"
rel="Source Code" src="/svg/source-code.svg"> rel="Source Code" src="/svg/source-code.svg"
title="Open Soure Code" alt="Open Source Code">
</div> </div>
<div class="chat"> <div class="chat">
<script type="text/html" id="log-generic"> <script type="text/html" id="log-generic">

25
app/index.js
View file

@ -1124,6 +1124,31 @@ function translateEverything() {
translatePiece('.channel-context-menu .copy-mumble-url', 'textcontent', {}, 'channelcontextmenu.copy_mumble_url'); translatePiece('.channel-context-menu .copy-mumble-url', 'textcontent', {}, 'channelcontextmenu.copy_mumble_url');
translatePiece('.channel-context-menu .copy-mumble-web-url', 'textcontent', {}, 'channelcontextmenu.copy_mumble_web_url'); translatePiece('.channel-context-menu .copy-mumble-web-url', 'textcontent', {}, 'channelcontextmenu.copy_mumble_web_url');
translatePiece('.channel-context-menu .send-message', 'textcontent', {}, 'channelcontextmenu.send_message'); translatePiece('.channel-context-menu .send-message', 'textcontent', {}, 'channelcontextmenu.send_message');
translatePiece('.toolbar .tb-horizontal', 'attribute', {'name': 'title'}, 'toolbar.orientation');
translatePiece('.toolbar .tb-horizontal', 'attribute', {'name': 'alt'}, 'toolbar.orientation');
translatePiece('.toolbar .tb-vertical', 'attribute', {'name': 'title'}, 'toolbar.orientation');
translatePiece('.toolbar .tb-vertical', 'attribute', {'name': 'alt'}, 'toolbar.orientation');
translatePiece('.toolbar .tb-connect', 'attribute', {'name': 'title'}, 'toolbar.connect');
translatePiece('.toolbar .tb-connect', 'attribute', {'name': 'alt'}, 'toolbar.connect');
translatePiece('.toolbar .tb-information', 'attribute', {'name': 'title'}, 'toolbar.information');
translatePiece('.toolbar .tb-information', 'attribute', {'name': 'alt'}, 'toolbar.information');
translatePiece('.toolbar .tb-mute', 'attribute', {'name': 'title'}, 'toolbar.mute');
translatePiece('.toolbar .tb-mute', 'attribute', {'name': 'alt'}, 'toolbar.mute');
translatePiece('.toolbar .tb-unmute', 'attribute', {'name': 'title'}, 'toolbar.unmute');
translatePiece('.toolbar .tb-unmute', 'attribute', {'name': 'alt'}, 'toolbar.unmute');
translatePiece('.toolbar .tb-deaf', 'attribute', {'name': 'title'}, 'toolbar.deaf');
translatePiece('.toolbar .tb-deaf', 'attribute', {'name': 'alt'}, 'toolbar.deaf');
translatePiece('.toolbar .tb-undeaf', 'attribute', {'name': 'title'}, 'toolbar.undeaf');
translatePiece('.toolbar .tb-undeaf', 'attribute', {'name': 'alt'}, 'toolbar.undeaf');
translatePiece('.toolbar .tb-record', 'attribute', {'name': 'title'}, 'toolbar.record');
translatePiece('.toolbar .tb-record', 'attribute', {'name': 'alt'}, 'toolbar.record');
translatePiece('.toolbar .tb-comment', 'attribute', {'name': 'title'}, 'toolbar.comment');
translatePiece('.toolbar .tb-comment', 'attribute', {'name': 'alt'}, 'toolbar.comment');
translatePiece('.toolbar .tb-settings', 'attribute', {'name': 'title'}, 'toolbar.settings');
translatePiece('.toolbar .tb-settings', 'attribute', {'name': 'alt'}, 'toolbar.settings');
translatePiece('.toolbar .tb-sourcecode', 'attribute', {'name': 'title'}, 'toolbar.sourcecode');
translatePiece('.toolbar .tb-sourcecode', 'attribute', {'name': 'alt'}, 'toolbar.sourcecode');
} }
async function main() { async function main() {

13
loc/en.json
View file

@ -31,6 +31,19 @@
"title": "Mumble Voice Conference", "title": "Mumble Voice Conference",
"connect": "Join Conference" "connect": "Join Conference"
}, },
"toolbar": {
"orientation": "Switch Orientation",
"connect": "Connection",
"information": "Information",
"mute": "Mute",
"unmute": "Unmute",
"deaf": "Deafen",
"undeaf": "Undeafen",
"record": "Record",
"comment": "Comment",
"settings": "Settings",
"sourcecode": "Open Source Code"
},
"usercontextmenu": { "usercontextmenu": {
"mute": "Mute", "mute": "Mute",
"deafen": "Deafen", "deafen": "Deafen",