Merge pull request #7235 from AugierLe42e/md-editor-mobile-view

Markdown editor final chapter: add editor on publisher, comments and conversation of mobile view

Changelog.md

@@ -47,6 +47,7 @@ If so, please delete it since it will prevent the federation from working proper
 * Add markdown editor for comments and conversations [#7482](https://github.com/diaspora/diaspora/pull/7482)
 * Improve responsive header in desktop version [#7509](https://github.com/diaspora/diaspora/pull/7509)
 * Support cmd+enter to submit posts, comments and conversations [#7524](https://github.com/diaspora/diaspora/pull/7524)
+* Add markdown editor for posts, comments and conversations on mobile [#7235](https://github.com/diaspora/diaspora/pull/7235)
 
 # 0.6.8.0
 

app/assets/javascripts/mobile/mobile.js

-// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
-
 /*   Copyright (c) 2010-2011, Diaspora Inc.  This file is
  *   licensed under the Affero General Public License version 3 or later.  See
  *   the COPYRIGHT file.
  */
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later
+
 //= require jquery-textchange
 //= require charcount
 //= require js-routes
@@ -18,6 +18,8 @@
 //= require helpers/i18n
 //= require helpers/profile_photo_uploader
 //= require helpers/tags_autocomplete
+//= require bootstrap-markdown/bootstrap-markdown
+//= require helpers/markdown_editor
 //= require widgets/timeago
 //= require mobile/mobile_application
 //= require mobile/mobile_file_uploader

app/assets/javascripts/mobile/mobile_comments.js

@@ -11,6 +11,8 @@
     initialize: function() {
       var self = this;
 
+      new Diaspora.MarkdownEditor(".comment_box");
+
       this.stream().on("tap click", "a.show-comments", function(evt){
         evt.preventDefault();
         self.toggleComments($(this));

app/assets/javascripts/mobile/mobile_conversations.js

 (function() {
   Diaspora.Mobile.Conversations = {
     initialize: function() {
+      new Diaspora.MarkdownEditor(".conversation-message-text");
       if (Diaspora.Page !== "ConversationsNew") { return; }
       $(document).on("ajax:success", "form#new-conversation", this.conversationCreateSuccess);
       $(document).on("ajax:error", "form#new-conversation", this.conversationCreateError);

app/assets/javascripts/mobile/publisher.js

@@ -46,4 +46,6 @@ $(document).ready(function(){
     evt.preventDefault();
     $("#new_status_message").submit();
   });
+
+  new Diaspora.MarkdownEditor("#status_message_text");
 });

app/assets/stylesheets/markdown-editor.scss

@@ -42,6 +42,7 @@
 
   .btn-group {
     margin-bottom: 8px;
+    &:first-child { margin-left: 0; }
 
     [class^="entypo-"],
     [class*="entypo-"] {

app/assets/stylesheets/mobile/markdown_editor.scss

+.md-editor {
+  border: 1px solid $light-grey;
+  border-radius: $btn-border-radius-base;
+
+  &.active { border-color: $text-grey; }
+}

app/assets/stylesheets/mobile/mobile.scss

@@ -16,6 +16,8 @@
 @import "mobile/stream_element";
 @import "mobile/comments";
 @import 'mobile/openid_connect_error_page';
+@import 'markdown-editor';
+@import 'mobile/markdown_editor';
 
 @import 'typography';
 
@@ -42,8 +44,6 @@ h3 {  margin-top: 0; }
 .clear { clear: both; }
 #main { padding: 56px 10px 0 10px; }
 
-textarea { resize: vertical; }
-
 .avatar {
   border-radius: 4px;
 }
@@ -403,11 +403,6 @@ footer {
   .counter {
     font-size: 14px;
   }
-
-  textarea {
-    min-width: 100%;
-    max-width: 100%;
-  }
 }
 
 select {
@@ -538,13 +533,6 @@ form#new_conversation.new_conversation {
   }
 }
 
-textarea#conversation_text {
-  font-size: larger;
-  width: 100%;
-  min-width: 100%;
-  max-width: 100%;
-}
-
 .registrations_error,
 .registrations_notice {
   color: #DF0101;
@@ -713,33 +701,6 @@ select#aspect_ids_ {
   position: relative;
   padding-right: 10px;
 
-  #hide_publisher  {
-    opacity: 0.3;
-    z-index: 5;
-    padding: 3px;
-    position: absolute;
-    right: 6px;
-    top: 0;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-
-  &.active {
-    border: 1px solid $border-dark-grey;
-  }
-
-  textarea {
-    z-index: 2;
-    border: none;
-
-    &:focus {
-      outline: 0;
-      background: transparent;
-    }
-  }
-
   &.with_attachments {
     padding-bottom: 55px;
     border: 1px solid $border-medium-grey;