From 6a9e33401c798a24b823c2e5ed243dfc47b0c5a4 Mon Sep 17 00:00:00 2001 From: supertiger1234 Date: Wed, 9 Oct 2019 14:44:10 +0100 Subject: [PATCH] changed tab design and more --- src/components/ElectronJS/FrameButtons.vue | 6 ++--- src/components/app/MembersList.vue | 2 +- src/components/app/MessagePanel.vue | 2 +- src/components/app/MessagePanel/Heading.vue | 13 +++------ src/components/app/Tabs/DirectMessage.vue | 2 +- src/components/app/Tabs/Servers.vue | 4 +-- src/utils/changelog.js | 13 ++++++++- src/views/App.vue | 30 ++++++++++----------- 8 files changed, 37 insertions(+), 35 deletions(-) diff --git a/src/components/ElectronJS/FrameButtons.vue b/src/components/ElectronJS/FrameButtons.vue index 432b24e..537ad66 100644 --- a/src/components/ElectronJS/FrameButtons.vue +++ b/src/components/ElectronJS/FrameButtons.vue @@ -54,7 +54,7 @@ export default { right: 0; left: 0; z-index: 9999999999999999; - height: 30px; + height: 100%; -webkit-app-region: drag; justify-content: flex-end; } @@ -66,15 +66,13 @@ export default { display: flex; flex-shrink: 0; height: 100%; - width: 50px; + width: 60px; border-radius: 2px; - margin: 1px; color: white; align-items: center; justify-content: center; -webkit-app-region: no-drag; transition: 0.3s; - background: rgba(56, 56, 56, 0.247); } .frame-buttons .material-icons { display: block; diff --git a/src/components/app/MembersList.vue b/src/components/app/MembersList.vue index 79cc880..d1916d2 100644 --- a/src/components/app/MembersList.vue +++ b/src/components/app/MembersList.vue @@ -87,7 +87,7 @@ export default { height: 100%; } .header { - height: 40px; + height: 50px; width: 100%; background: rgba(0, 0, 0, 0.438); display: flex; diff --git a/src/components/app/MessagePanel.vue b/src/components/app/MessagePanel.vue index 218f710..483a50a 100644 --- a/src/components/app/MessagePanel.vue +++ b/src/components/app/MessagePanel.vue @@ -61,7 +61,7 @@ :recipients="typingRecipients[selectedChannelID]" /> -
{{messageLength}}/5000
diff --git a/src/components/app/MessagePanel/Heading.vue b/src/components/app/MessagePanel/Heading.vue index ea9df15..c298e2e 100644 --- a/src/components/app/MessagePanel/Heading.vue +++ b/src/components/app/MessagePanel/Heading.vue @@ -52,14 +52,7 @@ export default { const channel = this.$store.getters.channels[selectedChannel]; const presences = this.$store.getters["members/presences"]; - let status = 0; - if (!channel || !channel.recipients || !channel.recipients.length) { - status = 0; - } else if ( - this.$store.getters.user.friends[channel.recipients[0].uniqueID] - ) { - status = presences[channel.recipients[0].uniqueID] || 0; - } + let status = presences[channel.recipients[0].uniqueID] || 0; return statuses[status].color; } } @@ -70,7 +63,7 @@ export default { .heading { background: rgba(0, 0, 0, 0.185); margin-bottom: 0; - height: 40px; + height: 50px; display: flex; flex-shrink: 0; padding-left: 10px; @@ -82,6 +75,7 @@ export default { margin-top: 3px; user-select: none; display: none; + cursor: pointer; } .show-members-button { display: inline-block; @@ -90,6 +84,7 @@ export default { user-select: none; display: none; color: white; + cursor: pointer; } .show-menu-button .material-icons { color: rgb(207, 207, 207); diff --git a/src/components/app/Tabs/DirectMessage.vue b/src/components/app/Tabs/DirectMessage.vue index 1470868..d18967a 100644 --- a/src/components/app/Tabs/DirectMessage.vue +++ b/src/components/app/Tabs/DirectMessage.vue @@ -69,7 +69,7 @@ export default { position: absolute; background-color: rgba(39, 39, 39, 0.97); bottom: 0; - height: calc(100% - 40px); + height: calc(100% - 50px); z-index: 2; } } diff --git a/src/components/app/Tabs/Servers.vue b/src/components/app/Tabs/Servers.vue index 1353a7d..c8d3c4a 100644 --- a/src/components/app/Tabs/Servers.vue +++ b/src/components/app/Tabs/Servers.vue @@ -106,7 +106,7 @@ export default { background-color: rgba(39, 39, 39, 0.97); right: 0; bottom: 0; - height: calc(100% - 40px); + height: calc(100% - 50px); z-index: 1; } } @@ -116,7 +116,7 @@ export default { position: absolute; background-color: rgba(39, 39, 39, 0.97); bottom: 0; - height: calc(100% - 40px); + height: calc(100% - 50px); z-index: 2; } } diff --git a/src/utils/changelog.js b/src/utils/changelog.js index 6947ad2..99832c9 100644 --- a/src/utils/changelog.js +++ b/src/utils/changelog.js @@ -14,12 +14,23 @@ const config = [ + { + version: 7.5, + title: "GUI improvements", + shortTitle: "", + date: "09/10/2019", + headColor: "rgba(25, 130, 255, 0.77)", + new: [ + 'Design changes to some elements such as the tabs, Window controls and more.', + ], + fix: ['Fixed a bug where presence status would not show properly in the header.'], + msg: 'I just want to say thanks to everyone who gave me feedback, it helps a lot! 😉 Native mobile app is coming soon!' + }, { version: 7.4, title: "Send message permission, Improved performance", shortTitle: "", date: "03/10/2019", - headColor: "rgba(25, 130, 255, 0.77)", new: [ 'Added send message permission. You can use this to allow other people to not write in your channel such as the "rules" channel.', ], diff --git a/src/views/App.vue b/src/views/App.vue index 0cb1ace..5125675 100644 --- a/src/views/App.vue +++ b/src/views/App.vue @@ -303,32 +303,32 @@ export default { .tab { flex-shrink: 0; - margin: auto; - margin-right: 1px; - margin-left: 3px; margin-bottom: 0; - background: rgba(0, 0, 0, 0.63); - color: white; - padding: 7px; - border-top-right-radius: 5px; - border-top-left-radius: 5px; + background: rgba(0, 0, 0, 0.253); + color: rgba(255, 255, 255, 0.822); + padding: 10px; + padding-left: 14px; + padding-right: 14px; cursor: default; user-select: none; transition: 0.3s; -webkit-app-region: no-drag; - margin-top: 5px; cursor: pointer; position: relative; -} - -.tab.selected { - background: rgba(71, 71, 71, 0.637); + border-right:solid 1px rgba(0, 0, 0, 0.5); } .tab:hover { - background: rgba(71, 71, 71, 0.637); + background: rgba(0, 0, 0, 0.418); } +.tab.selected { + background: rgba(0, 0, 0, 0.671); + color: white; +} + + + .tab .material-icons { font-size: 15px; vertical-align: -2px; @@ -386,8 +386,6 @@ textarea { display: flex; overflow: auto; height: 100%; - border-top-left-radius: 5px; - border-top-right-radius: 5px; } input {