add mention option to account profiles

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);
+  }
+
 </style>
 <script>
   import { classname } from '../_utils/classname'
@@ -79,12 +115,13 @@
     },
     store: () => store,
     computed: {
-      computedClass: (pressable, pressed, big, className) => {
+      computedClass: (pressable, pressed, big, muted, className) => {
         return classname(
           'icon-button',
           !pressable && 'not-pressable',
           pressed && 'pressed',
           big && 'big-icon',
+          muted && 'muted-style',
           className
         )
       }

routes/_components/dialog/AccountProfileOptionsDialog.html

@@ -0,0 +1,48 @@
+<ModalDialog
+  :label
+  :shown
+  :closed
+  :title
+  background="var(--main-bg)"
+  on:destroyDialog="destroy()"
+>
+  <GenericDialogList :items on:click="onClick(event)"/>
+</ModalDialog>
+<script>
+import ModalDialog from './ModalDialog.html'
+import { store } from '../../_store/store'
+import GenericDialogList from './GenericDialogList.html'
+import { goto } from 'sapper/runtime.js'
+
+export default {
+  computed: {
+    items: (account) => (
+      [
+        {
+          key: 'mention',
+          label: 'Mention @' + (account.acct),
+          icon: '#fa-comments'
+        }
+      ]
+    )
+  },
+  components: {
+    ModalDialog,
+    GenericDialogList
+  },
+  store: () => store,
+  methods: {
+    async show() {
+      this.set({shown: true})
+    },
+    onClick() {
+      let account = this.get('account')
+      this.store.setComposeData('home', {
+        text: `@${account.acct} `
+      })
+      this.set({closed: true})
+      goto('/')
+    }
+  }
+}
+</script>

routes/_components/dialog/dialogs.js

@@ -5,3 +5,4 @@ export * from './showEmojiDialog'
 export * from './showPostPrivacyDialog'
 export * from './showStatusOptionsDialog'
 export * from './showComposeDialog'
+export * from './showAccountProfileOptionsDialog'

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()
+}

routes/_components/profile/AccountProfileDetails.html

@@ -23,12 +23,21 @@
       {{numFollowersDisplay}}
     </span>
   </div>
+  <div class="account-profile-more-options">
+    <IconButton
+      label="More options"
+      href="#fa-bars"
+      muted="true"
+      on:click="onMoreOptionsClick()"
+    />
+  </div>
 </div>
 <style>
   .account-profile-details {
     grid-area: details;
     display: flex;
     margin: 0 5px;
+    align-items: center;
   }
 
   .account-profile-details-item {
@@ -87,6 +96,9 @@
   }
 </style>
 <script>
+  import IconButton from '../IconButton.html'
+  import { importDialogs } from '../../_utils/asyncModules'
+
   const numberFormat = new Intl.NumberFormat('en-US')
 
   export default {
@@ -97,6 +109,16 @@
       numStatusesDisplay: numStatuses => numberFormat.format(numStatuses),
       numFollowingDisplay: numFollowing => numberFormat.format(numFollowing),
       numFollowersDisplay: numFollowers => numberFormat.format(numFollowers)
+    },
+    methods: {
+      async onMoreOptionsClick() {
+        let account = this.get('account')
+        let dialogs = await importDialogs()
+        dialogs.showAccountProfileOptionsDialog(account)
+      }
+    },
+    components: {
+      IconButton
     }
   }
 </script>

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);

templates/2xx.html

@@ -16,9 +16,9 @@
 
   <style>
 /* auto-generated w/ build-sass.js */
-body{--button-primary-bg:#6081e6;--button-primary-text:#fff;--button-primary-border:#132c76;--button-primary-bg-active:#456ce2;--button-primary-bg-hover:#6988e7;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#4169e1;--main-bg:#fff;--body-bg:#e8edfb;--body-text-color:#333;--main-border:#dadada;--svg-fill:#4169e1;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#4169e1;--nav-border:#214cce;--nav-a-border:#4169e1;--nav-a-selected-border:#fff;--nav-a-selected-bg:#6d8ce8;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#839deb;--nav-a-bg-hover:#577ae4;--nav-a-border-hover:#4169e1;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#90a8ee;--action-button-fill-color-hover:#a2b6f0;--action-button-fill-color-active:#577ae4;--action-button-fill-color-pressed:#2351dc;--action-button-fill-color-pressed-hover:#3862e0;--action-button-fill-color-pressed-active:#1d44b8;--settings-list-item-bg:#fff;--settings-list-item-text:#4169e1;--settings-list-item-text-hover:#4169e1;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--loading-bg:#ededed;--deemphasized-text-color:#666;--focus-outline:#c5d1f6;--very-deemphasized-link-color:rgba(65,105,225,0.6);--very-deemphasized-text-color:rgba(102,102,102,0.6);--status-direct-background:#d2dcf8;--main-theme-color:#4169e1;--warning-color:#e01f19;--alt-input-bg:rgba(255,255,255,0.7);--muted-modal-bg:transparent;--muted-modal-focus:#999;--muted-modal-hover:rgba(255,255,255,0.2);--compose-autosuggest-item-hover:#ced8f7;--compose-autosuggest-item-active:#b8c7f4;--compose-autosuggest-outline:#dbe3f9;--compose-button-halo:rgba(255,255,255,0.1)}
+body{--button-primary-bg:#6081e6;--button-primary-text:#fff;--button-primary-border:#132c76;--button-primary-bg-active:#456ce2;--button-primary-bg-hover:#6988e7;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#4169e1;--main-bg:#fff;--body-bg:#e8edfb;--body-text-color:#333;--main-border:#dadada;--svg-fill:#4169e1;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#4169e1;--nav-border:#214cce;--nav-a-border:#4169e1;--nav-a-selected-border:#fff;--nav-a-selected-bg:#6d8ce8;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#839deb;--nav-a-bg-hover:#577ae4;--nav-a-border-hover:#4169e1;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#90a8ee;--action-button-fill-color-hover:#a2b6f0;--action-button-fill-color-active:#577ae4;--action-button-fill-color-pressed:#2351dc;--action-button-fill-color-pressed-hover:#3862e0;--action-button-fill-color-pressed-active:#1d44b8;--action-button-deemphasized-fill-color:#666;--action-button-deemphasized-fill-color-hover:#9e9e9e;--action-button-deemphasized-fill-color-active:#737373;--action-button-deemphasized-fill-color-pressed:#545454;--action-button-deemphasized-fill-color-pressed-hover:#616161;--action-button-deemphasized-fill-color-pressed-active:#404040;--settings-list-item-bg:#fff;--settings-list-item-text:#4169e1;--settings-list-item-text-hover:#4169e1;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--loading-bg:#ededed;--deemphasized-text-color:#666;--focus-outline:#c5d1f6;--very-deemphasized-link-color:rgba(65,105,225,0.6);--very-deemphasized-text-color:rgba(102,102,102,0.6);--status-direct-background:#d2dcf8;--main-theme-color:#4169e1;--warning-color:#e01f19;--alt-input-bg:rgba(255,255,255,0.7);--muted-modal-bg:transparent;--muted-modal-focus:#999;--muted-modal-hover:rgba(255,255,255,0.2);--compose-autosuggest-item-hover:#ced8f7;--compose-autosuggest-item-active:#b8c7f4;--compose-autosuggest-outline:#dbe3f9;--compose-button-halo:rgba(255,255,255,0.1)}
 body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;font-size:14px;line-height:1.4;color:var(--body-text-color);background:var(--body-bg)}.container{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;will-change:transform;position:absolute;top:42px;left:0;right:0;bottom:0}@media (max-width: 991px){.container{top:52px}}@media (max-width: 767px){.container{top:62px}}main{position:relative;width:602px;max-width:100vw;padding:0;box-sizing:border-box;margin:30px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px;min-height:70vh}@media (max-width: 767px){main{margin:5px auto 15px}}footer{width:602px;max-width:100vw;box-sizing:border-box;margin:15px auto;border-radius:1px;background:var(--main-bg);font-size:0.9em;padding:20px;border:1px solid var(--main-border)}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px;box-sizing:border-box}button,.button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover,.button:hover{background:var(--button-bg-hover);text-decoration:none}button:active,.button:active{background:var(--button-bg-active)}button[disabled],.button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary,.button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover,.button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active,.button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}*:focus{outline:2px solid var(--focus-outline)}button::-moz-focus-inner{border:0}input:required,input:invalid{box-shadow:none}textarea{font-family:inherit;font-size:inherit;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0deg)}25%{transform:rotate(90deg)}50%{transform:rotate(180deg)}75%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}.spin{animation:spin 1.5s infinite linear}.ellipsis::after{content:"\2026"}
-body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-oaken.offline,body.theme-scarlet.offline,body.theme-seafoam.offline,body.theme-gecko.offline{--button-primary-bg:#ababab;--button-primary-text:#fff;--button-primary-border:#4d4d4d;--button-primary-bg-active:#9c9c9c;--button-primary-bg-hover:#b0b0b0;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#999;--main-bg:#fff;--body-bg:#fafafa;--body-text-color:#333;--main-border:#dadada;--svg-fill:#999;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#999;--nav-border:gray;--nav-a-border:#999;--nav-a-selected-border:#fff;--nav-a-selected-bg:#b3b3b3;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#bfbfbf;--nav-a-bg-hover:#a6a6a6;--nav-a-border-hover:#999;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#c7c7c7;--action-button-fill-color-hover:#d1d1d1;--action-button-fill-color-active:#a6a6a6;--action-button-fill-color-pressed:#878787;--action-button-fill-color-pressed-hover:#949494;--action-button-fill-color-pressed-active:#737373;--settings-list-item-bg:#fff;--settings-list-item-text:#999;--settings-list-item-text-hover:#999;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--loading-bg:#ededed;--deemphasized-text-color:#666;--focus-outline:#bfbfbf;--very-deemphasized-link-color:rgba(153,153,153,0.6);--very-deemphasized-text-color:rgba(102,102,102,0.6);--status-direct-background:#ededed;--main-theme-color:#999;--warning-color:#e01f19;--alt-input-bg:rgba(255,255,255,0.7);--muted-modal-bg:transparent;--muted-modal-focus:#999;--muted-modal-hover:rgba(255,255,255,0.2);--compose-autosuggest-item-hover:#c4c4c4;--compose-autosuggest-item-active:#b8b8b8;--compose-autosuggest-outline:#ccc;--compose-button-halo:rgba(255,255,255,0.1)}
+body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-oaken.offline,body.theme-scarlet.offline,body.theme-seafoam.offline,body.theme-gecko.offline{--button-primary-bg:#ababab;--button-primary-text:#fff;--button-primary-border:#4d4d4d;--button-primary-bg-active:#9c9c9c;--button-primary-bg-hover:#b0b0b0;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#999;--main-bg:#fff;--body-bg:#fafafa;--body-text-color:#333;--main-border:#dadada;--svg-fill:#999;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#999;--nav-border:gray;--nav-a-border:#999;--nav-a-selected-border:#fff;--nav-a-selected-bg:#b3b3b3;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#bfbfbf;--nav-a-bg-hover:#a6a6a6;--nav-a-border-hover:#999;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#c7c7c7;--action-button-fill-color-hover:#d1d1d1;--action-button-fill-color-active:#a6a6a6;--action-button-fill-color-pressed:#878787;--action-button-fill-color-pressed-hover:#949494;--action-button-fill-color-pressed-active:#737373;--action-button-deemphasized-fill-color:#666;--action-button-deemphasized-fill-color-hover:#9e9e9e;--action-button-deemphasized-fill-color-active:#737373;--action-button-deemphasized-fill-color-pressed:#545454;--action-button-deemphasized-fill-color-pressed-hover:#616161;--action-button-deemphasized-fill-color-pressed-active:#404040;--settings-list-item-bg:#fff;--settings-list-item-text:#999;--settings-list-item-text-hover:#999;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--loading-bg:#ededed;--deemphasized-text-color:#666;--focus-outline:#bfbfbf;--very-deemphasized-link-color:rgba(153,153,153,0.6);--very-deemphasized-text-color:rgba(102,102,102,0.6);--status-direct-background:#ededed;--main-theme-color:#999;--warning-color:#e01f19;--alt-input-bg:rgba(255,255,255,0.7);--muted-modal-bg:transparent;--muted-modal-focus:#999;--muted-modal-hover:rgba(255,255,255,0.2);--compose-autosuggest-item-hover:#c4c4c4;--compose-autosuggest-item-active:#b8b8b8;--compose-autosuggest-outline:#ccc;--compose-button-halo:rgba(255,255,255,0.1)}
 
 </style>