From 67c2a607aa960abb23cc6ba3c4014891bb67097d Mon Sep 17 00:00:00 2001
From: Shpuld Shpludson <shp@cock.li>
Date: Tue, 18 Dec 2018 18:26:14 +0000
Subject: Feature/bigger icons for mobile / #211

---
 src/components/delete_button/delete_button.vue         |  2 +-
 src/components/favorite_button/favorite_button.vue     |  4 ++--
 src/components/post_status_form/post_status_form.vue   |  4 ++--
 src/components/retweet_button/retweet_button.vue       |  6 +++---
 src/components/status/status.vue                       | 14 +++++++-------
 src/components/style_switcher/preview.vue              |  8 ++++----
 src/components/user_card_content/user_card_content.vue |  2 +-
 src/components/user_finder/user_finder.vue             |  5 +++--
 src/components/user_settings/user_settings.vue         |  6 +++---
 9 files changed, 26 insertions(+), 25 deletions(-)

(limited to 'src/components')

diff --git a/src/components/delete_button/delete_button.vue b/src/components/delete_button/delete_button.vue
index b458b0dc..f4c91cfd 100644
--- a/src/components/delete_button/delete_button.vue
+++ b/src/components/delete_button/delete_button.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="canDelete">
     <a href="#" v-on:click.prevent="deleteStatus()">
-      <i class='icon-cancel delete-status'></i>
+      <i class='button-icon icon-cancel delete-status'></i>
     </a>
   </div>
 </template>
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 1decd070..05ce6bd0 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -1,10 +1,10 @@
 <template>
   <div v-if="loggedIn">
-    <i :class='classes' class='favorite-button fav-active' @click.prevent='favorite()' :title="$t('tool_tip.favorite')"/>
+    <i :class='classes' class='button-icon favorite-button fav-active' @click.prevent='favorite()' :title="$t('tool_tip.favorite')"/>
     <span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span>
   </div>
   <div v-else>
-    <i :class='classes' class='favorite-button' :title="$t('tool_tip.favorite')"/>
+    <i :class='classes' class='button-icon favorite-button' :title="$t('tool_tip.favorite')"/>
     <span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span>
   </div>
 </template>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index b448faec..398f1871 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -75,11 +75,11 @@
       </div>
       <div class='alert error' v-if="error">
         Error: {{ error }}
-        <i class="icon-cancel" @click="clearError"></i>
+        <i class="button-icon icon-cancel" @click="clearError"></i>
       </div>
       <div class="attachments">
         <div class="media-upload-wrapper" v-for="file in newStatus.files">
-          <i class="fa icon-cancel" @click="removeMediaFile(file)"></i>
+          <i class="fa button-icon icon-cancel" @click="removeMediaFile(file)"></i>
           <div class="media-upload-container attachment">
             <img class="thumbnail media-upload" :src="file.image" v-if="type(file) === 'image'"></img>
             <video v-if="type(file) === 'video'" :src="file.image" controls></video>
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index c957fb77..6370f9dc 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -1,15 +1,15 @@
 <template>
   <div v-if="loggedIn">
     <template v-if="visibility !== 'private' && visibility !== 'direct'">
-      <i :class='classes' class='retweet-button icon-retweet rt-active' v-on:click.prevent='retweet()' :title="$t('tool_tip.repeat')"></i>
+      <i :class='classes' class='button-icon retweet-button icon-retweet rt-active' v-on:click.prevent='retweet()' :title="$t('tool_tip.repeat')"></i>
       <span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span>
     </template>
     <template v-else>
-      <i :class='classes' class='icon-lock' :title="$t('timeline.no_retweet_hint')"></i>
+      <i :class='classes' class='button-icon icon-lock' :title="$t('timeline.no_retweet_hint')"></i>
     </template>
   </div>
   <div v-else-if="!loggedIn">
-    <i :class='classes' class='icon-retweet' :title="$t('tool_tip.repeat')"></i>
+    <i :class='classes' class='button-icon icon-retweet' :title="$t('tool_tip.repeat')"></i>
     <span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span>
   </div>
 </template>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 3283de45..1b102d93 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -8,7 +8,7 @@
           </router-link>
         </small>
         <small class="muteWords">{{muteWordHits.join(', ')}}</small>
-        <a href="#" class="unmute" @click.prevent="toggleMute"><i class="icon-eye-off"></i></a>
+        <a href="#" class="unmute" @click.prevent="toggleMute"><i class="button-icon icon-eye-off"></i></a>
       </div>
     </template>
     <template v-else>
@@ -48,7 +48,7 @@
                     </router-link>
                   </span>
                   <a v-if="isReply && !noReplyLinks" href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)" :title="$t('tool_tip.reply')">
-                    <i class="icon-reply" @mouseenter="replyEnter(status.in_reply_to_status_id, $event)" @mouseout="replyLeave()"></i>
+                    <i class="button-icon icon-reply" @mouseenter="replyEnter(status.in_reply_to_status_id, $event)" @mouseout="replyLeave()"></i>
                   </a>
                 </span>
               </div>
@@ -63,18 +63,18 @@
               <router-link class="timeago" @click.native="activatePanel('timeline')" :to="{ name: 'conversation', params: { id: status.id } }">
                 <timeago :since="status.created_at" :auto-update="60"></timeago>
               </router-link>
-              <div class="visibility-icon" v-if="status.visibility">
+              <div class="button-icon visibility-icon" v-if="status.visibility">
                 <i :class="visibilityIcon(status.visibility)" :title="status.visibility | capitalize"></i>
               </div>
               <a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url" title="Source">
-                <i class="icon-link-ext-alt"></i>
+                <i class="button-icon icon-link-ext-alt"></i>
               </a>
               <template v-if="expandable">
                 <a href="#" @click.prevent="toggleExpanded" title="Expand">
-                  <i class="icon-plus-squared"></i>
+                  <i class="button-icon icon-plus-squared"></i>
                 </a>
               </template>
-              <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="icon-eye-off"></i></a>
+              <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="button-icon icon-eye-off"></i></a>
             </div>
           </div>
 
@@ -101,7 +101,7 @@
           <div v-if="!noHeading && !noReplyLinks" class='status-actions media-body'>
             <div v-if="loggedIn">
               <a href="#" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')">
-                <i class="icon-reply" :class="{'icon-reply-active': replying}"></i>
+                <i class="button-icon icon-reply" :class="{'icon-reply-active': replying}"></i>
               </a>
             </div>
             <retweet-button :visibility='status.visibility' :loggedIn='loggedIn' :status='status'></retweet-button>
diff --git a/src/components/style_switcher/preview.vue b/src/components/style_switcher/preview.vue
index 09a136e9..634f5b35 100644
--- a/src/components/style_switcher/preview.vue
+++ b/src/components/style_switcher/preview.vue
@@ -37,10 +37,10 @@
         </i18n>
 
         <div class="icons">
-          <i style="color: var(--cBlue)" class="icon-reply"/>
-          <i style="color: var(--cGreen)" class="icon-retweet"/>
-          <i style="color: var(--cOrange)" class="icon-star"/>
-          <i style="color: var(--cRed)" class="icon-cancel"/>
+          <i style="color: var(--cBlue)" class="button-icon icon-reply"/>
+          <i style="color: var(--cGreen)" class="button-icon icon-retweet"/>
+          <i style="color: var(--cOrange)" class="button-icon icon-star"/>
+          <i style="color: var(--cRed)" class="button-icon icon-cancel"/>
         </div>
       </div>
     </div>
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index ed8bba43..1b6ccfaa 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -3,7 +3,7 @@
   <div class="panel-heading text-center">
     <div class='user-info'>
       <router-link @click.native="activatePanel && activatePanel('timeline')" :to="{ name: 'user-settings' }" style="float: right; margin-top:16px;" v-if="!isOtherUser">
-        <i class="icon-cog usersettings" :title="$t('tool_tip.user_settings')"></i>
+        <i class="button-icon icon-cog usersettings" :title="$t('tool_tip.user_settings')"></i>
       </router-link>
       <a :href="user.statusnet_profile_url" target="_blank" class="floater" v-if="isOtherUser">
         <i class="icon-link-ext usersettings"></i>
diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue
index 9efdfab7..eeb76c35 100644
--- a/src/components/user_finder/user_finder.vue
+++ b/src/components/user_finder/user_finder.vue
@@ -7,7 +7,7 @@
       <button class="btn search-button" @click="findUser(username)">
         <i class="icon-search"/>
       </button>
-      <i class="icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/>
+      <i class="button-icon icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/>
     </template>
   </div>
 </template>
@@ -29,7 +29,8 @@
     height: 29px;
   }
   .user-finder-input {
-    max-width: 80%;
+    // TODO: do this properly without a rough guesstimate of 2 icons + paddings
+    max-width: calc(100% - 30px - 30px - 20px);
   }
 
   .search-button {
diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue
index b238571d..4bc2eeec 100644
--- a/src/components/user_settings/user_settings.vue
+++ b/src/components/user_settings/user_settings.vue
@@ -49,7 +49,7 @@
             <button class="btn btn-default" v-else-if="avatarPreview" @click="submitAvatar">{{$t('general.submit')}}</button>
             <div class='alert error' v-if="avatarUploadError">
               Error: {{ avatarUploadError }}
-              <i class="icon-cancel" @click="clearUploadError('avatar')"></i>
+              <i class="button-icon icon-cancel" @click="clearUploadError('avatar')"></i>
             </div>
           </div>
           <div class="setting-item">
@@ -66,7 +66,7 @@
             <button class="btn btn-default" v-else-if="bannerPreview" @click="submitBanner">{{$t('general.submit')}}</button>
             <div class='alert error' v-if="bannerUploadError">
               Error: {{ bannerUploadError }}
-              <i class="icon-cancel" @click="clearUploadError('banner')"></i>
+              <i class="button-icon icon-cancel" @click="clearUploadError('banner')"></i>
             </div>
           </div>
           <div class="setting-item">
@@ -81,7 +81,7 @@
             <button class="btn btn-default" v-else-if="backgroundPreview" @click="submitBg">{{$t('general.submit')}}</button>
             <div class='alert error' v-if="backgroundUploadError">
               Error: {{ backgroundUploadError }}
-              <i class="icon-cancel" @click="clearUploadError('background')"></i>
+              <i class="button-icon icon-cancel" @click="clearUploadError('background')"></i>
             </div>
           </div>
         </div>
-- 
cgit v1.2.3-70-g09d2