Add icon and styling for force update button

src/components/status/status.vue

@@ -31,7 +31,9 @@
               </router-link>
             </small>
             <small v-if="!status.is_local" class="source_url">
-              <a :href="status.external_url" target="_blank" >Source</a>
+              <a :href="status.external_url" target="_blank" >
+                <i class="icon-link-ext fa"></i>Source
+              </a>
             </small>
           </h4>
 

src/components/timeline/timeline.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="timeline panel panel-default">
     <div class="panel-heading">
-      <p>{{timelineDisplayName}}<i class='icon-retweet fa' @click.prevent='showNewStatuses()'></i></p>
+      <span>{{timelineDisplayName}}</span>
+      <i class='icon-spin3 fa' @click.prevent='showNewStatuses()'></i>
     </div>
     <div class="panel-body">
       <div class="timeline">
@@ -12,7 +13,7 @@
             </p>
           </div>
         </a>
-        <status v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status>
+        <status v-for="status in timeline.visibleStatuses" :key="status.id" :statusoid="status"></status>
         <a href="#" @click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
           <div class="new-status-notification">
             <p class="text-center" >
@@ -25,3 +26,13 @@
   </div>
 </template>
 <script src="./timeline.js"></script>
+<style lang='scss'>
+  @import '../../_variables.scss';
+  .icon-spin3 {
+    float: right;
+    cursor: pointer;
+    &:hover {
+      color: $green;
+    }
+  }
+</style>

static/font/config.json

@@ -53,6 +53,18 @@
       "css": "retweet",
       "code": 59396,
       "src": "fontawesome"
+    },
+    {
+      "uid": "a73c5deb486c8d66249811642e5d719a",
+      "css": "arrows-cw",
+      "code": 59397,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "e15f0d620a7897e2035c18c80142f6d9",
+      "css": "link-ext",
+      "code": 61582,
+      "src": "fontawesome"
     }
   ]
 }

static/font/css/fontello-codes.css

@@ -4,6 +4,8 @@
 .icon-star:before { content: '\e802'; } /* '' */
 .icon-star-empty:before { content: '\e803'; } /* '' */
 .icon-retweet:before { content: '\e804'; } /* '' */
+.icon-arrows-cw:before { content: '\e805'; } /* '' */
 .icon-spin3:before { content: '\e832'; } /* '' */
 .icon-spin4:before { content: '\e834'; } /* '' */
+.icon-link-ext:before { content: '\f08e'; } /* '' */
 .icon-reply:before { content: '\f112'; } /* '' */

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

@@ -4,6 +4,8 @@
 .icon-star { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-star-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-arrows-cw { *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 = ' '); }
 .icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

static/font/css/fontello-ie7.css

@@ -15,6 +15,8 @@
 .icon-star { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-star-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
 .icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
+.icon-arrows-cw { *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 = ' '); }
 .icon-reply { *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?49728550');
-  src: url('../font/fontello.eot?49728550#iefix') format('embedded-opentype'),
-       url('../font/fontello.woff2?49728550') format('woff2'),
-       url('../font/fontello.woff?49728550') format('woff'),
-       url('../font/fontello.ttf?49728550') format('truetype'),
-       url('../font/fontello.svg?49728550#fontello') format('svg');
+  src: url('../font/fontello.eot?60199342');
+  src: url('../font/fontello.eot?60199342#iefix') format('embedded-opentype'),
+       url('../font/fontello.woff2?60199342') format('woff2'),
+       url('../font/fontello.woff?60199342') format('woff'),
+       url('../font/fontello.ttf?60199342') format('truetype'),
+       url('../font/fontello.svg?60199342#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?49728550#fontello') format('svg');
+    src: url('../font/fontello.svg?60199342#fontello') format('svg');
   }
 }
 */
@@ -60,6 +60,8 @@
 .icon-star:before { content: '\e802'; } /* '' */
 .icon-star-empty:before { content: '\e803'; } /* '' */
 .icon-retweet:before { content: '\e804'; } /* '' */
+.icon-arrows-cw:before { content: '\e805'; } /* '' */
 .icon-spin3:before { content: '\e832'; } /* '' */
 .icon-spin4:before { content: '\e834'; } /* '' */
+.icon-link-ext:before { content: '\f08e'; } /* '' */
 .icon-reply:before { content: '\f112'; } /* '' */

static/font/demo.html

@@ -229,11 +229,11 @@ body {
 }
 @font-face {
       font-family: 'fontello';
-      src: url('./font/fontello.eot?17074388');
-      src: url('./font/fontello.eot?17074388#iefix') format('embedded-opentype'),
-           url('./font/fontello.woff?17074388') format('woff'),
-           url('./font/fontello.ttf?17074388') format('truetype'),
-           url('./font/fontello.svg?17074388#fontello') format('svg');
+      src: url('./font/fontello.eot?28685355');
+      src: url('./font/fontello.eot?28685355#iefix') format('embedded-opentype'),
+           url('./font/fontello.woff?28685355') format('woff'),
+           url('./font/fontello.ttf?28685355') format('truetype'),
+           url('./font/fontello.svg?28685355#fontello') format('svg');
       font-weight: normal;
       font-style: normal;
     }
@@ -308,8 +308,12 @@ body {
       </div>
       <div class="row">
         <div title="Code: 0xe804" class="the-icons span3"><i class="demo-icon icon-retweet">&#xe804;</i> <span class="i-name">icon-retweet</span><span class="i-code">0xe804</span></div>
+        <div title="Code: 0xe805" class="the-icons span3"><i class="demo-icon icon-arrows-cw">&#xe805;</i> <span class="i-name">icon-arrows-cw</span><span class="i-code">0xe805</span></div>
         <div title="Code: 0xe832" class="the-icons span3"><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 title="Code: 0xe834" class="the-icons span3"><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>
+      <div class="row">
+        <div title="Code: 0xf08e" class="the-icons span3"><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 title="Code: 0xf112" class="the-icons span3"><i class="demo-icon icon-reply">&#xf112;</i> <span class="i-name">icon-reply</span><span class="i-code">0xf112</span></div>
       </div>
     </div>

static/font/font/fontello.svg

@@ -16,10 +16,14 @@
 
 <glyph glyph-name="retweet" unicode="&#xe804;" d="M714 11q0-7-5-13t-13-5h-535q-5 0-8 1t-5 4-3 4-2 7 0 6v335h-107q-15 0-25 11t-11 25q0 13 8 23l179 214q11 12 27 12t28-12l178-214q9-10 9-23 0-15-11-25t-25-11h-107v-214h321q9 0 14-6l89-108q4-5 4-11z m357 232q0-13-8-23l-178-214q-12-13-28-13t-27 13l-179 214q-8 10-8 23 0 14 11 25t25 11h107v214h-322q-9 0-14 7l-89 107q-4 5-4 11 0 7 5 12t13 6h536q4 0 7-1t5-4 3-5 2-6 1-7v-334h107q14 0 25-11t10-25z" horiz-adv-x="1071.4" />
 
+<glyph glyph-name="arrows-cw" unicode="&#xe805;" d="M843 261q0-3 0-4-36-150-150-243t-267-93q-81 0-157 31t-136 88l-72-72q-11-11-25-11t-25 11-11 25v250q0 14 11 25t25 11h250q14 0 25-11t10-25-10-25l-77-77q40-36 90-57t105-20q74 0 139 37t104 99q6 10 30 66 4 13 16 13h107q8 0 13-6t5-12z m14 446v-250q0-14-10-25t-26-11h-250q-14 0-25 11t-10 25 10 25l77 77q-82 77-194 77-75 0-140-37t-104-99q-6-10-29-66-5-13-17-13h-111q-7 0-13 6t-5 12v4q36 150 151 243t268 93q81 0 158-31t137-88l72 72q11 11 25 11t26-11 10-25z" horiz-adv-x="857.1" />
+
 <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" />
 
+<glyph glyph-name="link-ext" unicode="&#xf08e;" d="M786 332v-178q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h393q7 0 12-5t5-13v-36q0-8-5-13t-12-5h-393q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v178q0 8 5 13t13 5h36q8 0 13-5t5-13z m214 482v-285q0-15-11-25t-25-11-25 11l-98 98-364-364q-5-6-13-6t-12 6l-64 64q-6 5-6 12t6 13l364 364-98 98q-11 11-11 25t11 25 25 11h285q15 0 25-11t11-25z" horiz-adv-x="1000" />
+
 <glyph glyph-name="reply" unicode="&#xf112;" d="M1000 225q0-93-71-252-1-4-6-13t-7-17-7-12q-7-10-16-10-8 0-13 6t-5 14q0 5 1 15t2 13q3 38 3 69 0 56-10 101t-27 77-45 56-59 39-74 24-86 12-98 3h-125v-143q0-14-10-25t-26-11-25 11l-285 286q-11 10-11 25t11 25l285 286q11 10 25 10t26-10 10-25v-143h125q398 0 488-225 30-75 30-186z" horiz-adv-x="1000" />
 </font>
 </defs>