diff --git a/appicon.png b/appicon.png index 08c1920..eead9b9 100644 Binary files a/appicon.png and b/appicon.png differ diff --git a/appicon.psd b/appicon.psd index 6d91811..8457258 100644 Binary files a/appicon.psd and b/appicon.psd differ diff --git a/documentation/img/surge1.png b/documentation/img/surge1.png index efe0c15..2d99790 100644 Binary files a/documentation/img/surge1.png and b/documentation/img/surge1.png differ diff --git a/documentation/img/surge2.png b/documentation/img/surge2.png index a576aa2..1089441 100644 Binary files a/documentation/img/surge2.png and b/documentation/img/surge2.png differ diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 98d82de..1f6e602 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -30,7 +30,6 @@ "vue-filter-pretty-bytes": "^0.1.5", "vue-lodash": "^2.1.2", "vue-moment": "^4.1.0", - "vue-range-component": "^1.0.3", "vue-router": "^3.3.4", "vue-slider-component": "^3.2.15", "vue-tour": "^1.5.0", @@ -15614,11 +15613,6 @@ "vue": "*" } }, - "node_modules/vue-range-component": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/vue-range-component/-/vue-range-component-1.0.3.tgz", - "integrity": "sha512-J/rE7KJa61XsLXREvSw0Ia+dSTaLoP5Ou7NfOy5pm/1FMgYn7E14iQj7baA8H4ZxoIuKuCfrhjWglPHtWUPGmg==" - }, "node_modules/vue-resize": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz", @@ -29390,11 +29384,6 @@ "vue-class-component": "^7.1.0" } }, - "vue-range-component": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/vue-range-component/-/vue-range-component-1.0.3.tgz", - "integrity": "sha512-J/rE7KJa61XsLXREvSw0Ia+dSTaLoP5Ou7NfOy5pm/1FMgYn7E14iQj7baA8H4ZxoIuKuCfrhjWglPHtWUPGmg==" - }, "vue-resize": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-1.0.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index c18e791..fdf0920 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -31,7 +31,6 @@ "vue-filter-pretty-bytes": "^0.1.5", "vue-lodash": "^2.1.2", "vue-moment": "^4.1.0", - "vue-range-component": "^1.0.3", "vue-router": "^3.3.4", "vue-slider-component": "^3.2.15", "vue-tour": "^1.5.0", diff --git a/frontend/src/assets/icons/TablePlaceholderIcon.svg b/frontend/src/assets/icons/TablePlaceholderIcon.svg new file mode 100644 index 0000000..c46f8c1 --- /dev/null +++ b/frontend/src/assets/icons/TablePlaceholderIcon.svg @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/src/assets/scss/_main.scss b/frontend/src/assets/scss/_main.scss index a4a6c06..b21666a 100644 --- a/frontend/src/assets/scss/_main.scss +++ b/frontend/src/assets/scss/_main.scss @@ -27,6 +27,10 @@ body { -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; } + + input { + -webkit-user-select: text; + } } b { @@ -288,12 +292,7 @@ th { .table { &__row { &_active { - background: linear-gradient( - 0deg, - rgba(10, 151, 149, 0.2), - rgba(10, 151, 149, 0.2) - ), - #131416; + background: linear-gradient(0deg, rgba(10, 151, 149, 0.2), rgba(10, 151, 149, 0.2)), #131416; background-blend-mode: normal; td { diff --git a/frontend/src/assets/scss/_variables.scss b/frontend/src/assets/scss/_variables.scss index 048c56e..066ca1c 100644 --- a/frontend/src/assets/scss/_variables.scss +++ b/frontend/src/assets/scss/_variables.scss @@ -29,6 +29,7 @@ $grey-light: #7e8084; $grey-dark: #28282d; $red: #eb5757; $danger: #ff3d48; +$success: #48ff9c; $black-light: rgba(255, 255, 255, 0.03); $text-white: rgba(255, 255, 255, 0.8); $modal-bg: rgba(33, 33, 35, 0.83); diff --git a/frontend/src/components/Button/Button.scss b/frontend/src/components/Button/Button.scss index d002a80..87c6bbd 100644 --- a/frontend/src/components/Button/Button.scss +++ b/frontend/src/components/Button/Button.scss @@ -33,7 +33,8 @@ &:disabled { color: rgba($white, 0.2) !important; cursor: not-allowed !important; - pointer-events: none; + background: initial !important; + border: 1px solid transparent !important; } &_size { @@ -105,5 +106,23 @@ border: $border-primary; } } + + &_transparent { + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.2); + color: $white; + + svg { + path { + stroke: $white; + } + } + + &:hover { + color: $white; + background: $primary; + border: $border-primary; + } + } } } diff --git a/frontend/src/components/Controls/Switcher/Switcher.scss b/frontend/src/components/Controls/Switcher/Switcher.scss deleted file mode 100644 index 632704f..0000000 --- a/frontend/src/components/Controls/Switcher/Switcher.scss +++ /dev/null @@ -1,52 +0,0 @@ -.switch { - position: relative; - height: 30px; - width: 56px; - - &__control { - width: 100%; - height: 100%; - opacity: 0; - z-index: 3; - cursor: pointer; - box-sizing: border-box; - position: absolute; - top: 0; - left: 0; - - &:checked ~ .switch__container { - background: $primary; - border: 1px solid $primary; - transition: $transition-1; - } - - &:checked ~ .switch__label { - transform: translate(24px); - transition: $transition-1; - } - } - - &__label { - background: white; - border-radius: 40px; - display: block; - height: 26px; - margin-left: 4px; - margin-top: 3px; - position: relative; - transition: $transition-1; - width: 26px; - z-index: 2; - } - - &__container { - background: #bdc3c7; - border-radius: 40px; - border: 1px solid #bdc3c7; - height: 100%; - position: absolute; - top: 0; - left: 0; - width: 100%; - } -} diff --git a/frontend/src/components/Controls/Switcher/Switcher.vue b/frontend/src/components/Controls/Switcher/Switcher.vue deleted file mode 100644 index a9c3797..0000000 --- a/frontend/src/components/Controls/Switcher/Switcher.vue +++ /dev/null @@ -1,45 +0,0 @@ - - - - - diff --git a/frontend/src/components/Dashboard/Dashboard.vue b/frontend/src/components/Dashboard/Dashboard.vue index 79dbe4d..9f70317 100644 --- a/frontend/src/components/Dashboard/Dashboard.vue +++ b/frontend/src/components/Dashboard/Dashboard.vue @@ -12,6 +12,7 @@ + @@ -28,6 +29,7 @@ import AddTopicModal from "@/components/Modals/AddTopicModal/AddTopicModal"; import AddFileModal from "@/components/Modals/AddFileModal/AddFileModal"; import RemoveFileModal from "@/components/Modals/RemoveFileModal/RemoveFileModal"; import SettingsModal from "@/components/Modals/SettingsModal/SettingsModal"; +import UnsubscribeTopicModal from "@/components/Modals/UnsubscribeTopicModal/UnsubscribeTopicModal"; export default { components: { @@ -37,6 +39,7 @@ export default { AddFileModal, RemoveFileModal, SettingsModal, + UnsubscribeTopicModal, }, data: () => { return {}; diff --git a/frontend/src/components/File/FileAvatar/FileAvatar.scss b/frontend/src/components/File/FileAvatar/FileAvatar.scss deleted file mode 100644 index 94e9c7b..0000000 --- a/frontend/src/components/File/FileAvatar/FileAvatar.scss +++ /dev/null @@ -1,24 +0,0 @@ -.file-avatar { - canvas { - border-radius: 100%; - } - - &_type { - &_big { - canvas { - height: 130px; - width: 130px; - } - } - - &_small { - canvas { - position: absolute; - left: -4px; - top: -4px; - height: 32px; - width: 32px; - } - } - } -} diff --git a/frontend/src/components/File/FileAvatar/FileAvatar.vue b/frontend/src/components/File/FileAvatar/FileAvatar.vue deleted file mode 100644 index 33a3f29..0000000 --- a/frontend/src/components/File/FileAvatar/FileAvatar.vue +++ /dev/null @@ -1,55 +0,0 @@ - - - - - diff --git a/frontend/src/components/File/FileCard/FileCard.scss b/frontend/src/components/File/FileCard/FileCard.scss deleted file mode 100644 index 88e9916..0000000 --- a/frontend/src/components/File/FileCard/FileCard.scss +++ /dev/null @@ -1,51 +0,0 @@ -.file-card { - height: 220px; - border-radius: 18px; - padding: $padding-lg $padding-default $padding-normal $padding-default; - display: flex; - flex-direction: column; - justify-content: space-between; - cursor: pointer; - transition: $transition-1; - - &:hover { - transform: translateY(-5px); - } - - &__header { - display: flex; - align-items: center; - justify-content: space-between; - } - - &__icon { - flex: 0 0 16px; - color: white; - height: 16px; - opacity: 0.8; - } - - &__size { - border-radius: 12px; - background: rgba($color: $text-dark, $alpha: 0.7); - padding: $padding-micro; - display: flex; - align-items: center; - justify-content: center; - color: white; - font-size: $fz-xs; - } - - &__footer { - color: white; - } - - &__title { - margin-bottom: $padding-micro; - font-size: $fz-md; - } - - &__progress { - font-size: $fz-xs; - } -} diff --git a/frontend/src/components/File/FileCard/FileCard.vue b/frontend/src/components/File/FileCard/FileCard.vue deleted file mode 100644 index 8891087..0000000 --- a/frontend/src/components/File/FileCard/FileCard.vue +++ /dev/null @@ -1,69 +0,0 @@ - - - - - diff --git a/frontend/src/components/File/FileHash/FileHash.scss b/frontend/src/components/File/FileHash/FileHash.scss index 7c5cfb5..ccf61c3 100644 --- a/frontend/src/components/File/FileHash/FileHash.scss +++ b/frontend/src/components/File/FileHash/FileHash.scss @@ -5,31 +5,17 @@ display: flex; align-items: center; - &:after { - position: absolute; - top: -2px; - left: 0; - display: inline-block; - color: $primary; - white-space: nowrap; - text-align: center; - transform: translate3d(-50%, 0, 0); - -webkit-backface-visibility: hidden; - opacity: 0.001; - content: attr(data-label); - font-size: $fz-sm; - } - &_active { - &:after { - animation: floatup 0.5s ease-in-out; + .file-hash__icon { + path, + circle { + stroke: $primary !important; + } } } &:hover & { &__icon { - transform: translateX(5px); - path, circle { stroke: $white; diff --git a/frontend/src/components/File/FileHash/FileHash.vue b/frontend/src/components/File/FileHash/FileHash.vue index 7d194f1..930afbd 100644 --- a/frontend/src/components/File/FileHash/FileHash.vue +++ b/frontend/src/components/File/FileHash/FileHash.vue @@ -38,7 +38,10 @@ export default { }, methods: { onCopy() { - this.copied = !this.copied; + this.copied = true; + this._.delay(() => { + this.copied = false; + }, 200); }, }, }; diff --git a/frontend/src/components/File/FileName/FileName.scss b/frontend/src/components/File/FileName/FileName.scss index 03d7266..8f09ce8 100644 --- a/frontend/src/components/File/FileName/FileName.scss +++ b/frontend/src/components/File/FileName/FileName.scss @@ -3,13 +3,10 @@ align-items: center; width: 100%; - &__title { - width: 285px; - } - &__icon { height: 20px; width: 20px; margin-right: $padding-md; + flex-shrink: 0; } } diff --git a/frontend/src/components/File/FileSeeders/FileSeeders.scss b/frontend/src/components/File/FileSeeders/FileSeeders.scss deleted file mode 100644 index 5db01c7..0000000 --- a/frontend/src/components/File/FileSeeders/FileSeeders.scss +++ /dev/null @@ -1,36 +0,0 @@ -.file-seeders { - display: flex; - align-items: center; - width: 160px; - - &__icon { - position: absolute; - left: 0; - top: 0; - } - - &__item { - height: 32px; - width: 32px; - border-radius: 100%; - border: 2px solid; - border-color: $dark-light; - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: center; - cursor: default; - position: relative; - overflow: hidden; - - &:not(:first-child) { - margin-left: -10px; - } - - &_more { - font-size: $fz-xs; - font-weight: $fw-semi-bold; - background: $dark-light; - } - } -} diff --git a/frontend/src/components/File/FileSeeders/FileSeeders.vue b/frontend/src/components/File/FileSeeders/FileSeeders.vue deleted file mode 100644 index 26ade5a..0000000 --- a/frontend/src/components/File/FileSeeders/FileSeeders.vue +++ /dev/null @@ -1,56 +0,0 @@ - - - - - diff --git a/frontend/src/components/File/FileSharedBadge/FileSharedBadge.scss b/frontend/src/components/File/FileSharedBadge/FileSharedBadge.scss deleted file mode 100644 index ccc56f4..0000000 --- a/frontend/src/components/File/FileSharedBadge/FileSharedBadge.scss +++ /dev/null @@ -1,23 +0,0 @@ -.file-shared-badge { - height: 24px; - width: 54px; - font-weight: bold; - border-radius: 4px; - margin-left: $padding-micro; - display: flex; - align-items: center; - justify-content: center; - font-size: $fz-xs; - - &_theme { - &_default { - background: rgba($secondary, 0.2); - color: $secondary; - } - - &_good { - background: rgba($primary, 0.2); - color: $primary; - } - } -} diff --git a/frontend/src/components/File/FileSharedBadge/FileSharedBadge.vue b/frontend/src/components/File/FileSharedBadge/FileSharedBadge.vue deleted file mode 100644 index 375b7c4..0000000 --- a/frontend/src/components/File/FileSharedBadge/FileSharedBadge.vue +++ /dev/null @@ -1,32 +0,0 @@ - - - - - diff --git a/frontend/src/components/File/RecentFiles/RecentFiles.scss b/frontend/src/components/File/RecentFiles/RecentFiles.scss deleted file mode 100644 index 4b7538a..0000000 --- a/frontend/src/components/File/RecentFiles/RecentFiles.scss +++ /dev/null @@ -1,6 +0,0 @@ -.recent { - display: grid; - grid-gap: 20px; - grid-template-columns: repeat(4, minmax(0, 1fr)); - grid-template-rows: 1fr; -} diff --git a/frontend/src/components/File/RecentFiles/RecentFiles.vue b/frontend/src/components/File/RecentFiles/RecentFiles.vue deleted file mode 100644 index ee2a130..0000000 --- a/frontend/src/components/File/RecentFiles/RecentFiles.vue +++ /dev/null @@ -1,32 +0,0 @@ - - - - - diff --git a/frontend/src/components/Modals/AddFileModal/AddFileModal.vue b/frontend/src/components/Modals/AddFileModal/AddFileModal.vue index f99fc15..b59811a 100644 --- a/frontend/src/components/Modals/AddFileModal/AddFileModal.vue +++ b/frontend/src/components/Modals/AddFileModal/AddFileModal.vue @@ -2,11 +2,11 @@ @@ -46,6 +46,12 @@ export default { disabled() { return !this.topicName.length; }, + allowedTopics() { + return this._.map( + this._.filter(this.topics, ["Permissions.CanWrite", true]), + "Name" + ); + }, }, mounted() {}, methods: { diff --git a/frontend/src/components/Modals/AddTopicModal/AddTopicModal.vue b/frontend/src/components/Modals/AddTopicModal/AddTopicModal.vue index 2c34946..5efaaa2 100644 --- a/frontend/src/components/Modals/AddTopicModal/AddTopicModal.vue +++ b/frontend/src/components/Modals/AddTopicModal/AddTopicModal.vue @@ -1,6 +1,6 @@ - - diff --git a/frontend/src/components/Modals/StartDownloadModal/StartDownloadModal.scss b/frontend/src/components/Modals/UnsubscribeTopicModal/UnsubscribeTopicModal.scss similarity index 100% rename from frontend/src/components/Modals/StartDownloadModal/StartDownloadModal.scss rename to frontend/src/components/Modals/UnsubscribeTopicModal/UnsubscribeTopicModal.scss diff --git a/frontend/src/components/Modals/UnsubscribeTopicModal/UnsubscribeTopicModal.vue b/frontend/src/components/Modals/UnsubscribeTopicModal/UnsubscribeTopicModal.vue new file mode 100644 index 0000000..2fe3848 --- /dev/null +++ b/frontend/src/components/Modals/UnsubscribeTopicModal/UnsubscribeTopicModal.vue @@ -0,0 +1,60 @@ + + + diff --git a/frontend/src/components/Navigation/Navigation.vue b/frontend/src/components/Navigation/Navigation.vue index 89fc93b..122c683 100644 --- a/frontend/src/components/Navigation/Navigation.vue +++ b/frontend/src/components/Navigation/Navigation.vue @@ -31,7 +31,7 @@ export default { icon: "TransfersIcon", }, { - text: "Discover", + text: "Channels", route: "discover", icon: "DiscoverIcon", }, diff --git a/frontend/src/components/Pagination/Pagination.scss b/frontend/src/components/Pagination/Pagination.scss deleted file mode 100644 index 5b7b885..0000000 --- a/frontend/src/components/Pagination/Pagination.scss +++ /dev/null @@ -1,54 +0,0 @@ -.pagination { - width: 100%; - margin-top: $padding-normal; - - &__descr { - text-align: center; - margin-bottom: $padding-micro; - font-size: $fz-md; - } - - &__controls { - display: flex; - align-items: center; - justify-content: center; - width: 100%; - } - - &__button { - cursor: pointer; - height: 24px; - width: 24px; - transition: $transition-1; - - &_active { - color: $grey; - cursor: pointer; - - @include dark-theme { - color: white; - } - - &:hover { - color: $primary; - } - - &:active { - color: $primary-dark; - } - } - - &_inactive { - color: $grey-light; - cursor: not-allowed; - - @include dark-theme { - color: color(dark, text-light); - } - } - - &:first-child { - margin-right: $padding-default; - } - } -} diff --git a/frontend/src/components/Pagination/Pagination.vue b/frontend/src/components/Pagination/Pagination.vue deleted file mode 100644 index 29a2294..0000000 --- a/frontend/src/components/Pagination/Pagination.vue +++ /dev/null @@ -1,115 +0,0 @@ - - - - - diff --git a/frontend/src/components/Preloader/Preloader.scss b/frontend/src/components/Preloader/Preloader.scss deleted file mode 100644 index 8b3bed9..0000000 --- a/frontend/src/components/Preloader/Preloader.scss +++ /dev/null @@ -1,22 +0,0 @@ -.preloader { - height: calc(100% - 72px); - width: 100%; - display: flex; - align-items: center; - justify-content: center; - - &__logo { - animation: Spin 3s linear infinite; - height: 80%; - - g { - fill: $primary; - } - } -} - -@keyframes Spin { - 100% { - transform: rotate(360deg); - } -} diff --git a/frontend/src/components/Preloader/Preloader.vue b/frontend/src/components/Preloader/Preloader.vue deleted file mode 100644 index f5460d6..0000000 --- a/frontend/src/components/Preloader/Preloader.vue +++ /dev/null @@ -1,21 +0,0 @@ - - - - - diff --git a/frontend/src/components/Settings/Settings.scss b/frontend/src/components/Settings/Settings.scss deleted file mode 100644 index 2596af1..0000000 --- a/frontend/src/components/Settings/Settings.scss +++ /dev/null @@ -1,113 +0,0 @@ -.settings { - position: relative; - - &__avatar { - display: flex; - justify-content: center; - margin-top: $padding-default; - } - - &__header { - padding: $padding-default; - display: flex; - align-items: center; - justify-content: space-between; - background: $grey-light; - border-top-right-radius: 18px; - border-top-left-radius: 18px; - - @include dark-theme { - background: color(dark, darkest); - } - - &-version { - margin-right: $padding-default; - } - - &-support { - color: $grey; - - @include dark-theme { - color: color(dark, text-light); - } - } - - &-link { - display: inline-block; - color: $primary; - text-decoration: none; - transition: $transition-1; - cursor: pointer; - - &:hover { - text-decoration: underline; - color: $primary-dark; - } - } - } - - &__item { - font-family: "Roboto"; - padding: $padding-normal 0; - margin: 0 auto; - max-width: 40%; - display: flex; - justify-content: space-between; - align-items: center; - position: relative; - min-width: 380px; - - &-switch { - position: absolute; - right: 0; - top: 18px; - } - - &-link { - display: inline-block; - text-transform: uppercase; - font-weight: bold; - color: $primary; - text-decoration: none; - transition: $transition-1; - cursor: pointer; - - &:hover { - color: $primary-dark; - } - } - - &:not(:last-child) { - border-bottom: 1px solid #dfdfdf; - - @include dark-theme { - border-color: color(dark, text-light); - } - } - - &-left { - display: flex; - align-items: center; - } - - &-icon { - height: 20px; - width: 20px; - color: $grey; - margin-right: $padding-default; - - @include dark-theme { - color: white; - } - } - - &-title { - text-transform: uppercase; - font-weight: bold; - - @include dark-theme { - color: color(dark, text-light); - } - } - } -} diff --git a/frontend/src/components/Settings/Settings.vue b/frontend/src/components/Settings/Settings.vue deleted file mode 100644 index b97d4bd..0000000 --- a/frontend/src/components/Settings/Settings.vue +++ /dev/null @@ -1,125 +0,0 @@ - - - - - diff --git a/frontend/src/components/Sidebar/Sidebar.scss b/frontend/src/components/Sidebar/Sidebar.scss index 4094221..d5b96fd 100644 --- a/frontend/src/components/Sidebar/Sidebar.scss +++ b/frontend/src/components/Sidebar/Sidebar.scss @@ -118,7 +118,7 @@ &::before { content: ""; display: block; - background: $red; + background: $success; height: 8px; width: 8px; border-radius: 100%; diff --git a/frontend/src/components/Sidebar/Sidebar.vue b/frontend/src/components/Sidebar/Sidebar.vue index 5243ba9..5bbd32c 100644 --- a/frontend/src/components/Sidebar/Sidebar.vue +++ b/frontend/src/components/Sidebar/Sidebar.vue @@ -2,15 +2,16 @@