Add confirm to grid delete button

Author: jjeffryes

css/obBase.css

@@ -747,11 +747,45 @@ h6, .h6 {
 .gridItemControls .btn-gridItemControl {
   text-align: center;
   padding: 0;
-  opacity: .75;
   font-weight: 400;
   font-size: 12px;
 }
 
+.gridItemControls .btn-gridItemControl .gridItemOverlay {
+  position: absolute;
+  bottom: 100%;
+  min-width: 190px;
+  padding: 10px;
+  right: 0;
+  font-size: 16px;
+  font-weight: 700;
+  border-width: 1px;
+  border-style: solid;
+  border-right-width: 0;
+  border-top-left-radius: 2px;
+}
+
+.gridItemControls .btn-gridItemControl .gridItemOverlay .btn {
+  font-size: 15px;
+  font-weight: 400;
+}
+
+.gridItemControls .btn-gridItemControl .gridItemOverlay:before {
+  content: "";
+  position: absolute;
+  right: 40px;
+  top: 100%;
+  width: 12px;
+  height: 12px;
+  transform: rotate(45deg);
+  -webkit-clip-path: polygon(100% 0, 0% 100%, 100% 100%);
+  border-width: 1px;
+  border-style: solid;
+  border-color: inherit;
+  background: inherit;
+  margin-top: -7px;
+}
+
 .gridItemControls .btn-gridItemControl:hover {
   opacity: 1;
 }
@@ -4729,6 +4763,31 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   display: none;
 }
 
+.buyWizardMap .mapWrap {
+  background-color: #eeeae1;
+  height: 100%;
+}
+
+.backToTop {
+  position: fixed;
+  bottom: 15px;
+  right: 73px;
+  padding: 10px;
+  background-color: #252525;
+  transform: translateY(100%);
+  opacity: 0;
+  transition: transform 300ms ease, right 0.5s ease;
+}
+
+.backToTop.slideUp {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+#ov1.chatOpen .backToTop {
+  right: 303px;
+}
+
 /*========== utility classes ==========*/
 
 /* the #ov1 id is on the HTML tag. It is used to force specificity
@@ -5947,6 +6006,7 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
 }
 
 #ov1 .fadeIn {
+  /* use fadeOut on items that should have fadeIn added to them */
   opacity: 1;
   pointer-events: auto;
   transition: opacity .3s cubic-bezier(0, 0, 0.2, 1);
@@ -6176,6 +6236,10 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
   background: #262626 !important;
 }
 
+#ov1.notFancy .addressFormOpened .buyWizardMap .blurMore {
+  display: none;
+}
+
 #ov1.notFancy .disabled,
 #ov1.notFancy #userPage .disabled,
 #ov1.notFancy #obContainer .disabled,
@@ -6236,32 +6300,3 @@ input[type="checkbox"].fieldItem:checked + label .togLabelOff {
 #ov1 .TODO.TODO.TODO.TODO.TODO {
   display: none; /* hide in production */
 }
-
-#ov1.notFancy .addressFormOpened .buyWizardMap .blurMore {
-  display: none;
-}
-
-.buyWizardMap .mapWrap {
-  background-color: #eeeae1;
-  height: 100%;  
-}
-
-.backToTop {
-  position: fixed;
-  bottom: 15px;
-  right: 73px;
-  padding: 10px;
-  background-color: #252525;
-  transform: translateY(100%);
-  opacity: 0;
-  transition: transform 300ms ease, right 0.5s ease;
-}
-
-.backToTop.slideUp {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-#ov1.chatOpen .backToTop {
-  right: 303px;
-}

js/templates/itemShort.html

@@ -36,46 +36,53 @@
       <div>
         <% if(ob.discover) { %>
           <div class="btn-gridItemControl borderRight custCol-border js-about">
-            <span class="ion-ios-book fontSize11 marginRight2 textOpacity1"></span>
-            <%= polyglot.t('About') %>
+            <span class="ion-ios-book fontSize11 marginRight2 txt-fade"></span>
+            <span class="txt-fade"><%= polyglot.t('About') %></span>
           </div>
 
           <% if(!ob.micro && !ob.hideFollow){ %>
             <div class="btn-gridItemControl borderRight custCol-border js-userShortUnfollow <% if(!ob.ownFollowing){ %> hide <% } %>">
-              <span class="ion-eye-disabled fontSize11 marginRight2 textOpacity1"></span>
+              <span class="ion-eye-disabled fontSize11 marginRight2 txt-fade"></span>
               <%= polyglot.t('Unfollow') %>
             </div>
             <div class="btn-gridItemControl borderRight custCol-border js-userShortFollow <% if(ob.ownFollowing){ %> hide <% } %>">
-              <span class="ion-person-add fontSize11 marginRight2 textOpacity1"></span>            
-              <%= polyglot.t('Follow') %>
+              <span class="ion-person-add fontSize11 marginRight2 txt-fade"></span>
+              <span class="txt-fade"><%= polyglot.t('Follow') %></span>
             </div>
           <% } %>
 
           <div class="btn-gridItemControl custCol-border <%= !ob.isBlocked ? 'js-blockUser' : 'js-unblockUser' %>">
-            <span class="<%= !ob.isBlocked ? 'ion-sad' : 'ion-happy' %> fontSize11 marginRight2 textOpacity1"></span>
-            <%= !ob.isBlocked ? polyglot.t('Block') : polyglot.t('Unblock') %>
+            <span class="<%= !ob.isBlocked ? 'ion-sad' : 'ion-happy' %> fontSize11 marginRight2 txt-fade"></span>
+            <span class="txt-fade"><%= !ob.isBlocked ? polyglot.t('Block') : polyglot.t('Unblock') %></span>
           </div>
         <% } %>
 
         <% if(ob.ownPage){ %>
           <div class="btn-gridItemControl borderRight custCol-border js-itemShortEdit">
-            <span class="ion-compose fontSize11 marginRight2 textOpacity1"></span>
-            <%= polyglot.t('Edit') %>
+            <span class="ion-compose fontSize11 marginRight2 txt-fade"></span>
+            <span class="txt-fade"><%= polyglot.t('Edit') %></span>
           </div>  
           <div class="btn-gridItemControl borderRight custCol-border js-itemShortClone">
-            <span class="ion-ios-copy fontSize11 marginRight2 textOpacity1"></span>
-            <%= polyglot.t('Clone') %>
+            <span class="ion-ios-copy fontSize11 marginRight2 txt-fade"></span>
+            <span class="txt-fade"><%= polyglot.t('Clone') %></span>
           </div>
-          <div class="btn-gridItemControl borderRight custCol-border js-itemShortDelete">
-            <span class="ion-trash-b fontSize11 marginRight2 textOpacity1"></span>
-            <%= polyglot.t('Delete') %>
+          <div class="btn-gridItemControl custCol-border js-itemShortDelete">
+            <span class="ion-trash-b fontSize11 marginRight2 txt-fade"></span>
+            <span class="txt-fade"><%= polyglot.t('Delete') %></span>
+            <div class="gridItemOverlay custCol-primary custCol-border fadeOut js-deleteOverlay">
+              <span>Are you sure?</span>
+              <div>
+                <a class="btn btn-txt custCol-secondary js-itemShortDeleteCancel">Cancel</a>
+                <a class="btn btn-txt custCol-secondary js-itemShortDeleteConfirm">Yes</a>
+              </div>
+            </div>
           </div>
         <% } %>
 
         <% if(!ob.ownPage && ob.discover === undefined){ %>
           <div class="btn-gridItemControl borderRight custCol-border js-item" data-id="<%= ob.contract_hash %>">
-            <span class="ion-ios-pricetag fontSize10 marginRight2 textOpacity1"></span>
-            <%= polyglot.t('ViewListing') %>
+            <span class="ion-ios-pricetag fontSize10 marginRight2 txt-fade"></span>
+            <span class="txt-fade"><%= polyglot.t('ViewListing') %></span>
           </div>          
         <% } %>
       </div>

js/views/itemShortVw.js

@@ -15,6 +15,8 @@ module.exports = baseVw.extend({
     'click .js-about': 'aboutClick',
     'click .js-itemShortEdit': 'editItemClick',
     'click .js-itemShortDelete': 'deleteItemClick',
+    'click .js-itemShortDeleteConfirm': 'deleteItem',
+    'click .js-itemShortDeleteCancel': 'cancelConfirmDelete',
     'click .js-itemShortClone': 'cloneItemClick',
     'click .js-userShortFollow': 'followUser',
     'click .js-userShortUnfollow': 'unfollowUser',
@@ -92,7 +94,18 @@ module.exports = baseVw.extend({
     window.obEventBus.trigger('itemShortEdit', {'contract_hash': this.model.get('contract_hash')});
   },
 
-  deleteItemClick: function(){
+  deleteItemClick: function(e){
+    console.log("1")
+    this.$(e.target).closest('.gridItemControls').find(".js-deleteOverlay").addClass("fadeIn");
+  },
+
+  cancelConfirmDelete: function(e){
+    console.log("2")
+    e.stopPropagation();
+    this.$(e.target).closest('.gridItemControls').find(".js-deleteOverlay").removeClass("fadeIn");
+  },
+
+  deleteItem: function(){
     window.obEventBus.trigger('itemShortDelete', {'contract_hash': this.model.get('contract_hash')});
   },