From 33d595f2396cbeeeea8d83394f7df48df499f64e Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Wed, 4 Apr 2018 21:45:19 -0700 Subject: [PATCH] add mention option to account profiles --- routes/_components/IconButton.html | 39 ++++++++++++++- .../dialog/AccountProfileOptionsDialog.html | 48 +++++++++++++++++++ routes/_components/dialog/dialogs.js | 1 + .../dialog/showAccountProfileOptionsDialog.js | 14 ++++++ .../profile/AccountProfileDetails.html | 22 +++++++++ scss/themes/_base.scss | 12 ++++- templates/2xx.html | 4 +- 7 files changed, 136 insertions(+), 4 deletions(-) create mode 100644 routes/_components/dialog/AccountProfileOptionsDialog.html create mode 100644 routes/_components/dialog/showAccountProfileOptionsDialog.js diff --git a/routes/_components/IconButton.html b/routes/_components/IconButton.html index cfc0ff62..af4ba926 100644 --- a/routes/_components/IconButton.html +++ b/routes/_components/IconButton.html @@ -28,6 +28,9 @@ padding: 6px 10px; background: none; border: none; + display: flex; + align-items: center; + justify-content: center; } .icon-button-svg { @@ -42,6 +45,10 @@ height: 32px; } + /* + * regular styles + */ + .icon-button:hover .icon-button-svg { fill: var(--action-button-fill-color-hover); } @@ -61,6 +68,35 @@ .icon-button.pressed:active .icon-button-svg { fill: var(--action-button-fill-color-pressed-active); } + + /* + * muted + */ + + .icon-button.muted-style .icon-button-svg { + fill: var(--action-button-deemphasized-fill-color); + } + + .icon-button.muted-style:hover .icon-button-svg { + fill: var(--action-button-deemphasized-fill-color-hover); + } + + .icon-button.muted-style.not-pressable:active .icon-button-svg { + fill: var(--action-button-deemphasized-fill-color-active); + } + + .icon-button.muted-style.pressed .icon-button-svg { + fill: var(--action-button-deemphasized-fill-color-pressed); + } + + .icon-button.muted-style.pressed:hover .icon-button-svg { + fill: var(--action-button-deemphasized-fill-color-pressed-hover); + } + + .icon-button.muted-style.pressed:active .icon-button-svg { + fill: var(--action-button-deemphasized-fill-color-pressed-active); + } + \ No newline at end of file diff --git a/routes/_components/dialog/dialogs.js b/routes/_components/dialog/dialogs.js index c26d99fa..691541e1 100644 --- a/routes/_components/dialog/dialogs.js +++ b/routes/_components/dialog/dialogs.js @@ -5,3 +5,4 @@ export * from './showEmojiDialog' export * from './showPostPrivacyDialog' export * from './showStatusOptionsDialog' export * from './showComposeDialog' +export * from './showAccountProfileOptionsDialog' diff --git a/routes/_components/dialog/showAccountProfileOptionsDialog.js b/routes/_components/dialog/showAccountProfileOptionsDialog.js new file mode 100644 index 00000000..8e0593c9 --- /dev/null +++ b/routes/_components/dialog/showAccountProfileOptionsDialog.js @@ -0,0 +1,14 @@ +import AccountProfileOptionsDialog from './AccountProfileOptionsDialog.html' +import { createDialogElement } from './createDialogElement' + +export function showAccountProfileOptionsDialog (account) { + let dialog = new AccountProfileOptionsDialog({ + target: createDialogElement(), + data: { + label: 'Profile options dialog', + title: '', + account: account + } + }) + dialog.show() +} diff --git a/routes/_components/profile/AccountProfileDetails.html b/routes/_components/profile/AccountProfileDetails.html index 7a1717d5..462eacad 100644 --- a/routes/_components/profile/AccountProfileDetails.html +++ b/routes/_components/profile/AccountProfileDetails.html @@ -23,12 +23,21 @@ {{numFollowersDisplay}} +
+ +
\ No newline at end of file diff --git a/scss/themes/_base.scss b/scss/themes/_base.scss index 133517ac..2f1d01ca 100644 --- a/scss/themes/_base.scss +++ b/scss/themes/_base.scss @@ -1,4 +1,7 @@ @mixin baseTheme() { + + $deemphasized-color: #666; + --button-primary-bg: lighten($main-theme-color, 7%); --button-primary-text: $secondary-text-color; --button-primary-border: darken($main-theme-color, 30%); @@ -44,6 +47,13 @@ --action-button-fill-color-pressed-hover: darken($main-theme-color, 2%); --action-button-fill-color-pressed-active: darken($main-theme-color, 15%); + --action-button-deemphasized-fill-color: $deemphasized-color; + --action-button-deemphasized-fill-color-hover: lighten($deemphasized-color, 22%); + --action-button-deemphasized-fill-color-active: lighten($deemphasized-color, 5%); + --action-button-deemphasized-fill-color-pressed: darken($deemphasized-color, 7%); + --action-button-deemphasized-fill-color-pressed-hover: darken($deemphasized-color, 2%); + --action-button-deemphasized-fill-color-pressed-active: darken($deemphasized-color, 15%); + --settings-list-item-bg: $main-bg-color; --settings-list-item-text: $main-theme-color; --settings-list-item-text-hover: $main-theme-color; @@ -60,7 +70,7 @@ --mask-opaque-bg: rgba($toast-bg, 0.8); --loading-bg: #ededed; - --deemphasized-text-color: #666; + --deemphasized-text-color:$deemphasized-color; --focus-outline: $focus-outline; --very-deemphasized-link-color: rgba($anchor-color, 0.6); diff --git a/templates/2xx.html b/templates/2xx.html index e17c169e..ab4e3f6d 100644 --- a/templates/2xx.html +++ b/templates/2xx.html @@ -16,9 +16,9 @@