From 002ffde779d66a7a376e1ce6694c427985df2b30 Mon Sep 17 00:00:00 2001 From: Jason Henriquez Date: Thu, 26 Oct 2023 22:59:31 -0500 Subject: [PATCH] Implements remaining styling and logic --- .../ft-subscribe-button.css | 133 ---------------- .../ft-subscribe-button.js | 18 ++- .../ft-subscribe-button.scss | 146 ++++++++++++++++++ .../ft-subscribe-button.vue | 82 +++++----- src/renderer/views/Channel/Channel.css | 1 + 5 files changed, 203 insertions(+), 177 deletions(-) delete mode 100644 src/renderer/components/ft-subscribe-button/ft-subscribe-button.css create mode 100644 src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css deleted file mode 100644 index 33d78fd8522ca..0000000000000 --- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.css +++ /dev/null @@ -1,133 +0,0 @@ -.buttonList { - margin: 5px; - margin-block-end: 10px; - border-radius: 4px; - block-size: fit-content; - box-shadow: 0px 1px 2px rgb(0 0 0 / 50%); - display: flex; - flex-wrap: nowrap; - /* addresses odd clipping behavior when adjusting window size*/ - background-color: var(--primary-color); -} - -/* Ensures style here overrides style of .btn */ -.subscribeButton.btn { - min-inline-size: 150px; - white-space: initial; -} - -.subscribeButton.btn, .profileDropdownToggle.btn { - align-self: center; - margin-block: 0; - margin-inline: 0; -} - -.hasProfileDropdownToggle > .subscribeButton.btn { - min-inline-size: 100px; - padding-inline: 5px; - border-inline-end: 2px solid var(--primary-color-active) !important; - border-start-end-radius: 0; - border-end-end-radius: 0; - box-sizing: content-box; -} - -.hasProfileDropdownToggle > .subscribeButton.btn, .profileDropdownToggle.btn { - padding-block: 5px; - padding-inline: 6px; - box-shadow: none; - flex: auto; - block-size: 2em; -} - -.profileDropdown .profile { - cursor: pointer; - display: flex; - gap: 0.5em; - padding-inline-start: 0.5em; - block-size: 50px; - align-items: center; - -webkit-transition: background 0.2s ease-out; - -moz-transition: background 0.2s ease-out; - -o-transition: background 0.2s ease-out; - transition: background 0.2s ease-out; -} - -.profileDropdown .profile:hover { -} - -.profileDropdownToggle.btn { - border-inline-start: none !important; - border-start-start-radius: 0; - border-end-start-radius: 0; - display: inline-block; - min-inline-size: 1em; - padding-inline: 10px; - box-sizing: content-box; -} - -.profileDropdown { - background-color: var(--side-nav-color); - box-shadow: 0 1px 2px rgb(0 0 0 / 50%); - color: var(--secondary-text-color); - display: inline; - font-size: 12px; - max-block-size: 200px; - inline-size: 150px; - padding-inline: 0; - margin-block: 0; - overflow-y: scroll; - list-style-type: none; - position: absolute; - text-align: center; - -webkit-user-select: none; - user-select: none; - z-index: 3; -} - -.profileDropdown .colorOption { - inline-size: 40px; - block-size: 40px; - cursor: pointer; - align-items: center; - display: flex; - justify-content: center; - flex-shrink: 0; - border-radius: 50%; - -webkit-border-radius: 50%; -} - -.profileDropdown .initial { - font-size: 20px; - line-height: 1em; - text-align: center; - user-select: none; - -webkit-user-select: none; -} - -/* .profileDropdown .profileList { - display: inline; - position: absolute; - inset-block-start: 60px; - inset-inline-end: 10px; - min-inline-size: 250px; - block-size: 400px; - padding: 5px; - background-color: var(--card-bg-color); - box-shadow: 0 0 4px var(--scrollbar-color-hover); -} */ - -.profileDropdown .profileName { - inline-size: 100%; - padding-inline-end: 1em; - text-align: start; - overflow: hidden; - text-overflow: ellipsis; -} - -.profileDropdown .subscribed { - background-color: lightgreen; -} - -.profileDropdown .unsubscribed { - background-color: lightgray -} diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js index 6940442281a83..aff9a9a71b29f 100644 --- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js +++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.js @@ -42,7 +42,7 @@ export default defineComponent({ }, computed: { profileInitials: function () { - return this.profileList.map((profile) => { + return this.profileDisplayList.map((profile) => { return profile?.name?.length > 0 ? Array.from(profile.name)[0].toUpperCase() : '' }) }, @@ -51,15 +51,19 @@ export default defineComponent({ return this.$store.getters.getProfileList }, + /* sort by 'All Channels' -> active profile -> unsubscribed channels -> unsubscribed channels */ profileDisplayList: function () { - if (this.activeProfile._id === MAIN_PROFILE_ID) { - return this.profileList + const mainProfileAndActiveProfile = [this.profileList[0]] + if (this.activeProfile._id !== MAIN_PROFILE_ID) { + mainProfileAndActiveProfile.push(this.activeProfile) } return [ - this.profileList[0], - this.activeProfile, - ...this.profileList.filter((profile, i) => i !== 0 && !this.isActiveProfile(profile)) + ...mainProfileAndActiveProfile, + ...this.profileList.filter((profile, i) => + i !== 0 && !this.isActiveProfile(profile) && !this.isProfileSubscribed(profile)), + ...this.profileList.filter((profile, i) => + i !== 0 && !this.isActiveProfile(profile) && this.isProfileSubscribed(profile)) ] }, @@ -154,7 +158,7 @@ export default defineComponent({ }, handleProfileDropdownFocusOut: function () { - if (!this.$refs.profileDropdown.matches(':focus-within')) { + if (!this.$refs.subscribeButton.matches(':focus-within')) { this.isProfileDropdownOpen = false } }, diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss new file mode 100644 index 0000000000000..0a61d4d500d83 --- /dev/null +++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.scss @@ -0,0 +1,146 @@ +.buttonList { + margin: 5px; + margin-block-end: 10px; + border-radius: 4px; + block-size: fit-content; + box-shadow: 0px 1px 2px rgb(0 0 0 / 50%); + display: flex; + flex-wrap: nowrap; + /* addresses odd clipping behavior when adjusting window size*/ + background-color: var(--primary-color); +} + +.ftSubscribeButton { + position: relative; + text-align: start; +} + +/* Ensures style here overrides style of .btn */ +.subscribeButton.btn { + min-inline-size: 150px; + white-space: initial; +} + +.subscribeButton.btn, .profileDropdownToggle.btn { + align-self: center; + margin-block: 0; + margin-inline: 0; +} + +.dropdownOpened { + .subscribeButton, .profileDropdownToggle { + border-end-start-radius: 0; + border-end-end-radius: 0; + } +} + +.profileDropdownToggle.btn { + border-inline-start: none !important; + border-start-start-radius: 0; + border-end-start-radius: 0; + display: inline-block; + min-inline-size: 1em; + padding-inline: 10px; + box-sizing: content-box; +} + +.hasProfileDropdownToggle { + .subscribeButton.btn { + min-inline-size: 100px; + padding-inline: 5px; + border-inline-end: 2px solid var(--primary-color-active) !important; + border-start-end-radius: 0; + border-end-end-radius: 0; + box-sizing: content-box; + } +} + +.hasProfileDropdownToggle > .subscribeButton.btn, .profileDropdownToggle.btn { + padding-block: 5px; + padding-inline: 6px; + box-shadow: none; + flex: auto; + block-size: 2em; +} + +.profileDropdown { + background-color: var(--side-nav-color); + box-shadow: 0 1px 2px rgb(0 0 0 / 50%); + color: var(--secondary-text-color); + display: inline; + font-size: 12px; + max-block-size: 200px; + margin-block: -10px 0; + margin-inline: 5px 0; + overflow-y: scroll; + position: absolute; + text-align: center; + -webkit-user-select: none; + user-select: none; + z-index: 3; + // accounts for parent's left and right margins + inline-size: calc(100% - 10px); + + .profileList { + list-style-type: none; + margin: 0; + padding-inline: 0; + } + + .profile { + cursor: pointer; + display: flex; + gap: 0.5em; + padding-inline-start: 0.5em; + block-size: 50px; + align-items: center; + -webkit-transition: background 0.2s ease-out; + -moz-transition: background 0.2s ease-out; + -o-transition: background 0.2s ease-out; + transition: background 0.2s ease-out; + + &:hover { + background-color: var(--side-nav-hover-color); + color: var(--side-nav-hover-text-color); + -moz-transition: background 0.2s ease-in; + -o-transition: background 0.2s ease-in; + transition: background 0.2s ease-in; + } + + .colorOption { + inline-size: 40px; + block-size: 40px; + cursor: pointer; + align-items: center; + display: flex; + justify-content: center; + flex-shrink: 0; + border-radius: 50%; + -webkit-border-radius: 50%; + } + + .initial { + font-size: 20px; + line-height: 1em; + text-align: center; + user-select: none; + -webkit-user-select: none; + } + + .profileName { + padding-inline-end: 1em; + text-align: start; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + &.subscribed { + background-color: var(--primary-color); + + .profileName { + color: var(--text-with-main-color); + } + } + } +} diff --git a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue index 3587aa141d7e3..1767123a78309 100644 --- a/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue +++ b/src/renderer/components/ft-subscribe-button/ft-subscribe-button.vue @@ -1,5 +1,10 @@