Merge pull request #591 from pixelfed/frontend-ui-refactor

Frontend ui refactor

app/Status.php

@@ -2,7 +2,7 @@
 
 namespace App;
 
-use Auth;
+use Auth, Cache;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\SoftDeletes;
 use Storage;
@@ -37,26 +37,29 @@ class Status extends Model
 
     public function viewType()
     {
-        $media = $this->firstMedia();
-        $mime = explode('/', $media->mime)[0];
-        $count = $this->media()->count();
-        $type = ($mime == 'image') ? 'image' : 'video';
-        if($count > 1) {
-            $type = ($type == 'image') ? 'album' : 'video-album';
-        }
-
-        return $type;
+        return Cache::remember('status:view-type:'.$this->id, 40320, function() {
+            $media = $this->firstMedia();
+            $mime = explode('/', $media->mime)[0];
+            $count = $this->media()->count();
+            $type = ($mime == 'image') ? 'image' : 'video';
+            if($count > 1) {
+                $type = ($type == 'image') ? 'album' : 'video-album';
+            }
+            return $type;
+        });
     }
 
     public function thumb($showNsfw = false)
     {
-        $type = $this->viewType();
-        $is_nsfw = !$showNsfw ? $this->is_nsfw : false;
-        if ($this->media->count() == 0 || $is_nsfw || !in_array($type,['image', 'album', 'video'])) {
-            return 'data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==';
-        }
-
-        return url(Storage::url($this->firstMedia()->thumbnail_path));
+        return Cache::remember('status:thumb:'.$this->id, 40320, function() use ($showNsfw) {
+            $type = $this->viewType();
+            $is_nsfw = !$showNsfw ? $this->is_nsfw : false;
+            if ($this->media->count() == 0 || $is_nsfw || !in_array($type,['image', 'album', 'video'])) {
+                return 'data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==';
+            }
+
+            return url(Storage::url($this->firstMedia()->thumbnail_path));
+        });
     }
 
     public function url()

resources/views/settings/home.blade.php

@@ -72,7 +72,32 @@
 
 @push('scripts')
 <script type="text/javascript">
-  $(document).on('click', '.modal-update', function(e) {
+
+  $(document).on('click', '.modal-close', function(e) {
+    swal.close();
+  });
+
+  $('#bio').on('change keyup paste', function(e) {
+    let el = $(this);
+    let len = el.val().length;
+    let limit = el.data('max-length');
+
+    if(len > 100) {
+      el.attr('rows', '4');
+    }
+
+    let val = len + ' / ' + limit;
+
+    if(len > limit) {
+      let diff = len - limit;
+      val = '<span class="text-danger">-' + diff + '</span> / ' + limit;
+    }
+
+    $('.bio-counter').html(val);
+  });
+
+  $(document).on('click', '.change-profile-photo', function(e) {
+    e.preventDefault();
     swal({
       title: 'Upload Photo',
       content: {
@@ -90,6 +115,9 @@
         }
       }
     }).then((res) => {
+      if(!res) {
+        return;
+      }
       const input = $('#photoUploadInput')[0];
       const photo = input.files[0];
       const form = new FormData();
@@ -107,53 +135,5 @@
       });
     });
   });
-
-  $(document).on('click', '.modal-close', function(e) {
-    swal.close();
-  });
-
-  $('#bio').on('change keyup paste', function(e) {
-    let el = $(this);
-    let len = el.val().length;
-    let limit = el.data('max-length');
-
-    if(len > 100) {
-      el.attr('rows', '4');
-    }
-
-    let val = len + ' / ' + limit;
-
-    if(len > limit) {
-      let diff = len - limit;
-      val = '<span class="text-danger">-' + diff + '</span> / ' + limit;
-    }
-
-    $('.bio-counter').html(val);
-  });
-
-  $(document).on('click', '.change-profile-photo', function(e) {
-    e.preventDefault();
-    var content = $('<ul>').addClass('list-group');
-    var upload = $('<li>').text('Upload photo').addClass('list-group-item');
-    content.append(upload);
-    const list = document.createElement('ul');
-    list.className = 'list-group';
-
-    const uploadPhoto = document.createElement('li');
-    uploadPhoto.innerHTML = 'Upload Photo';
-    uploadPhoto.className = 'list-group-item font-weight-bold text-primary modal-update';
-    list.appendChild(uploadPhoto);
-
-    const cancel = document.createElement('li');
-    cancel.innerHTML = 'Cancel';
-    cancel.className = 'list-group-item modal-close';
-    list.appendChild(cancel);
-
-    swal({
-      title: 'Change Profile Photo',
-      content: list,
-      buttons: false
-    });
-  });
 </script>
 @endpush