feat(profile): remove photo when user already uploaded (#3998)

Satellite-im · Jul 15, 2022 · 851c99a · 851c99a
1 parent fbd09d1
commit 851c99a
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 3 deletions.
diff --git a/components/views/settings/pages/profile/Profile.html b/components/views/settings/pages/profile/Profile.html
@@ -67,6 +67,9 @@
                   />
                 </div>
               </div>
+              <button class="remove-button" @click="removeProfileImage">
+                <span>{{ $t('pages.settings.profile.remove_image') }}</span>
+              </button>
               <div class="username">
                 <TypographyTitle :size="6" :text="accounts.details.name" />
               </div>

diff --git a/components/views/settings/pages/profile/Profile.less b/components/views/settings/pages/profile/Profile.less
@@ -30,19 +30,29 @@
       .profile-section {
         display: grid;
         grid-template-columns: auto 1fr 1fr 1fr;
-        grid-template-rows: 1fr 1fr 1fr;
+        grid-template-rows: auto 1fr auto 1fr;
         gap: 0px 0px;
         grid-template-areas:
           'subtitle subtitle subtitle subtitle'
           'photo username username username'
+          'remove-button . . .'
           'status-input status-input status-input status-input';
       }
 
+      .subtitle {
+        margin-bottom: @light-spacing;
+      }
+
       .photo {
         align-self: center;
         margin: 0 @normal-spacing @xlight-spacing 0;
       }
 
+      .remove-button {
+        margin-left: 0.3rem;
+        margin-top: 0;
+      }
+
       .status-input {
         align-self: center;
       }
@@ -115,12 +125,13 @@
   .profile-section {
     display: grid;
     grid-template-columns: 0.3fr 1fr 1fr;
-    grid-template-rows: 0.5fr 0.5fr 0.5fr;
+    grid-template-rows: 0.5fr 0.5fr 0.5fr auto;
     gap: 0px 16px;
     grid-template-areas:
       'subtitle subtitle subtitle'
       'photo username username'
-      'photo status-input status-input';
+      'photo status-input status-input'
+      'remove-button . .';
   }
 
   .subtitle {
@@ -131,6 +142,15 @@
     grid-area: photo;
   }
 
+  .remove-button {
+    display: flex;
+    grid-area: remove-button;
+    margin-top: @xlight-spacing;
+    margin-left: 1.1rem;
+    font-size: @mini-text-size;
+    &:extend(.color-danger);
+  }
+
   .username {
     align-self: center;
     grid-area: username;
@@ -147,16 +167,19 @@
 
 .profile-photo-column {
   max-width: 100px;
+
   .profile-photo {
     position: relative;
     height: @size;
     width: @size;
     cursor: pointer;
+
     .is-rounded,
     .is-square {
       max-width: @full !important;
       max-height: @full !important;
     }
+
     .plus-button {
       &:extend(.first-layer);
       right: 0;
@@ -248,9 +271,11 @@
   left: 0;
   right: 0;
   top: 0;
+
   .content {
     position: relative;
     width: 500px;
+
     .cropper-mask {
       &:extend(.blur-less);
       position: fixed;

diff --git a/components/views/settings/pages/profile/index.vue b/components/views/settings/pages/profile/index.vue
@@ -137,6 +137,11 @@ export default Vue.extend({
         reader.readAsDataURL(files[0])
       }
     },
+    removeProfileImage() {
+      this.croppedImage = ''
+      // TODO: Update with IPFS method
+      // this.$store.dispatch('accounts/updateProfilePhoto', '')
+    },
   },
 })
 </script>

diff --git a/locales/en-US.js b/locales/en-US.js
@@ -499,6 +499,7 @@ export default {
         title: 'Profile',
         subtitle: 'Update your profile photo, status, banners and more.',
         status_placeholder: 'Some super interesting status message',
+        remove_image: 'Remove',
         info: {
           title: 'Account Info',
           subtitle: