diff --git a/ChangeLog.md b/ChangeLog.md index 67d290ab..097edfb1 100644 --- a/ChangeLog.md +++ b/ChangeLog.md @@ -1,4 +1,15 @@ # Changelog: +* **28.03.19** + - Improved icon and avatar cache handling + - Added an icon manager + - Fixed bookmark create modal style + - Fixed control bar drop downs going over the edge + - Fixed context menu overflowing and going out of the side + - Improved host banner url revoke (only revoke after a new one has been generated) + - Added some fancy console messages + - Added country icons to the translation tab + - Decreased required bandwidth on translation loading + * **17.03.19** - Using VAD by default instead of PPT - Improved mobile experience: diff --git a/files.php b/files.php index dec1bd59..c089d028 100644 --- a/files.php +++ b/files.php @@ -4,7 +4,7 @@ /* shared part */ [ /* shared html and php files */ "type" => "html", - "search-pattern" => "/^([a-zA-Z]+)\.(html|php)$/", + "search-pattern" => "/^([a-zA-Z]+)\.(html|php|json)$/", "build-target" => "dev|rel", "path" => "./", diff --git a/shared/css/static/context_menu.scss b/shared/css/static/context_menu.scss index afa899dc..33ea6153 100644 --- a/shared/css/static/context_menu.scss +++ b/shared/css/static/context_menu.scss @@ -3,140 +3,148 @@ display: none; z-index: 2000; position: absolute; - border: 1px solid #CCC; - white-space: nowrap; - font-family: sans-serif; - background: #FFF; - color: #333; - padding: 3px; - * { - font-family: Arial, serif; - font-size: 12px; - white-space: pre; - line-height: 1; - vertical-align: middle; - } + .context-menu-container { + border: 1px solid #CCC; + white-space: nowrap; + font-family: sans-serif; + background: #FFF; + color: #333; + padding: 3px; - hr { - margin-top: 8px; - margin-bottom: 8px; - } - - .entry { - /*padding: 8px 12px;*/ - padding-right: 12px; - cursor: pointer; - list-style-type: none; - transition: all .3s ease; - user-select: none; - align-items: center; - - display: flex; - - &.disabled { - background-color: lightgray; - cursor: not-allowed; + &.left { + margin-left: -100%; + width: 100%; } - &:hover:not(.disabled) { - background-color: #DEF; + * { + font-family: Arial, serif; + font-size: 12px; + white-space: pre; + line-height: 1; + vertical-align: middle; } - } - .icon_empty, .icon { - margin-right: 4px; - } + hr { + margin-top: 8px; + margin-bottom: 8px; + } - .arrow { - cursor: pointer; - pointer-events: all; - width: 7px; - height: 7px; - padding: 0; - margin-right: 5px; - margin-left: 5px; + .entry { + /*padding: 8px 12px;*/ + padding-right: 12px; + cursor: pointer; + list-style-type: none; + transition: all .3s ease; + user-select: none; + align-items: center; - position: absolute; - right: 3px; - } + display: flex; - .sub-container { - padding-right: 3px; - position: relative; + &.disabled { + background-color: lightgray; + cursor: not-allowed; + } - &:hover { - .sub-menu { + &:hover:not(.disabled) { + background-color: #DEF; + } + } + + .icon_empty, .icon { + margin-right: 4px; + } + + .arrow { + cursor: pointer; + pointer-events: all; + width: 7px; + height: 7px; + padding: 0; + margin-right: 5px; + margin-left: 5px; + + position: absolute; + right: 3px; + } + + .sub-container { + padding-right: 3px; + position: relative; + + &:hover { + .sub-menu { + display: block; + } + } + } + + .sub-menu { + display: none; + left: 100%; + top: -4px; + position: absolute; + margin-left: 3px; + } + + .checkbox { + margin-top: 1px; + margin-left: 1px; + display: block; + position: relative; + padding-left: 14px; + margin-bottom: 12px; + cursor: pointer; + font-size: 22px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + /* Hide the browser's default checkbox */ + input { + position: absolute; + opacity: 0; + cursor: pointer; + display: none; + } + + .checkmark { + position: absolute; + top: 0; + left: 0; + height: 11px; + width: 11px; + background-color: #eee; + + &:after { + content: ""; + position: absolute; + display: none; + + left: 4px; + top: 1px; + width: 3px; + height: 7px; + border: solid white; + border-width: 0 2px 2px 0; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + } + } + + &:hover input ~ .checkmark { + background-color: #ccc; + } + + input:checked ~ .checkmark { + background-color: #2196F3; + } + + input:checked ~ .checkmark:after { display: block; } } } - - .sub-menu { - display: none; - left: 100%; - top: -4px; - position: absolute; - margin-left: 3px; - } - - .checkbox { - margin-top: 1px; - margin-left: 1px; - display: block; - position: relative; - padding-left: 14px; - margin-bottom: 12px; - cursor: pointer; - font-size: 22px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - - /* Hide the browser's default checkbox */ - input { - position: absolute; - opacity: 0; - cursor: pointer; - display: none; - } - - .checkmark { - position: absolute; - top: 0; - left: 0; - height: 11px; - width: 11px; - background-color: #eee; - - &:after { - content: ""; - position: absolute; - display: none; - - left: 4px; - top: 1px; - width: 3px; - height: 7px; - border: solid white; - border-width: 0 2px 2px 0; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - } - } - - &:hover input ~ .checkmark { - background-color: #ccc; - } - - input:checked ~ .checkmark { - background-color: #2196F3; - } - - input:checked ~ .checkmark:after { - display: block; - } - } } \ No newline at end of file diff --git a/shared/css/static/control_bar.scss b/shared/css/static/control_bar.scss index 2ec3a444..a8d85a75 100644 --- a/shared/css/static/control_bar.scss +++ b/shared/css/static/control_bar.scss @@ -7,8 +7,7 @@ $background:lightgray; flex-direction: row; /* tmp fix for ultra small devices */ - overflow-x: auto; - overflow-y: hidden; + overflow-y: visible; .divider { border-left:2px solid gray; @@ -46,6 +45,8 @@ $background:lightgray; } .button-dropdown { + position: relative; + .buttons { display: flex; flex-direction: row; @@ -104,7 +105,7 @@ $background:lightgray; /*box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);*/ &.right { - + right: 0; } .icon { diff --git a/shared/css/static/general.scss b/shared/css/static/general.scss index c0d474b8..a7d704e9 100644 --- a/shared/css/static/general.scss +++ b/shared/css/static/general.scss @@ -43,6 +43,11 @@ } } +@viewport { + width: device-width; + user-zoom:fixed; +} + .select_info { font-family: Arial; font-size: 12px; diff --git a/shared/css/static/modal-avatar.scss b/shared/css/static/modal-avatar.scss new file mode 100644 index 00000000..e7162e34 --- /dev/null +++ b/shared/css/static/modal-avatar.scss @@ -0,0 +1,175 @@ +.modal-avatar-list { + display: flex; + flex-direction: row; + + .container-list { + width: 50%; + + margin-top: 5px; + + display: flex; + flex-direction: column; + justify-content: stretch; + + .column { + &.column-username { + width: calc(50% - 100px); + overflow: hidden; + text-overflow: ellipsis; + } + + &.column-unique-id { + width: calc(50% - 100px); + overflow: hidden; + text-overflow: ellipsis; + } + + &.column-size { + width: 75px; + flex-grow: 0; + flex-shrink: 0; + + text-align: center; + } + + &.column-timestamp { + width: 150px; + flex-grow: 0; + flex-shrink: 0; + + text-align: center; + } + } + + .list-header { + flex-grow: 0; + flex-shrink: 0; + display: flex; + flex-direction: row; + + .column { + border: 1px solid lightgray; + text-align: center; + } + } + + .list-entries-container { + flex-grow: 1; + display: flex; + flex-direction: column; + justify-content: start; + overflow-y: auto; + min-height: 250px; + + .entry { + display: flex; + flex-direction: row; + + .column { + margin-left: 2px; + } + + cursor: pointer; + + &.selected { + background-color: lightblue; + } + } + + &.scrollbar { + .column-username { + width: calc(50% - 100px + 30px) + } + + .column-unique-id { + width: calc(50% - 100px + 30px) + } + } + } + } + + .container-info { + margin-left: 10px; + + position: relative; + width: 50%; + + .container-data { + width: 100%; + } + + .container-preview { + display: flex; + flex-direction: row; + justify-content: stretch; + + .container-image { + flex-shrink: 0; + flex-grow: 0; + + width: 302px; + height: 302px; + + background-color: whitesmoke; + border: 1px solid black; + border-radius: 2px; + + position: relative; + overflow: hidden; + + > div { + top: 0; + bottom: 0; + left: 0; + right: 0; + + position: absolute; + } + } + + .container-image-data { + margin-left: 10px; + + flex-shrink: 1; + flex-grow: 1; + + a { + text-align: center; + } + + .form-group { + width: 100%; + margin-bottom: 0px; + } + } + } + + .container-buttons { + width: 100%; + margin-top: 20px; + + display: flex; + flex-direction: row; + justify-content: space-between; + } + + .disabled-overlay { + position: absolute; + + top: 0; + bottom: 0; + left: 0; + right: 0; + + background-color: gray; + + display: flex; + flex-direction: column; + justify-content: space-around; + + a { + text-align: center; + } + } + } +} \ No newline at end of file diff --git a/shared/css/static/modal-channel.scss b/shared/css/static/modal-channel.scss index 8c9bae58..c4d875fd 100644 --- a/shared/css/static/modal-channel.scss +++ b/shared/css/static/modal-channel.scss @@ -1,3 +1,52 @@ +.container-channel-edit-general { + .container-name-icon { + display: flex; + flex-direction: row; + justify-content: stretch; + + .container-name { + flex-grow: 1; + flex-shrink: 1; + } + + .container-icon { + flex-grow: 0; + flex-shrink: 0; + } + } + + .container-icon { + width: 30px; + + margin-left: 10px; + + .button-select-icon { + left: 0; + right: 0; + top: 0; + bottom: 0; + + position: absolute; + + .icon-node { + cursor: pointer; + + height: 100%; + width: 100%; + + &:hover { + background-color: #00000011; + } + + > div { + vertical-align: middle; + text-align: center; + } + } + } + } +} + .container-channel-settings-standard { flex-grow: 1; display: flex; diff --git a/shared/css/static/modal-connect.scss b/shared/css/static/modal-connect.scss index ca88fbac..8ab6907e 100644 --- a/shared/css/static/modal-connect.scss +++ b/shared/css/static/modal-connect.scss @@ -43,7 +43,7 @@ .container-password { flex-grow: 0; - flex-shrink: 0; + flex-shrink: 4; margin-left: 15px; } @@ -61,7 +61,7 @@ .container-manage { flex-grow: 0; - flex-shrink: 0; + flex-shrink: 4; margin-left: 15px; } diff --git a/shared/css/static/modal-icons.scss b/shared/css/static/modal-icons.scss new file mode 100644 index 00000000..e79a27ea --- /dev/null +++ b/shared/css/static/modal-icons.scss @@ -0,0 +1,150 @@ +.modal-icon-select { + display: flex; + flex-direction: column; + justify-content: stretch; + + .container-icons { + flex-grow: 1; + flex-shrink: 1; + + display: flex; + flex-direction: row; + justify-content: stretch; + + > div { + width: 50%; + + &:not(:first-of-type) { + margin-left: 10px; + } + } + + .content, .container-icons-list { + flex-grow: 1; + flex-shrink: 1; + + display: flex; + flex-direction: column; + } + + .container-icons-list { + position: relative; + + > div { + border-radius: 3px; + } + + .container-icons-remote, .container-icons-local { + width: 100%; + min-height: 300px; + + overflow-x: hidden; + overflow-y: auto; + + background-color: whitesmoke; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + + .icon-container, .icon { + margin-left: 1px; + margin-right: 1px; + } + + &.icon-select { + .icon-container, .icon { + cursor: pointer; + + &:hover { + background-color: #00000011; + border: 1px solid black; + } + + &.selected { + background-color: #00330011; + border: 1px solid red; + } + + &:hover, &.selected { + width: 18px; + height: 18px; + + margin: -1px 0px; + } + } + } + } + + .container-loading, .container-no-permissions, .container-error { + top: 0; + bottom: 0; + left: 0; + right: 0; + + position: absolute; + background-color: grey; + + cursor: not-allowed; + + text-align: center; + display: flex; + flex-direction: column; + justify-content: space-around; + + > a { + padding-bottom: 30px; + } + } + + .container-loading { + z-index: 40; + } + + .container-error { + z-index: 30; + } + .container-no-permissions { + z-index: 20; + } + } + } + + .container-buttons { + margin-top: 20px; + + flex-grow: 0; + flex-shrink: 0; + + display: flex; + flex-direction: row; + justify-content: stretch; + + .spacer { + flex-grow: 1; + flex-shrink: 1; + } + + .btn { + flex-grow: 0; + flex-shrink: 0; + } + + .button-select { + margin-left: 10px; + + display: flex; + align-items: center; + flex-direction: row; + + .selected-item-container { + height: 16px; + vertical-align: sub; + } + } + + .button-select-no-icon { + margin-left: 10px; + } + } +} \ No newline at end of file diff --git a/shared/css/static/modal-permissions.scss b/shared/css/static/modal-permissions.scss index 7a2ff463..6eb5ebac 100644 --- a/shared/css/static/modal-permissions.scss +++ b/shared/css/static/modal-permissions.scss @@ -1,8 +1,11 @@ permission-editor { display: flex; flex-direction: column; + flex-grow: 1; flex-shrink: 1; + + min-height: 0; } @@ -260,6 +263,7 @@ permission-editor { flex-grow: 1; flex-shrink: 1; + min-height: 0; &.container-mode-unset { background-color: lightgray; diff --git a/shared/css/static/modal-playlist.scss b/shared/css/static/modal-playlist.scss index a05ce0b3..7ee0cd1c 100644 --- a/shared/css/static/modal-playlist.scss +++ b/shared/css/static/modal-playlist.scss @@ -155,6 +155,7 @@ display: flex; flex-direction: column; justify-content: stretch; + min-height: 0; .tab-content { padding: 0; /* override tab-content setting */ @@ -228,13 +229,14 @@ text-align: center; } - .tab-content, x-content { + x-content { overflow-y: hidden; display: flex; flex-direction: column; } .container-songs { + width: 100%; display: flex; flex-direction: column; padding: 5px; diff --git a/shared/css/static/modal-server.scss b/shared/css/static/modal-server.scss index 357af6b1..ab4374f0 100644 --- a/shared/css/static/modal-server.scss +++ b/shared/css/static/modal-server.scss @@ -19,6 +19,53 @@ flex-shrink: 70; } } + + .container-name-icon { + display: flex; + flex-direction: row; + justify-content: stretch; + + .container-name { + flex-grow: 1; + flex-shrink: 1; + } + + .container-icon { + flex-grow: 0; + flex-shrink: 0; + } + } + + .container-icon { + width: 30px; + + margin-left: 10px; + + .button-select-icon { + left: 0; + right: 0; + top: 0; + bottom: 0; + + position: absolute; + + .icon-node { + cursor: pointer; + + height: 100%; + width: 100%; + + &:hover { + background-color: #00000011; + } + + > div { + vertical-align: middle; + text-align: center; + } + } + } + } } .container-server-settings-host { padding: 5px; diff --git a/shared/css/static/modal-settings.scss b/shared/css/static/modal-settings.scss index 9f001ea5..7c9e7085 100644 --- a/shared/css/static/modal-settings.scss +++ b/shared/css/static/modal-settings.scss @@ -412,6 +412,16 @@ $small_device: 800px; /* tested out via audio tab */ } } +.modal .container-tabname-translations { + display: flex; + flex-direction: row; + + .country { + align-self: center; + margin-left: 3px; + } +} + .modal .settings-translations { margin: 5px; @@ -475,6 +485,12 @@ $small_device: 800px; /* tested out via audio tab */ background-color: #00000010; } } + + .country { + align-self: center; + margin-right: 5px; + margin-left: 5px; + } } } diff --git a/shared/css/static/modals.scss b/shared/css/static/modals.scss index 9e1e7087..e6195128 100644 --- a/shared/css/static/modals.scss +++ b/shared/css/static/modals.scss @@ -14,6 +14,8 @@ body { modal-body { display: flex; flex-direction: column; + + min-height: 10px; } .modal { @@ -64,6 +66,7 @@ modal-body { .modal-content { /* max-height: 500px; */ + min-height: 0; /* required for moz */ flex-direction: column; justify-content: stretch; @@ -90,6 +93,7 @@ modal-body { flex-shrink: 1; display: flex; flex-direction: column; + min-height: 0; input.is-invalid { background-image: linear-gradient(0deg, #d50000 2px, rgba(213, 0, 0, 0) 0), linear-gradient(0deg, rgba(241, 1, 1, 0.61) 1px, transparent 0); diff --git a/shared/css/static/ts/tab.scss b/shared/css/static/ts/tab.scss index a312ae96..ed9616e2 100644 --- a/shared/css/static/ts/tab.scss +++ b/shared/css/static/ts/tab.scss @@ -6,6 +6,8 @@ x-tab { display:none } flex-direction: column; display: flex; flex-grow: 1; + + min-height: 220px; /* min the header */ } .tab div * { @@ -25,9 +27,17 @@ x-tab { display:none } flex-grow: 1; x-content { + min-height: 0; overflow-y: auto; + width: 100%; } + + @-moz-document url-prefix() { + x-content { + height: 100%; + } + } } /* diff --git a/shared/html/index.php b/shared/html/index.php index b382804f..b0f7c348 100644 --- a/shared/html/index.php +++ b/shared/html/index.php @@ -35,9 +35,12 @@ - + + + +
-

Ooops, we encountered some trouble while loading important files!

+

Ooops, we encountered some trouble while loading important files!

diff --git a/shared/html/manifest.json b/shared/html/manifest.json new file mode 100644 index 00000000..61415110 --- /dev/null +++ b/shared/html/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "TeaWeb", + "name": "TeaSpeak Web", + "icons": [ + { + "src": "img/favicon/teacup.png", + "type": "image/png", + "sizes": "256x256" + } + ], + "start_url": "/?", + "background_color": "#18BC9C", + "display": "standalone", + "theme_color": "#18BC9C" +} \ No newline at end of file diff --git a/shared/html/templates.html b/shared/html/templates.html index d5beca49..e0b1799c 100644 --- a/shared/html/templates.html +++ b/shared/html/templates.html @@ -113,6 +113,14 @@
{{tr "View/edit permissions" /}} +
+
+ +
+
+
+ {{tr "Manage server queries" /}} +
@@ -127,7 +135,7 @@ -
+
@@ -135,7 +143,7 @@
-
{{tr "Show/hide server queries" /}}
+
{{tr "Manage server queries" /}}
@@ -317,7 +325,7 @@
{{tr "Selected profile is invalid. Select another one or fix the profile." /}}
- +
@@ -330,11 +338,23 @@ + + + + + + - \ No newline at end of file + +