From 6ff210be079b1efe54584efbec51d0663cb3ac4d Mon Sep 17 00:00:00 2001 From: WolverinDEV Date: Sun, 14 Mar 2021 19:39:08 +0100 Subject: [PATCH] Added the new bookmark system and updated the bookmark UI --- ChangeLog.md | 18 +- file.ts | 2 +- package-lock.json | 88 ++ package.json | 2 + shared/css/load-css.tsx | 1 - shared/css/static/mixin.scss | 12 +- shared/css/static/modal-bookmarks.scss | 498 ----------- shared/html/templates.html | 167 ---- .../img/client-icons/bookmark_edit_name.svg | 4 + shared/js/bookmarks.ts | 749 ++++++++++------ shared/js/connection/HandshakeHandler.ts | 2 - shared/js/connectionlog/History.ts | 16 +- .../js/events/ClientGlobalControlHandler.ts | 8 +- shared/js/file/Icons.ts | 4 + shared/js/file/Utils.ts | 37 + shared/js/global.d.ts | 4 + shared/js/main.tsx | 21 +- shared/js/proto.ts | 16 +- shared/js/text/bbcode/emoji.tsx | 4 +- shared/js/text/bbcode/highlight.tsx | 2 +- shared/js/tree/Server.ts | 16 - shared/js/ui/elements/Modal.ts | 8 +- shared/js/ui/frames/HostBannerRenderer.tsx | 4 +- shared/js/ui/frames/control-bar/Button.scss | 10 +- shared/js/ui/frames/control-bar/Controller.ts | 90 +- shared/js/ui/frames/menu-bar/MainMenu.ts | 94 ++- .../js/ui/frames/video/RendererSpotlight.tsx | 2 +- shared/js/ui/jsrender.ts | 2 +- shared/js/ui/modal/ModalAvatarList.ts | 2 +- shared/js/ui/modal/ModalBanList.ts | 2 +- shared/js/ui/modal/ModalBookmarks.ts | 421 --------- shared/js/ui/modal/ModalClientInfo.ts | 2 +- shared/js/ui/modal/ModalPoke.ts | 2 +- shared/js/ui/modal/ModalServerInfo.ts | 2 +- shared/js/ui/modal/ModalSettings.tsx | 3 +- .../modal/bookmarks-add-server/Controller.ts | 5 + .../modal/bookmarks-add-server/Definitions.ts | 7 + .../modal/bookmarks-add-server/Renderer.scss | 0 .../modal/bookmarks-add-server/Renderer.tsx | 13 + shared/js/ui/modal/bookmarks/Controller.ts | 568 +++++++++++++ shared/js/ui/modal/bookmarks/Definitions.ts | 77 ++ shared/js/ui/modal/bookmarks/Renderer.scss | 670 +++++++++++++++ shared/js/ui/modal/bookmarks/Renderer.tsx | 797 ++++++++++++++++++ .../ui/modal/bookmarks/header_background.png} | Bin shared/js/ui/modal/bookmarks/serverinfo.png | Bin 0 -> 80844 bytes shared/js/ui/modal/connect/Controller.ts | 2 +- shared/js/ui/modal/connect/Renderer.scss | 11 - shared/js/ui/modal/connect/Renderer.tsx | 10 +- shared/js/ui/modal/css-editor/Renderer.tsx | 31 +- shared/js/ui/modal/invite/Renderer.tsx | 2 +- .../ui/modal/transfer/FileBrowserRenderer.tsx | 6 +- shared/js/ui/react-elements/Checkbox.scss | 5 +- shared/js/ui/react-elements/CountryIcon.scss | 10 + shared/js/ui/react-elements/CountryIcon.tsx | 15 + shared/js/ui/react-elements/InputField.tsx | 5 +- shared/js/ui/react-elements/Tooltip.scss | 5 + shared/js/ui/react-elements/Tooltip.tsx | 4 +- shared/js/ui/utils/Variable.ts | 44 +- shared/svg-sprites/client-icons.d.ts | 5 +- shared/tsconfig/tsconfig.declarations.json | 1 + shared/tsconfig/tsconfig.json | 1 + tsconfig.json | 1 + webpack.config.ts | 6 +- 63 files changed, 3078 insertions(+), 1538 deletions(-) delete mode 100644 shared/css/static/modal-bookmarks.scss create mode 100644 shared/img/client-icons/bookmark_edit_name.svg create mode 100644 shared/js/file/Utils.ts create mode 100644 shared/js/global.d.ts delete mode 100644 shared/js/ui/modal/ModalBookmarks.ts create mode 100644 shared/js/ui/modal/bookmarks-add-server/Controller.ts create mode 100644 shared/js/ui/modal/bookmarks-add-server/Definitions.ts create mode 100644 shared/js/ui/modal/bookmarks-add-server/Renderer.scss create mode 100644 shared/js/ui/modal/bookmarks-add-server/Renderer.tsx create mode 100644 shared/js/ui/modal/bookmarks/Controller.ts create mode 100644 shared/js/ui/modal/bookmarks/Definitions.ts create mode 100644 shared/js/ui/modal/bookmarks/Renderer.scss create mode 100644 shared/js/ui/modal/bookmarks/Renderer.tsx rename shared/{img/bookmark_background.png => js/ui/modal/bookmarks/header_background.png} (100%) create mode 100644 shared/js/ui/modal/bookmarks/serverinfo.png create mode 100644 shared/js/ui/react-elements/CountryIcon.scss create mode 100644 shared/js/ui/react-elements/CountryIcon.tsx diff --git a/ChangeLog.md b/ChangeLog.md index 126b5e5b..a68ba5dc 100644 --- a/ChangeLog.md +++ b/ChangeLog.md @@ -1,4 +1,12 @@ # Changelog: +* **14.03.21** + - Enchanted the bookmark system + - Added support for auto connect on startup + - Cleaned and simplified up the bookmark UI + - Added support for importing/exporting bookmarks + - Added support for duplicating bookmarks + - Adding support for default channels and passwords + * **12.03.21** - Added a new video spotlight mode which allows showing multiple videos at the same time as well as dragging and resizing them @@ -150,7 +158,7 @@ - Fixed invalid channel tree unique id assignment for the initial server entry ([#F2986](https://forum.teaspeak.de/index.php?threads/2986)) * **27.09.20** - - Middle clicking on bookmarks now directly connects in a new tab + - Middle clicking on bookmarksOld now directly connects in a new tab * **26.09.20** - Updating group prefix/suffixes when the group naming mode changes @@ -320,7 +328,7 @@ - Fixed channel tree deletions - Removed layout recalculate bottleneck on connection handler switching - Fixed empty channel tree on tab change, if the tree has some scroll offset - - Added the ability to duplicate bookmarks + - Added the ability to duplicate bookmarksOld - Fixed issue [#106](https://github.com/TeaSpeak/TeaWeb/issues/106) - Fixed issue [#90](https://github.com/TeaSpeak/TeaWeb/issues/90) @@ -350,7 +358,7 @@ * **21.04.20** - Clicking on the music bot does not longer results in the insufficient permission sound when the client has no permissions - Fixed permission editor overflow - - Fixed the bookmark edit window (bookmarks have failed to save) + - Fixed the bookmark edit window (bookmarksOld have failed to save) * **18.04.20** - Recoded the channel tree using React @@ -447,7 +455,7 @@ - Improved the server info modal experience (Correctly showing no permissions) - Improved "About" modal overflow behaviour - Allow the client to use the scroll bar without closing the modal within modals - - Improved bookmarks modal for smaller devices + - Improved bookmarksOld modal for smaller devices - Fixed invalid white space representation * **10.12.19** @@ -637,7 +645,7 @@ - Added query account management (since server 1.2.32b) * **18.12.18** - - Added bookmarks and bookmarks management + - Added bookmarksOld and bookmarksOld management - Added query user visibility button and creation (Query management will follow soon) - Fixed overflow within the group assignment dialog diff --git a/file.ts b/file.ts index a2867ad6..03143b7a 100644 --- a/file.ts +++ b/file.ts @@ -40,7 +40,7 @@ const APP_FILE_LIST_SHARED_SOURCE: ProjectResource[] = [ }, { /* javascript files as manifest.json */ "type": "js", - "search-pattern": /.*\.(js|json|svg)$/, + "search-pattern": /.*\.(js|json|svg|png)$/, "build-target": "dev|rel", "path": "js/", diff --git a/package-lock.json b/package-lock.json index be69e8a7..6809714d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8912,6 +8912,11 @@ } } }, + "jsonschema": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/jsonschema/-/jsonschema-1.4.0.tgz", + "integrity": "sha512-/YgW6pRMr6M7C+4o8kS+B/2myEpHCrxO4PEWnqJNBFMjn7EWXqlQ4tGwL6xTHeRplwuZmcAncdvfOad1nT2yMw==" + }, "jsprim": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz", @@ -14431,6 +14436,89 @@ } } }, + "url-loader": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/url-loader/-/url-loader-4.1.1.tgz", + "integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==", + "dev": true, + "requires": { + "loader-utils": "^2.0.0", + "mime-types": "^2.1.27", + "schema-utils": "^3.0.0" + }, + "dependencies": { + "@types/json-schema": { + "version": "7.0.7", + "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz", + "integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==", + "dev": true + }, + "ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "requires": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + } + }, + "ajv-keywords": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", + "dev": true + }, + "json5": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.0.tgz", + "integrity": "sha512-f+8cldu7X/y7RAJurMEJmdoKXGB/X550w2Nr3tTbezL6RwEE/iMcm+tZnXeoZtKuOq6ft8+CqzEkrIgx1fPoQA==", + "dev": true, + "requires": { + "minimist": "^1.2.5" + } + }, + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", + "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "dev": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, + "mime-db": { + "version": "1.46.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.46.0.tgz", + "integrity": "sha512-svXaP8UQRZ5K7or+ZmfNhg2xX3yKDMUzqadsSqi4NCH/KomcH75MAMYAGVlvXn4+b/xOPhS3I2uHKRUzvjY7BQ==", + "dev": true + }, + "mime-types": { + "version": "2.1.29", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.29.tgz", + "integrity": "sha512-Y/jMt/S5sR9OaqteJtslsFZKWOIIqMACsJSiHghlCAyhf7jfVYjKBmLiX8OgpWeW+fjJ2b+Az69aPFPkUOY6xQ==", + "dev": true, + "requires": { + "mime-db": "1.46.0" + } + }, + "schema-utils": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz", + "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==", + "dev": true, + "requires": { + "@types/json-schema": "^7.0.6", + "ajv": "^6.12.5", + "ajv-keywords": "^3.5.2" + } + } + } + }, "url-parse-lax": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz", diff --git a/package.json b/package.json index 4c8ac6e7..54275896 100644 --- a/package.json +++ b/package.json @@ -74,6 +74,7 @@ "ts-loader": "^6.2.2", "tsd": "^0.13.1", "typescript": "^3.7.0", + "url-loader": "^4.1.1", "wabt": "^1.0.13", "webpack": "^4.42.1", "webpack-bundle-analyzer": "^3.6.1", @@ -101,6 +102,7 @@ "highlight.js": "^10.1.1", "ip-regex": "^4.2.0", "jquery": "^3.5.1", + "jsonschema": "^1.4.0", "jsrender": "^1.0.7", "moment": "^2.24.0", "react": "^16.13.1", diff --git a/shared/css/load-css.tsx b/shared/css/load-css.tsx index e691b1cd..5d600bb8 100644 --- a/shared/css/load-css.tsx +++ b/shared/css/load-css.tsx @@ -14,7 +14,6 @@ import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/m import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-avatar.scss" import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-banclient.scss" import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-banlist.scss" -import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-bookmarks.scss" import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-channelinfo.scss" import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-clientinfo.scss" import "!style-loader!css-loader?url=false!sass-loader?sourceMap=true!./static/modal-connect.scss" diff --git a/shared/css/static/mixin.scss b/shared/css/static/mixin.scss index 0199d98b..0da9d333 100644 --- a/shared/css/static/mixin.scss +++ b/shared/css/static/mixin.scss @@ -66,29 +66,29 @@ user-select: $mode; } -@mixin chat-scrollbar() { +@mixin chat-scrollbar($width: .5em) { & { /* for moz */ scrollbar-color: #353535 #555; - scrollbarWidth: .5em; + scrollbarWidth: $width; } &::-webkit-scrollbar-track { - border-radius: .25em; + border-radius: $width / 2; background-color: transparent; cursor: pointer; } &::-webkit-scrollbar { - width: .5em; - height: .5em; + width: $width; + height: $width; background-color: transparent; cursor: pointer; } &::-webkit-scrollbar-thumb { - border-radius: .25em; + border-radius: $width / 2; background-color: #555; } diff --git a/shared/css/static/modal-bookmarks.scss b/shared/css/static/modal-bookmarks.scss deleted file mode 100644 index fc341e00..00000000 --- a/shared/css/static/modal-bookmarks.scss +++ /dev/null @@ -1,498 +0,0 @@ -@import "properties"; -@import "mixin"; - -.modal .modal-bookmark-create { - .property { - margin-top: 5px; - - display: flex; - flex-direction: row; - justify-content: stretch; - - .key { - flex-grow: 0; - flex-shrink: 0; - - width: 150px; - } - - select, input { - flex-grow: 1; - flex-shrink: 1; - } - } - - .buttons { - text-align: right; - - button { - min-width: 200px; - } - - margin-bottom: 5px; - } -} - -.modal-body.modal-bookmarks { - padding: 0!important; - - display: flex!important; - flex-direction: row!important; - justify-content: stretch!important; - - min-width: 30em!important; - height: 45em; - width: 80em; - - @include user-select(none); - - .container-tooltip { - flex-shrink: 0; - flex-grow: 0; - - position: relative; - width: 1.6em; - margin-left: .5em; - font-size: .9em; - - display: flex; - flex-direction: column; - justify-content: center; - - img { - height: 1em; - width: 1em; - - align-self: center; - font-size: 1.2em; - } - - .tooltip { - display: none; - } - } - - .input-boxed { - height: 2em; - } - - .left { - min-width: 12em; - width: 30%; - - flex-grow: 1; - flex-shrink: 1; - - padding: .5em; - background-color: #212125; - - display: flex; - flex-direction: column; - justify-content: stretch; - - .title { - flex-shrink: 0; - flex-grow: 0; - - text-align: center; - - font-size: 1.5em; - color: #557edc; - text-transform: uppercase; - - @include text-dotdotdot(); - } - - .container-bookmarks { - flex-shrink: 1; - flex-grow: 1; - - min-height: 6em; - - display: flex; - flex-direction: column; - justify-content: stretch; - - overflow: auto; - @include chat-scrollbar-vertical(); - @include chat-scrollbar-horizontal(); - - .bookmark, .directory { - flex-grow: 0; - flex-shrink: 0; - - display: flex; - flex-direction: row; - justify-content: stretch; - - border-radius: $border_radius_middle; - padding: .25em .5em; - - cursor: pointer; - - .icon-container { - flex-grow: 0; - flex-shrink: 0; - - align-self: center; - margin-right: .5em; - } - - .name { - flex-grow: 1; - flex-shrink: 1; - - min-width: 5em; - align-self: center; - - @include text-dotdotdot(); - } - - &:hover { - background-color: #2c2d2f; - } - - &.selected { - background-color: #1a1a1b; - } - - .link { - flex-grow: 0; - flex-shrink: 0; - - position: relative; - width: 1.5em; - - $line_width: 2px; - $color: hsla(0, 0%, 35%, 1); - &:not(.hidden) { - &:before { - content: ""; - position: absolute; - - height: 2.25em; /* connect with the previous one */ - width: .75em; - - left: .5em; /* icons have a width of 1em */ - bottom: calc(.75em - #{$line_width / 2}); - - border-left: $line_width solid $color; - } - - &.connected { - &:before { - border-bottom: $line_width solid $color; - - border-bottom-left-radius: .3em; - } - } - } - } - } - - .link-start { - .link.connected { - &:before { - height: 1.25em; - } - } - } - - .directory { - .name { - //color: #557edc; - } - } - } - - .buttons { - flex-shrink: 0; - flex-grow: 0; - - display: flex; - flex-direction: row; - justify-content: space-between; - - padding-top: .5em; - - button { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &:not(:first-of-type) { - margin-left: .5em; - } - } - } - } - - .right { - min-width: 25em; - width: 30%; - - flex-grow: 1; - flex-shrink: 1; - - background-color: #2f2f35; - - display: flex; - flex-direction: column; - justify-content: flex-start; - - .header { - flex-grow: 0; - flex-shrink: 0; - - height: 10em; - - background: url('../../../img/bookmark_background.png'), url('../../img/bookmark_background.png'), url('img/bookmark_background.png') no-repeat; - - display: flex; - flex-direction: column; - justify-content: flex-end; - - padding: .5em; - - .container-name { - font-size: 2em; - color: #fcfcfc; - - @include text-dotdotdot(); - } - - .container-address { - font-size: 1.5em; - color: #fcfcfc; - - @include text-dotdotdot(); - } - } - - .container-settings { - flex-grow: 1; - flex-shrink: 1; - min-height: 10em; - - padding: .5em; - - display: flex; - flex-direction: column; - justify-content: flex-start; - - overflow-y: auto; - overflow-x: hidden; - @include chat-scrollbar-vertical(); - - .group { - padding: .5em; - - border-radius: .2em; - border: 1px solid #1f2122; - - background-color: #28292b; - - display: flex; - flex-direction: column; - justify-content: flex-start; - - > .row { - display: flex; - flex-direction: row; - justify-content: stretch; - - .key { - flex-grow: 0; - flex-shrink: 1; - - width: 15em; - min-width: 2em; - - align-self: center; - - color: #557edc; - - text-transform: uppercase; - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - .value { - flex-grow: 1; - flex-shrink: 1; - - min-width: 2em; - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - - &:not(:first-of-type) { - margin-top: 1em; - } - } - - &:not(:first-of-type) { - margin-top: 1em; - } - - &.info { - flex-direction: row; - } - - .container-image { - flex-grow: 1; - flex-shrink: 1; - - max-width: 15em; - max-height: 9em; /* minus one padding */ - width: 15em; - - display: flex; - flex-direction: column; - justify-content: center; - - img { - object-fit: contain; - max-height: 100%; - max-width: 100%; - } - - @include transition(.25s ease-in-out); - } - - .container-properties { - flex-shrink: 1; - flex-grow: 1; - - min-width: 23em; - - display: flex; - flex-direction: column; - justify-content: flex-start; - - height: inherit; - - .row { - flex-grow: 0; - flex-shrink: 0; - - height: 1.8em; - - display: flex; - flex-direction: row; - justify-content: flex-start; - - .key { - flex-shrink: 0; - flex-grow: 0; - - color: #557edc; - text-transform: uppercase; - align-self: center; - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - width: 15em; - } - - .value { - color: #d6d6d7; - align-self: center; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &.server-region { - > div { - display: inline-block; - } - - .country { - margin-right: .25em; - } - } - - .connect-count, .connect-never { - display: inline-block; - - color: #7a3131; - } - } - } - - .container-network { - display: flex; - flex-direction: row; - justify-content: center; - - .container-button { - margin-right: 1em; - - flex-shrink: 1; - min-width: 5em; - - display: flex; - flex-direction: column; - justify-content: flex-end; - - button { - height: 2.5em; - width: 12em; - - max-width: 100%; - - @include text-dotdotdot(); - } - } - - .right { - flex-grow: 1; - } - } - } - } - } - - .buttons { - padding: .5em; - display: flex; - flex-direction: row; - justify-content: flex-start; - - .button-duplicate { - margin-right: auto; - } - - button { - flex-shrink: 1; - flex-grow: 1; - - min-width: 2em; - - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - - &:not(:first-of-type) { - margin-left: .5em; - } - } - } - } -} - - -@media all and (max-width: 50em) { - .modal-body.modal-bookmarks { - .container-image { - margin: 0!important; - max-width: 0!important; - } - } -} \ No newline at end of file diff --git a/shared/html/templates.html b/shared/html/templates.html index e15a1694..35f5d824 100644 --- a/shared/html/templates.html +++ b/shared/html/templates.html @@ -2035,173 +2035,6 @@ - -