apply different format bar for RichText/Markdown

FlyingRadish · Nov 24, 2016 · 3f85cbe · 3f85cbe
1 parent c8b5006
commit 3f85cbe
Show file tree

Hide file tree

Showing 11 changed files with 172 additions and 56 deletions.
diff --git a/app/src/main/java/org/houxg/leamonax/editor/Editor.java b/app/src/main/java/org/houxg/leamonax/editor/Editor.java
@@ -57,6 +57,10 @@ public Editor(EditorListener listener) {
 
     public abstract void toggleItalic();
 
+    public abstract void toggleQuote();
+
+    public abstract void toggleHeading();
+
     public interface EditorListener {
         void onPageLoaded();
         void onClickedLink(String title, String url);

diff --git a/app/src/main/java/org/houxg/leamonax/editor/MarkdownEditor.java b/app/src/main/java/org/houxg/leamonax/editor/MarkdownEditor.java
@@ -115,4 +115,14 @@ public void toggleBold() {
     public void toggleItalic() {
         execJs("ZSSEditor.setItalic();");
     }
+
+    @Override
+    public void toggleQuote() {
+        execJs("ZSSEditor.setBlockquote();");
+    }
+
+    @Override
+    public void toggleHeading() {
+        execJs("ZSSEditor.setHeading();");
+    }
 }
diff --git a/app/src/main/java/org/houxg/leamonax/editor/RichTextEditor.java b/app/src/main/java/org/houxg/leamonax/editor/RichTextEditor.java
@@ -128,6 +128,16 @@ public void toggleItalic() {
         execJs("ZSSEditor.setItalic();");
     }
 
+    @Override
+    public void toggleQuote() {
+        execJs("ZSSEditor.setBlockquote();");
+    }
+
+    @Override
+    public void toggleHeading() {
+        execJs("ZSSEditor.setHeading();");
+    }
+
     private String appendPTag(String source) {
         String[] segments = source.split("\n\n");
         StringBuilder contentBuilder = new StringBuilder();

diff --git a/app/src/main/java/org/houxg/leamonax/ui/edit/EditorFragment.java b/app/src/main/java/org/houxg/leamonax/ui/edit/EditorFragment.java
@@ -32,6 +32,7 @@
 import butterknife.BindView;
 import butterknife.ButterKnife;
 import butterknife.OnClick;
+import butterknife.Optional;
 
 public class EditorFragment extends Fragment implements Editor.EditorListener {
 
@@ -44,13 +45,22 @@ public class EditorFragment extends Fragment implements Editor.EditorListener {
     private EditorFragmentListener mListener;
     private Editor mEditor;
 
-    @BindView(R.id.fl_tools)
+    @BindView(R.id.fl_container)
     View mToolContainer;
 
+    @Nullable
     @BindView(R.id.btn_bold)
     ToggleImageButton mBoldBtn;
+    @Nullable
     @BindView(R.id.btn_italic)
     ToggleImageButton mItalicBtn;
+    @Nullable
+    @BindView(R.id.btn_heading)
+    ToggleImageButton mHeadingBtn;
+    @Nullable
+    @BindView(R.id.btn_quote)
+    ToggleImageButton mQuoteBtn;
+
     @BindView(R.id.btn_order_list)
     ToggleImageButton mOrderListBtn;
     @BindView(R.id.btn_unorder_list)
@@ -92,19 +102,25 @@ public void onDetach() {
     @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
         View view = inflater.inflate(R.layout.fragment_editor, container, false);
-        ButterKnife.bind(this, view);
+
 
         Bundle arguments = savedInstanceState == null ? getArguments() : savedInstanceState;
         mIsEditingEnabled = arguments.getBoolean(ARG_ENABLE_EDIT, false);
         boolean isMarkdown = arguments.getBoolean(ARG_IS_MARKDOWN, true);
 
-        mToolContainer.setVisibility(mIsEditingEnabled ? View.VISIBLE : View.GONE);
-
+        int formatRestId;
         if (isMarkdown) {
             mEditor = new MarkdownEditor(this);
+            formatRestId = R.layout.format_bar_markdown;
         } else {
             mEditor = new RichTextEditor(this);
+            formatRestId = R.layout.format_bar_richtext;
         }
+        ViewGroup formatBarContainer = (ViewGroup) view.findViewById(R.id.fl_container);
+        View formatBar = inflater.inflate(formatRestId, formatBarContainer, false);
+        formatBarContainer.addView(formatBar, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT));
+        ButterKnife.bind(this, view);
+        mToolContainer.setVisibility(mIsEditingEnabled ? View.VISIBLE : View.GONE);
         mEditor.init(mWebView);
         return view;
     }
@@ -191,16 +207,30 @@ void toggleUnorderList() {
         mEditor.toggleUnorderList();
     }
 
+    @Optional
     @OnClick(R.id.btn_bold)
     void toggleBold() {
         mEditor.toggleBold();
     }
 
+    @Optional
     @OnClick(R.id.btn_italic)
     void toggleItalic() {
         mEditor.toggleItalic();
     }
 
+    @Optional
+    @OnClick(R.id.btn_heading)
+    void toggleHeading() {
+        mEditor.toggleHeading();
+    }
+
+    @Optional
+    @OnClick(R.id.btn_quote)
+    void toggleQuote() {
+        mEditor.toggleQuote();
+    }
+
     @OnClick(R.id.btn_undo)
     void undo() {
         mEditor.undo();

diff --git a/...-xxhdpi/ic_format_quote_black_disable.png → ...awable-xxhdpi/ic_format_quote_disable.png b/...-xxhdpi/ic_format_quote_black_disable.png → ...awable-xxhdpi/ic_format_quote_disable.png
diff --git a/...e-xxhdpi/ic_format_quote_black_enable.png → ...rawable-xxhdpi/ic_format_quote_enable.png b/...e-xxhdpi/ic_format_quote_black_enable.png → ...rawable-xxhdpi/ic_format_quote_enable.png
diff --git a/app/src/main/res/drawable-xxhdpi/ic_heading_disable.png b/app/src/main/res/drawable-xxhdpi/ic_heading_disable.png
diff --git a/app/src/main/res/drawable-xxhdpi/ic_heading_enable.png b/app/src/main/res/drawable-xxhdpi/ic_heading_enable.png
diff --git a/app/src/main/res/layout/format_bar_markdown.xml b/app/src/main/res/layout/format_bar_markdown.xml
@@ -0,0 +1,55 @@
+<org.houxg.flexlayout.FlexLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/fl_tools"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_alignParentBottom="true"
+    android:background="#EEEEEE"
+    app:justify_content="space_between">
+
+    <ImageView
+        android:id="@+id/btn_undo"
+        style="@style/FormatButton"
+        android:src="@drawable/ic_undo_black_disable" />
+
+    <ImageView
+        android:id="@+id/btn_redo"
+        style="@style/FormatButton"
+        android:src="@drawable/ic_redo_black_disable" />
+
+    <org.houxg.leamonax.widget.ToggleImageButton
+        android:id="@+id/btn_heading"
+        style="@style/FormatButton"
+        app:checkedDrawable="@drawable/ic_heading_enable"
+        app:uncheckedDrawable="@drawable/ic_heading_disable" />
+
+    <org.houxg.leamonax.widget.ToggleImageButton
+        android:id="@+id/btn_quote"
+        style="@style/FormatButton"
+        app:checkedDrawable="@drawable/ic_format_quote_enable"
+        app:uncheckedDrawable="@drawable/ic_format_quote_disable" />
+
+    <org.houxg.leamonax.widget.ToggleImageButton
+        android:id="@+id/btn_unorder_list"
+        style="@style/FormatButton"
+        app:checkedDrawable="@drawable/ic_format_list_bulleted_black_enable"
+        app:uncheckedDrawable="@drawable/ic_format_list_bulleted_black_disable" />
+
+    <org.houxg.leamonax.widget.ToggleImageButton
+        android:id="@+id/btn_order_list"
+        style="@style/FormatButton"
+        app:checkedDrawable="@drawable/ic_format_list_numbered_black_enable"
+        app:uncheckedDrawable="@drawable/ic_format_list_numbered_black_disable" />
+
+
+    <ImageView
+        android:id="@+id/btn_img"
+        style="@style/FormatButton"
+        android:src="@drawable/ic_insert_photo_black_disable" />
+
+    <org.houxg.leamonax.widget.ToggleImageButton
+        android:id="@+id/btn_link"
+        style="@style/FormatButton"
+        android:src="@drawable/ic_insert_link_black_disable" />
+
+</org.houxg.flexlayout.FlexLayout>
diff --git a/app/src/main/res/layout/format_bar_richtext.xml b/app/src/main/res/layout/format_bar_richtext.xml
@@ -0,0 +1,55 @@
+<org.houxg.flexlayout.FlexLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/fl_tools"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_alignParentBottom="true"
+    android:background="#EEEEEE"
+    app:justify_content="space_between">
+
+    <ImageView
+        android:id="@+id/btn_undo"
+        style="@style/FormatButton"
+        android:src="@drawable/ic_undo_black_disable" />
+
+    <ImageView
+        android:id="@+id/btn_redo"
+        style="@style/FormatButton"
+        android:src="@drawable/ic_redo_black_disable" />
+
+    <org.houxg.leamonax.widget.ToggleImageButton
+        android:id="@+id/btn_bold"
+        style="@style/FormatButton"
+        app:checkedDrawable="@drawable/ic_format_bold_black_enable"
+        app:uncheckedDrawable="@drawable/ic_format_bold_black_disable" />
+
+    <org.houxg.leamonax.widget.ToggleImageButton
+        android:id="@+id/btn_italic"
+        style="@style/FormatButton"
+        app:checkedDrawable="@drawable/ic_format_italic_black_enable"
+        app:uncheckedDrawable="@drawable/ic_format_italic_black_disable" />
+
+    <org.houxg.leamonax.widget.ToggleImageButton
+        android:id="@+id/btn_unorder_list"
+        style="@style/FormatButton"
+        app:checkedDrawable="@drawable/ic_format_list_bulleted_black_enable"
+        app:uncheckedDrawable="@drawable/ic_format_list_bulleted_black_disable" />
+
+    <org.houxg.leamonax.widget.ToggleImageButton
+        android:id="@+id/btn_order_list"
+        style="@style/FormatButton"
+        app:checkedDrawable="@drawable/ic_format_list_numbered_black_enable"
+        app:uncheckedDrawable="@drawable/ic_format_list_numbered_black_disable" />
+
+
+    <ImageView
+        android:id="@+id/btn_img"
+        style="@style/FormatButton"
+        android:src="@drawable/ic_insert_photo_black_disable" />
+
+    <org.houxg.leamonax.widget.ToggleImageButton
+        android:id="@+id/btn_link"
+        style="@style/FormatButton"
+        android:src="@drawable/ic_insert_link_black_disable" />
+
+</org.houxg.flexlayout.FlexLayout>
diff --git a/app/src/main/res/layout/fragment_editor.xml b/app/src/main/res/layout/fragment_editor.xml
@@ -1,65 +1,17 @@
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical">
 
-    <org.houxg.flexlayout.FlexLayout
-        android:id="@+id/fl_tools"
+    <FrameLayout
+        android:id="@+id/fl_container"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_alignParentBottom="true"
-        app:justify_content="space_between"
-        android:background="#EEEEEE">
-
-        <ImageView
-            android:id="@+id/btn_img"
-            style="@style/FormatButton"
-            android:src="@drawable/ic_insert_photo_black_disable" />
-
-        <org.houxg.leamonax.widget.ToggleImageButton
-            android:id="@+id/btn_link"
-            style="@style/FormatButton"
-            android:src="@drawable/ic_insert_link_black_disable" />
-
-        <org.houxg.leamonax.widget.ToggleImageButton
-            android:id="@+id/btn_order_list"
-            style="@style/FormatButton"
-            app:checkedDrawable="@drawable/ic_format_list_bulleted_black_enable"
-            app:uncheckedDrawable="@drawable/ic_format_list_bulleted_black_disable" />
-
-        <org.houxg.leamonax.widget.ToggleImageButton
-            android:id="@+id/btn_unorder_list"
-            style="@style/FormatButton"
-            app:checkedDrawable="@drawable/ic_format_list_numbered_black_enable"
-            app:uncheckedDrawable="@drawable/ic_format_list_numbered_black_disable" />
-
-        <org.houxg.leamonax.widget.ToggleImageButton
-            android:id="@+id/btn_bold"
-            style="@style/FormatButton"
-            app:checkedDrawable="@drawable/ic_format_bold_black_enable"
-            app:uncheckedDrawable="@drawable/ic_format_bold_black_disable" />
-
-        <org.houxg.leamonax.widget.ToggleImageButton
-            android:id="@+id/btn_italic"
-            style="@style/FormatButton"
-            app:checkedDrawable="@drawable/ic_format_italic_black_enable"
-            app:uncheckedDrawable="@drawable/ic_format_italic_black_disable" />
-
-        <ImageView
-            android:id="@+id/btn_undo"
-            style="@style/FormatButton"
-            android:src="@drawable/ic_undo_black_disable" />
-
-        <ImageView
-            android:id="@+id/btn_redo"
-            style="@style/FormatButton"
-            android:src="@drawable/ic_redo_black_disable" />
-    </org.houxg.flexlayout.FlexLayout>
+        android:layout_alignParentBottom="true" />
 
     <org.houxg.leamonax.widget.LeaWebView
         android:id="@+id/web_editor"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:layout_above="@id/fl_tools" />
+        android:layout_above="@id/fl_container" />
 </RelativeLayout>