From 7216ce97f748988c644b1baff2ec42006e508fbc Mon Sep 17 00:00:00 2001
From: Alfredo Sumaran <alfredo@gitlab.com>
Date: Thu, 17 Mar 2016 09:48:47 -0500
Subject: Add modal dialog

---
 app/assets/stylesheets/pages/profile.scss | 17 +++++++++++++++++
 app/views/profiles/show.html.haml         | 24 +++++++++++++++++++++++-
 2 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 260179074cf..0cd37e7014f 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -197,3 +197,20 @@
     width: 105px;
   }
 }
+
+.modal-profile-crop {
+  .modal-dialog {
+    width: 380px;
+  }
+
+  .profile-crop-image-container {
+    width: 350px;
+    height: 350px;
+    margin: 0 auto;
+  }
+
+  .crop-controls {
+    padding: 10px 0 0 0;
+    text-align: center;
+  }
+}
diff --git a/app/views/profiles/show.html.haml b/app/views/profiles/show.html.haml
index cd582ba7060..2d9129470f8 100644
--- a/app/views/profiles/show.html.haml
+++ b/app/views/profiles/show.html.haml
@@ -26,7 +26,7 @@
         %a.btn.js-choose-user-avatar-button
           Browse file...
         %span.avatar-file-name.prepend-left-default.js-avatar-filename No file chosen
-        = f.file_field :avatar, class: "js-user-avatar-input hidden"
+        = f.file_field :avatar_dialog_trigger, class: "js-user-avatar-input hidden", accept: "image/*"
       .help-block
         The maximum file size allowed is 200KB.
       - if @user.avatar?
@@ -94,3 +94,25 @@
       .prepend-top-default.append-bottom-default
         = f.submit 'Update profile settings', class: "btn btn-success"
         = link_to "Cancel", user_path(current_user), class: "btn btn-cancel"
+
+.modal.modal-profile-crop
+  .modal-dialog
+    .modal-content
+      .modal-header
+        %button.close{:type => "button", :'data-dismiss' => "modal"}
+          %span
+            &times;
+        %h4.modal-title
+          Position and size your new avatar
+      .modal-body
+        .profile-crop-image-container
+          %img.modal-profile-crop-image
+        .crop-controls
+          .btn-group
+            %button.btn.btn-primary{ data: { method: "zoom", option: "0.1" } }
+              %span.fa.fa-search-plus
+            %button.btn.btn-primary{ data: { method: "zoom", option: "-0.1" } }
+              %span.fa.fa-search-minus
+      .modal-footer
+        %button.btn.btn-primary.js-upload-user-avatar{:type => "button"}
+          Set new profile picture
-- 
cgit v1.2.1