Merge branch 'feature/accountHighlight' into 'develop'

Account highlight

See merge request pleroma/pleroma-fe!285

CONTRIBUTORS.md

@@ -8,3 +8,4 @@ Contributors of this project.
 - hakui (hakui@freezepeach.xyz): CSS and styling
 - shpuld (shpuld@shitposter.club): CSS and styling
 - Vincent Guth (https://unsplash.com/photos/XrwVIFy6rTw): Background images.
+- hj (hj@shigusegubu.club): Code

src/components/notification/notification.js

@@ -1,6 +1,7 @@
 import Status from '../status/status.vue'
 import StillImage from '../still-image/still-image.vue'
 import UserCardContent from '../user_card_content/user_card_content.vue'
+import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 
 const Notification = {
   data () {
@@ -18,6 +19,16 @@ const Notification = {
     toggleUserExpanded () {
       this.userExpanded = !this.userExpanded
     }
+  },
+  computed: {
+    userClass () {
+      return highlightClass(this.notification.action.user)
+    },
+    userStyle () {
+      const highlight = this.$store.state.config.highlight
+      const user = this.notification.action.user
+      return highlightStyle(highlight[user.screen_name])
+    }
   }
 }
 

src/components/notification/notification.vue

@@ -1,6 +1,6 @@
 <template>
   <status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status>
-  <div class="non-mention" v-else>
+  <div class="non-mention" :class="[userClass, { highlighted: userStyle }]" :style="[ userStyle ]"v-else>
     <a class='avatar-container' :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
       <StillImage class='avatar-compact' :src="notification.action.user.profile_image_url_original"/>
     </a>

src/components/notifications/notifications.scss

@@ -45,8 +45,7 @@
   }
 
   .unseen {
-    border-left: 4px solid $fallback--cRed;
-    border-left: 4px solid var(--cRed, $fallback--cRed);
+    box-shadow: inset 4px 0 0 var(--cRed, $fallback--cRed);
     padding-left: 0;
   }
 }
@@ -56,7 +55,6 @@
   display: flex;
   border-bottom: 1px solid;
   border-bottom-color: inherit;
-  padding-left: 4px;
 
   .avatar-compact {
     width: 32px;

src/components/status/status.js

@@ -6,6 +6,7 @@ import PostStatusForm from '../post_status_form/post_status_form.vue'
 import UserCardContent from '../user_card_content/user_card_content.vue'
 import StillImage from '../still-image/still-image.vue'
 import { filter, find } from 'lodash'
+import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
 
 const Status = {
   name: 'Status',
@@ -34,6 +35,25 @@ const Status = {
     muteWords () {
       return this.$store.state.config.muteWords
     },
+    repeaterClass () {
+      const user = this.statusoid.user
+      return highlightClass(user)
+    },
+    userClass () {
+      const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
+      return highlightClass(user)
+    },
+    repeaterStyle () {
+      const user = this.statusoid.user
+      const highlight = this.$store.state.config.highlight
+      return highlightStyle(highlight[user.screen_name])
+    },
+    userStyle () {
+      if (this.noHeading) return
+      const user = this.retweet ? (this.statusoid.retweeted_status.user) : this.statusoid.user
+      const highlight = this.$store.state.config.highlight
+      return highlightStyle(highlight[user.screen_name])
+    },
     hideAttachments () {
       return (this.$store.state.config.hideAttachments && !this.inConversation) ||
         (this.$store.state.config.hideAttachmentsInConv && this.inConversation)

src/components/status/status.vue

@@ -8,7 +8,7 @@
       </div>
     </template>
     <template v-else>
-      <div v-if="retweet && !noHeading" class="media container retweet-info">
+      <div v-if="retweet && !noHeading" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
         <StillImage v-if="retweet" class='avatar' :src="statusoid.user.profile_image_url_original"/>
         <div class="media-body faint">
           <a v-if="retweeterHtml" :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name" v-html="retweeterHtml"></a>
@@ -18,7 +18,7 @@
         </div>
       </div>
 
-      <div class="media status">
+      <div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet }]" :style="[ userStyle ]" class="media status">
         <div v-if="!noHeading" class="media-left">
           <a :href="status.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
             <StillImage class='avatar' :class="{'avatar-compact': compact}"  :src="status.user.profile_image_url_original"/>
@@ -317,7 +317,7 @@
 
   .retweet-info {
     padding: 0.4em 0.6em 0 0.6em;
-    margin: 0 0 -0.5em 0;
+    margin: 0;
     .avatar {
       border-radius: $fallback--avatarAltRadius;
       border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
@@ -429,6 +429,9 @@
 .status {
   display: flex;
   padding: 0.6em;
+  &.is-retweet {
+    padding-top: 0.1em;
+  }
 }
 
 .status-conversation:last-child {

src/components/user_card_content/user_card_content.js

@@ -9,11 +9,6 @@ export default {
       if (color) {
         const rgb = hex2rgb(color)
         const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)`
-        console.log(rgb)
-        console.log([
-          `url(${this.user.cover_photo})`,
-          `linear-gradient(to bottom, ${tintColor}, ${tintColor})`
-        ].join(', '))
         return {
           backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`,
           backgroundImage: [
@@ -37,6 +32,29 @@ export default {
     dailyAvg () {
       const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
       return Math.round(this.user.statuses_count / days)
+    },
+    userHighlightType: {
+      get () {
+        const data = this.$store.state.config.highlight[this.user.screen_name]
+        return data && data.type || 'disabled'
+      },
+      set (type) {
+        const data = this.$store.state.config.highlight[this.user.screen_name]
+        if (type !== 'disabled') {
+          this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: data && data.color || '#FFFFFF', type })
+        } else {
+          this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
+        }
+      }
+    },
+    userHighlightColor: {
+      get () {
+        const data = this.$store.state.config.highlight[this.user.screen_name]
+        return data && data.color
+      },
+      set (color) {
+        this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })
+      }
     }
   },
   components: {

src/components/user_card_content/user_card_content.vue

@@ -1,30 +1,46 @@
 <template>
-  <div id="heading" class="profile-panel-background" :style="headingStyle">
-    <div class="panel-heading text-center">
-      <div class='user-info'>
-        <router-link to='/user-settings' style="float: right; margin-top:16px;" v-if="!isOtherUser">
-          <i class="icon-cog usersettings"></i>
+<div id="heading" class="profile-panel-background" :style="headingStyle">
+  <div class="panel-heading text-center">
+    <div class='user-info'>
+      <router-link to='/user-settings' style="float: right; margin-top:16px;" v-if="!isOtherUser">
+        <i class="icon-cog usersettings"></i>
+      </router-link>
+      <a :href="user.statusnet_profile_url" target="_blank" class="floater" v-if="isOtherUser">
+        <i class="icon-link-ext usersettings"></i>
+      </a>
+      <div class='container'>
+        <router-link :to="{ name: 'user-profile', params: { id: user.id } }">
+          <StillImage class="avatar" :src="user.profile_image_url_original"/>
         </router-link>
-        <a :href="user.statusnet_profile_url" target="_blank" style="float: right; margin-top:16px;" v-if="isOtherUser">
-          <i class="icon-link-ext usersettings"></i>
-        </a>
-        <div class='container'>
-          <router-link :to="{ name: 'user-profile', params: { id: user.id } }">
-            <StillImage class="avatar" :src="user.profile_image_url_original"/>
+        <div class="name-and-screen-name">
+          <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
+          <div :title="user.name" class='user-name' v-else>{{user.name}}</div>
+          <router-link class='user-screen-name':to="{ name: 'user-profile', params: { id: user.id } }">
+            <span>@{{user.screen_name}}</span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
+            <span class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
           </router-link>
-          <div class="name-and-screen-name">
-            <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
-            <div :title="user.name" class='user-name' v-else>{{user.name}}</div>
-            <router-link class='user-screen-name':to="{ name: 'user-profile', params: { id: user.id } }">
-              <span>@{{user.screen_name}}</span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
-              <span class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
-            </router-link>
-          </div>
         </div>
-        <div v-if="isOtherUser" class="user-interactions">
-          <div v-if="user.follows_you && loggedIn" class="following">
-            {{ $t('user_card.follows_you') }}
-          </div>
+      </div>
+      <div class="user-meta">
+        <div v-if="user.follows_you && loggedIn && isOtherUser" class="following">
+          {{ $t('user_card.follows_you') }}
+        </div>
+        <div class="floater" v-if="switcher || isOtherUser">
+          <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
+          <input class="userHighlightText" type="text" :id="'userHighlightColorTx'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
+          <input class="userHighlightCl" type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
+          <label for="style-switcher" class='userHighlightSel select'>
+            <select class="userHighlightSel" :id="'userHighlightSel'+user.id" v-model="userHighlightType">
+              <option value="disabled">No highlight</option>
+              <option value="solid">Solid bg</option>
+              <option value="striped">Striped bg</option>
+              <option value="side">Side stripe</option>
+            </select>
+            <i class="icon-down-open"/>
+          </label>
+        </div>
+      </div>
+      <div v-if="isOtherUser" class="user-interactions">
           <div class="follow" v-if="loggedIn">
             <span v-if="user.following">
               <!--Following them!-->
@@ -181,6 +197,27 @@
     padding-right: 0.1em;
   }
 
+  .user-meta {
+    margin-bottom: .4em;
+
+    .following {
+      font-size: 14px;
+      flex: 0 0 100%;
+      margin: 0;
+      padding-left: 16px;
+      text-align: left;
+      float: left;
+    }
+    .floater {
+      margin: 0;
+    }
+
+    &::after {
+      display: block;
+      content: '';
+      clear: both;
+    }
+  }
   .user-interactions {
     display: flex;
     flex-flow: row wrap;
@@ -190,14 +227,6 @@
       flex: 1;
     }
 
-    .following {
-      font-size: 14px;
-      flex: 0 0 100%;
-      margin: 0 0 .4em 0;
-      padding-left: 16px;
-      text-align: left;
-    }
-
     .mute {
       max-width: 220px;
       min-height: 28px;
@@ -280,4 +309,33 @@
   font-size: 0.7em;
   color: #CCC;
 }
+.floater {
+  float: right;
+  margin-top: 16px;
+
+  .userHighlightCl {
+    padding: 2px 10px;
+  }
+  .userHighlightSel,
+  .userHighlightSel.select {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .userHighlightSel.select i {
+    line-height: 22px;
+  }
+
+  .userHighlightText {
+    width: 70px;
+  }
+
+  .userHighlightCl,
+  .userHighlightText,
+  .userHighlightSel,
+  .userHighlightSel.select {
+    height: 22px;
+    vertical-align: top;
+    margin-right: 0
+  }
+}
 </style>

src/main.js

@@ -53,6 +53,7 @@ const persistedStateOptions = {
     'config.streaming',
     'config.muteWords',
     'config.customTheme',
+    'config.highlight',
     'users.lastLoginName'
   ]
 }

src/modules/config.js

@@ -1,4 +1,4 @@
-import { set } from 'vue'
+import { set, delete as del } from 'vue'
 import StyleSetter from '../services/style_setter/style_setter.js'
 
 const defaultState = {
@@ -10,7 +10,8 @@ const defaultState = {
   autoLoad: true,
   streaming: false,
   hoverPreview: true,
-  muteWords: []
+  muteWords: [],
+  highlight: {}
 }
 
 const config = {
@@ -18,12 +19,23 @@ const config = {
   mutations: {
     setOption (state, { name, value }) {
       set(state, name, value)
+    },
+    setHighlight (state, { user, color, type }) {
+      const data = this.state.config.highlight[user]
+      if (color || type) {
+        set(state.highlight, user, { color: color || data.color, type: type || data.type })
+      } else {
+        del(state.highlight, user)
+      }
     }
   },
   actions: {
     setPageTitle ({state}, option = '') {
       document.title = `${option} ${state.name}`
     },
+    setHighlight ({ commit, dispatch }, { user, color, type }) {
+      commit('setHighlight', {user, color, type})
+    },
     setOption ({ commit, dispatch }, { name, value }) {
       commit('setOption', {name, value})
       switch (name) {

src/modules/users.js

@@ -42,6 +42,10 @@ export const mutations = {
   },
   setUserForStatus (state, status) {
     status.user = state.usersObject[status.user.id]
+  },
+  setColor (state, { user: {id}, highlighted }) {
+    const user = state.usersObject[id]
+    set(user, 'highlight', highlighted)
   }
 }
 

src/services/user_highlighter/user_highlighter.js

@@ -0,0 +1,48 @@
+import { hex2rgb } from '../color_convert/color_convert.js'
+const highlightStyle = (prefs) => {
+  if (prefs === undefined) return
+  const {color, type} = prefs
+  if (typeof color !== 'string') return
+  const rgb = hex2rgb(color)
+  if (rgb == null) return
+  const solidColor = `rgb(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)})`
+  const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .1)`
+  const tintColor2 = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .2)`
+  if (type === 'striped') {
+    return {
+      backgroundImage: [
+        'repeating-linear-gradient(-45deg,',
+        `${tintColor} ,`,
+        `${tintColor} 20px,`,
+        `${tintColor2} 20px,`,
+        `${tintColor2} 40px`
+      ].join(' '),
+      backgroundPosition: '0 0'
+    }
+  } else if (type === 'solid') {
+    return {
+      backgroundColor: tintColor2
+    }
+  } else if (type === 'side') {
+    return {
+      backgroundImage: [
+        'linear-gradient(to right,',
+        `${solidColor} ,`,
+        `${solidColor} 2px,`,
+        `transparent 6px`
+      ].join(' '),
+      backgroundPosition: '0 0'
+    }
+  }
+}
+
+const highlightClass = (user) => {
+  return 'USER____' + user.screen_name
+    .replace(/\./g, '_')
+    .replace(/@/g, '_AT_')
+}
+
+export {
+  highlightClass,
+  highlightStyle
+}

static/font/LICENSE.txt

@@ -19,6 +19,15 @@ Font license info
    Homepage:  http://www.entypo.com
 
 
+## Iconic
+
+   Copyright (C) 2012 by P.J. Onori
+
+   Author:    P.J. Onori
+   License:   SIL (http://scripts.sil.org/OFL)
+   Homepage:  http://somerandomdude.com/work/iconic/
+
+
 ## Fontelico
 
    Copyright (C) 2012 by Fontello project

static/font/config.json

@@ -179,6 +179,12 @@
       "css": "globe",
       "code": 59410,
       "src": "fontawesome"
+    },
+    {
+      "uid": "b3a9e2dab4d19ea3b2f628242c926bfe",
+      "css": "brush",
+      "code": 59411,
+      "src": "iconic"
     }
   ]
 }

static/font/css/fontello-codes.css

@@ -18,6 +18,7 @@
 .icon-bell:before { content: '\e810'; } /* '' */
 .icon-lock:before { content: '\e811'; } /* '' */
 .icon-globe:before { content: '\e812'; } /* '' */
+.icon-brush:before { content: '\e813'; } /* '' */
 .icon-spin3:before { content: '\e832'; } /* '' */
 .icon-spin4:before { content: '\e834'; } /* '' */
 .icon-link-ext:before { content: '\f08e'; } /* '' */

static/font/css/fontello-ie7-codes.css

@@ -18,6 +18,7 @@
 .icon-bell { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-lock { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-globe { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-brush { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-spin3 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-spin4 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

static/font/css/fontello-ie7.css

@@ -29,6 +29,7 @@
 .icon-bell { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-lock { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-globe { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-brush { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-spin3 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-spin4 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

static/font/css/fontello.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'fontello';
-  src: url('../font/fontello.eot?92801760');
-  src: url('../font/fontello.eot?92801760#iefix') format('embedded-opentype'),
-       url('../font/fontello.woff2?92801760') format('woff2'),
-       url('../font/fontello.woff?92801760') format('woff'),
-       url('../font/fontello.ttf?92801760') format('truetype'),
-       url('../font/fontello.svg?92801760#fontello') format('svg');
+  src: url('../font/fontello.eot?70327001');
+  src: url('../font/fontello.eot?70327001#iefix') format('embedded-opentype'),
+       url('../font/fontello.woff2?70327001') format('woff2'),
+       url('../font/fontello.woff?70327001') format('woff'),
+       url('../font/fontello.ttf?70327001') format('truetype'),
+       url('../font/fontello.svg?70327001#fontello') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -15,7 +15,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'fontello';
-    src: url('../font/fontello.svg?92801760#fontello') format('svg');
+    src: url('../font/fontello.svg?70327001#fontello') format('svg');
   }
 }
 */
@@ -74,6 +74,7 @@
 .icon-bell:before { content: '\e810'; } /* '' */
 .icon-lock:before { content: '\e811'; } /* '' */
 .icon-globe:before { content: '\e812'; } /* '' */
+.icon-brush:before { content: '\e813'; } /* '' */
 .icon-spin3:before { content: '\e832'; } /* '' */
 .icon-spin4:before { content: '\e834'; } /* '' */
 .icon-link-ext:before { content: '\f08e'; } /* '' */

static/font/demo.html

@@ -229,11 +229,11 @@ body {
 }
 @font-face {
       font-family: 'fontello';
-      src: url('./font/fontello.eot?48963108');
-      src: url('./font/fontello.eot?48963108#iefix') format('embedded-opentype'),
-           url('./font/fontello.woff?48963108') format('woff'),
-           url('./font/fontello.ttf?48963108') format('truetype'),
-           url('./font/fontello.svg?48963108#fontello') format('svg');
+      src: url('./font/fontello.eot?31375268');
+      src: url('./font/fontello.eot?31375268#iefix') format('embedded-opentype'),
+           url('./font/fontello.woff?31375268') format('woff'),
+           url('./font/fontello.ttf?31375268') format('truetype'),
+           url('./font/fontello.svg?31375268#fontello') format('svg');
       font-weight: normal;
       font-style: normal;
     }
@@ -325,21 +325,22 @@ body {
         <div class="the-icons span3" title="Code: 0xe810"><i class="demo-icon icon-bell">&#xe810;</i> <span class="i-name">icon-bell</span><span class="i-code">0xe810</span></div>
         <div class="the-icons span3" title="Code: 0xe811"><i class="demo-icon icon-lock">&#xe811;</i> <span class="i-name">icon-lock</span><span class="i-code">0xe811</span></div>
         <div class="the-icons span3" title="Code: 0xe812"><i class="demo-icon icon-globe">&#xe812;</i> <span class="i-name">icon-globe</span><span class="i-code">0xe812</span></div>
-        <div class="the-icons span3" title="Code: 0xe832"><i class="demo-icon icon-spin3 animate-spin">&#xe832;</i> <span class="i-name">icon-spin3</span><span class="i-code">0xe832</span></div>
+        <div class="the-icons span3" title="Code: 0xe813"><i class="demo-icon icon-brush">&#xe813;</i> <span class="i-name">icon-brush</span><span class="i-code">0xe813</span></div>
       </div>
       <div class="row">
+        <div class="the-icons span3" title="Code: 0xe832"><i class="demo-icon icon-spin3 animate-spin">&#xe832;</i> <span class="i-name">icon-spin3</span><span class="i-code">0xe832</span></div>
         <div class="the-icons span3" title="Code: 0xe834"><i class="demo-icon icon-spin4 animate-spin">&#xe834;</i> <span class="i-name">icon-spin4</span><span class="i-code">0xe834</span></div>
         <div class="the-icons span3" title="Code: 0xf08e"><i class="demo-icon icon-link-ext">&#xf08e;</i> <span class="i-name">icon-link-ext</span><span class="i-code">0xf08e</span></div>
         <div class="the-icons span3" title="Code: 0xf0c9"><i class="demo-icon icon-menu">&#xf0c9;</i> <span class="i-name">icon-menu</span><span class="i-code">0xf0c9</span></div>
-        <div class="the-icons span3" title="Code: 0xf0e0"><i class="demo-icon icon-mail-alt">&#xf0e0;</i> <span class="i-name">icon-mail-alt</span><span class="i-code">0xf0e0</span></div>
       </div>
       <div class="row">
+        <div class="the-icons span3" title="Code: 0xf0e0"><i class="demo-icon icon-mail-alt">&#xf0e0;</i> <span class="i-name">icon-mail-alt</span><span class="i-code">0xf0e0</span></div>
         <div class="the-icons span3" title="Code: 0xf0e5"><i class="demo-icon icon-comment-empty">&#xf0e5;</i> <span class="i-name">icon-comment-empty</span><span class="i-code">0xf0e5</span></div>
         <div class="the-icons span3" title="Code: 0xf112"><i class="demo-icon icon-reply">&#xf112;</i> <span class="i-name">icon-reply</span><span class="i-code">0xf112</span></div>
         <div class="the-icons span3" title="Code: 0xf13e"><i class="demo-icon icon-lock-open-alt">&#xf13e;</i> <span class="i-name">icon-lock-open-alt</span><span class="i-code">0xf13e</span></div>
-        <div class="the-icons span3" title="Code: 0xf1e5"><i class="demo-icon icon-binoculars">&#xf1e5;</i> <span class="i-name">icon-binoculars</span><span class="i-code">0xf1e5</span></div>
       </div>
       <div class="row">
+        <div class="the-icons span3" title="Code: 0xf1e5"><i class="demo-icon icon-binoculars">&#xf1e5;</i> <span class="i-name">icon-binoculars</span><span class="i-code">0xf1e5</span></div>
         <div class="the-icons span3" title="Code: 0xf234"><i class="demo-icon icon-user-plus">&#xf234;</i> <span class="i-name">icon-user-plus</span><span class="i-code">0xf234</span></div>
       </div>
     </div>

static/font/font/fontello.svg

@@ -44,6 +44,8 @@
 
 <glyph glyph-name="globe" unicode="&#xe812;" d="M429 779q116 0 215-58t156-156 57-215-57-215-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58z m153-291q-2-1-6-5t-7-6q1 0 2 3t3 6 2 4q3 4 12 8 8 4 29 7 19 5 29-6-1 1 5 7t8 7q2 1 8 3t9 4l1 12q-7-1-10 4t-3 12q0-2-4-5 0 4-2 5t-7-1-5-1q-5 2-8 5t-5 9-2 8q-1 3-5 6t-5 6q-1 1-2 3t-1 4-3 3-3 1-4-3-4-5-2-3q-2 1-4 1t-2-1-3-1-3-2q-1-2-4-2t-5-1q8 3-1 6-5 2-9 2 6 2 5 6t-5 8h3q-1 2-5 5t-10 5-7 3q-5 3-19 5t-18 1q-3-4-3-6t2-8 2-7q1-3-3-7t-3-7q0-4 7-9t6-12q-2-4-9-9t-9-6q-3-5-1-11t6-9q1-1 1-2t-2-3-3-2-4-2l-1-1q-7-3-12 3t-7 15q-4 14-9 17-13 4-16-1-3 7-23 15-14 5-33 2 4 0 0 8-4 9-10 7 1 3 2 10t0 7q2 8 7 13 1 1 4 5t5 7 1 4q19-3 28 6 2 3 6 9t6 10q5 3 8 3t8-3 8-3q8-1 8 6t-4 11q7 0 2 10-2 4-5 5-6 2-15-3-4-2 2-4-1 0-6-6t-9-10-9 3q0 0-3 7t-5 8q-5 0-9-9 1 5-6 9t-14 4q11 7-4 15-4 3-12 3t-11-2q-2-4-3-7t3-4 6-3 6-2 5-2q8-6 5-8-1 0-5-2t-6-2-4-2q-1-3 0-8t-1-8q-3 3-5 10t-4 9q4-5-14-3l-5 0q-3 0-9-1t-12-1-7 5q-3 4 0 11 0 2 2 1-2 2-6 5t-6 5q-25-8-52-23 3 0 6 1 3 1 8 4t5 3q19 7 24 4l3 2q7-9 11-14-4 3-17 1-11-3-12-7 4-6 2-10-2 2-6 6t-8 6-8 3q-9 0-13-1-81-45-131-124 4-4 7-4 2-1 3-5t1-6 6 1q5-4 2-10 1 0 25-15 10-10 11-12 2-6-5-10-1 1-5 5t-5 2q-2-3 0-10t6-7q-4 0-5-9t-2-20 0-13l1-1q-2-6 3-19t12-11q-7-1 11-24 3-4 4-5 2-1 7-4t9-6 5-5q2-3 6-13t8-13q-2-3 5-11t6-13q-1 0-2-1t-1 0q2-4 9-8t8-7q1-2 1-6t2-6 4-1q2 11-13 35-8 13-9 16-2 2-4 8t-2 8q1 0 3 0t5-2 4-3 1-1q-1-4 1-10t7-10 10-11 6-7q4-4 8-11t0-8q5 0 11-5t10-11q3-5 4-15t3-13q1-4 5-8t7-5l9-5t7-3q3-2 10-6t12-7q6-2 9-2t8 1 8 2q8 1 16-8t12-12q20-10 30-6-1 0 1-4t4-9 5-8 3-5q3-3 10-8t10-8q4 2 4 5-1-5 4-11t10-6q8 2 8 18-17-8-27 10 0 0-2 3t-2 5-1 4 0 5 2 1q5 0 6 2t-1 7-2 8q-1 4-6 11t-7 8q-3-5-9-4t-9 5q0-1-1-3t-1-4q-7 0-8 0 1 2 1 10t2 13q1 2 3 6t5 9 2 7-3 5-9 1q-11 0-15-11-1-2-2-6t-2-6-5-4q-4-2-14-1t-13 3q-8 4-13 16t-5 20q0 6 1 15t2 14-3 14q2 1 5 5t5 6q2 1 3 1t3 0 2 1 1 3q0 1-2 2-1 1-2 1 4-1 16 1t15-1q9-6 12 1 0 1-1 6t0 7q3-15 16-5 2-1 9-3t9-2q2-1 4-3t3-3 3 0 5 4q5-8 7-13 6-23 10-25 4-2 6-1t3 5 0 8-1 7l-1 5v10l0 4q-8 2-10 7t0 10 9 10q0 1 4 2t9 4 7 4q12 11 8 20 4 0 6 5 0 0-2 2t-5 2-2 2q5 2 1 8 3 2 4 7t4 5q5-6 12-1 5 5 1 9 2 4 11 6t10 5q4-1 5 1t0 7 2 7q2 2 9 5t7 2l9 7q2 2 0 2 10-1 18 6 5 6-4 11 2 4-1 5t-9 4q2 0 7 0t5 1q9 5-3 9-10 2-24-7z m-91-490q115 21 195 106-1 2-7 2t-7 2q-10 4-13 5 1 4-1 7t-5 5-7 5-6 4q-1 1-4 3t-4 3-4 2-5 2-5-1l-2-1q-2 0-3-1t-3-2-2-1 0-2q-12 10-20 13-3 0-6 3t-6 4-6 0-6-3q-3-3-4-9t-1-7q-4 3 0 10t1 10q-1 3-6 2t-6-2-7-5-5-3-4-3-5-5q-2-2-4-6t-2-6q-1 2-7 3t-5 3q1-5 2-19t3-22q4-17-7-26-15-14-16-23-2-12 7-14 0-4-5-12t-4-12q0-3 2-9z" horiz-adv-x="857.1" />
 
+<glyph glyph-name="brush" unicode="&#xe813;" d="M464 202q0-124-87-212t-210-87q-81 0-149 40 68 39 109 108t40 151q0 61 44 105t105 44 105-44 43-105z m415 562q32-32 32-79t-33-79l-318-318q-20 55-61 97t-97 62l318 318q32 32 79 32t80-33z" horiz-adv-x="928" />
+
 <glyph glyph-name="spin3" unicode="&#xe832;" d="M494 850c-266 0-483-210-494-472-1-19 13-20 13-20l84 0c16 0 19 10 19 18 10 199 176 358 378 358 107 0 205-45 273-118l-58-57c-11-12-11-27 5-31l247-50c21-5 46 11 37 44l-58 227c-2 9-16 22-29 13l-65-60c-89 91-214 148-352 148z m409-508c-16 0-19-10-19-18-10-199-176-358-377-358-108 0-205 45-274 118l59 57c10 12 10 27-5 31l-248 50c-21 5-46-11-37-44l58-227c2-9 16-22 30-13l64 60c89-91 214-148 353-148 265 0 482 210 493 473 1 18-13 19-13 19l-84 0z" horiz-adv-x="1000" />
 
 <glyph glyph-name="spin4" unicode="&#xe834;" d="M498 850c-114 0-228-39-320-116l0 0c173 140 428 130 588-31 134-134 164-332 89-495-10-29-5-50 12-68 21-20 61-23 84 0 3 3 12 15 15 24 71 180 33 393-112 539-99 98-228 147-356 147z m-409-274c-14 0-29-5-39-16-3-3-13-15-15-24-71-180-34-393 112-539 185-185 479-195 676-31l0 0c-173-140-428-130-589 31-134 134-163 333-89 495 11 29 6 50-12 68-11 11-27 17-44 16z" horiz-adv-x="1001" />