Merge pull request #676 from cmho/274-add-comment-button

[274] Add comment button to comment form where browser has 'Touch' event enabled

resources/assets/js/components.js

@@ -25,6 +25,13 @@ pixelfed.readmore = () => {
   });
 };
 
+try {
+    document.createEvent("TouchEvent");
+    $('body').addClass('touch');
+} catch (e) {
+    return false;
+}
+
 window.InfiniteScroll = require('infinite-scroll');
 window.filesize = require('filesize');
 window.Plyr = require('plyr');
@@ -137,10 +144,10 @@ window.pixelfed.copyToClipboard = (str) => {
   const el = document.createElement('textarea');
   el.value = str;
   el.setAttribute('readonly', '');
-  el.style.position = 'absolute';                 
+  el.style.position = 'absolute';
   el.style.left = '-9999px';
   document.body.appendChild(el);
-  const selected = 
+  const selected =
     document.getSelection().rangeCount > 0
       ? document.getSelection().getRangeAt(0)
       : false;
@@ -162,4 +169,4 @@ $(document).ready(function() {
 const warningTitleCSS = 'color:red; font-size:60px; font-weight: bold; -webkit-text-stroke: 1px black;';
 const warningDescCSS = 'font-size: 18px;';
 console.log('%cStop!', warningTitleCSS);
-console.log("%cThis is a browser feature intended for developers. If someone told you to copy and paste something here to enable a Pixelfed feature or \"hack\" someone's account, it is a scam and will give them access to your Pixelfed account.", warningDescCSS);
+console.log("%cThis is a browser feature intended for developers. If someone told you to copy and paste something here to enable a Pixelfed feature or \"hack\" someone's account, it is a scam and will give them access to your Pixelfed account.", warningDescCSS);

resources/assets/js/components/PostComponent.vue

@@ -56,11 +56,11 @@
        </div>
         <div class="col-12 col-md-8 px-0 mx-0">
             <div class="postPresenterLoader text-center">
-              <div class="lds-ring"><div></div><div></div><div></div><div></div></div> 
+              <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
             </div>
             <div class="postPresenterContainer d-none d-flex justify-content-center align-items-center">
               <div v-if="status.pf_type === 'photo'" class="w-100">
-                <photo-presenter :status="status"></photo-presenter>  
+                <photo-presenter :status="status"></photo-presenter>
               </div>
 
               <div v-else-if="status.pf_type === 'video'" class="w-100">
@@ -156,6 +156,7 @@
               <input type="hidden" name="_token" value="">
               <input type="hidden" name="item" :value="statusId">
               <input class="form-control" name="comment" placeholder="Add a comment..." autocomplete="off">
+              <input type="submit" value="Send" class="btn btn-primary comment-submit" />
             </form>
           </div>
         </div>
@@ -164,10 +165,10 @@
     </div>
   </div>
 
-  <b-modal ref="likesModal" 
+  <b-modal ref="likesModal"
     id="l-modal"
-    hide-footer 
-    centered 
+    hide-footer
+    centered
     title="Likes"
     body-class="list-group-flush p-0">
     <div class="list-group">
@@ -195,10 +196,10 @@
       </infinite-loading>
     </div>
   </b-modal>
-  <b-modal ref="sharesModal" 
+  <b-modal ref="sharesModal"
     id="s-modal"
-    hide-footer 
-    centered 
+    hide-footer
+    centered
     title="Shares"
     body-class="list-group-flush p-0">
     <div class="list-group">
@@ -281,7 +282,7 @@ export default {
         $('head title').text(title);
       }
     },
-    
+
     methods: {
       authCheck() {
         let authed = $('body').hasClass('loggedIn');
@@ -510,4 +511,4 @@ export default {
       }
     }
 }
-</script>
+</script>

resources/assets/sass/custom.scss

@@ -267,6 +267,26 @@ body, button, input, textarea {
 .card {
   box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
   border: none;
+
+  .comment-submit {
+      display: none;
+      position: absolute;
+      bottom: 12px;
+      right: 20px;
+      width: 60px;
+      text-align: center;
+      border-radius: 0 3px 3px 0;
+  }
+}
+
+.touch .card {
+    input[name="comment"] {
+        padding-right: 70px;
+    }
+
+    .comment-submit {
+        display: block;
+    }
 }
 
 .box-shadow {
@@ -319,7 +339,7 @@ details summary::-webkit-details-marker {
   box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
   border-radius: 5px;
   padding: .5em 1em .5em .5em;
-} 
+}
 
 .input-elevated::placeholder {
   color: #838D99;
@@ -417,7 +437,7 @@ details summary::-webkit-details-marker {
     background: rgba(0,0,0,0.04);
 }
 
-.timeline-sidenav.nav-pills .nav-link.active, 
+.timeline-sidenav.nav-pills .nav-link.active,
 .timeline-sidenav.nav-pills .show > .nav-link {
     color: #08d;
     background: transparent;
@@ -434,4 +454,4 @@ details summary::-webkit-details-marker {
 
 .notification-tooltip .arrow::before {
   border-bottom-color:#dc3545 !important;
-}
+}