visual editor : change font size

AnkiDroid/src/main/java/com/ichi2/anki/multimediacard/activity/VisualEditorActivity.java

@@ -18,12 +18,14 @@
 import com.ichi2.anki.cardviewer.CardAppearance;
 import com.ichi2.anki.UIUtils;
 import com.ichi2.anki.dialogs.DiscardChangesDialog;
+import com.ichi2.anki.dialogs.WhiteBoardWidthDialog;
 import com.ichi2.anki.multimediacard.IMultimediaEditableNote;
 import com.ichi2.anki.multimediacard.fields.AudioRecordingField;
 import com.ichi2.anki.multimediacard.fields.IField;
 import com.ichi2.anki.multimediacard.fields.ImageField;
 import com.ichi2.anki.multimediacard.fields.TextField;
 import com.ichi2.anki.multimediacard.impl.MultimediaEditableNote;
+import com.ichi2.anki.multimediacard.visualeditor.FontSelectionDialog;
 import com.ichi2.anki.multimediacard.visualeditor.VisualEditorFunctionality;
 import com.ichi2.anki.multimediacard.visualeditor.VisualEditorWebView;
 import com.ichi2.anki.reviewer.ReviewerCustomFonts;
@@ -204,6 +206,7 @@ private void setupEditorScrollbarButtons(Context context) {
             view.setOnClickListener(v -> function.run());
             setTooltip(view, resources.getString(tooltipId));
         };
+        setupAndroidListener.apply(R.id.editor_button_font_size, this::openFontSelectionDialog, R.string.visual_editor_change_font);
         setupAndroidListener.apply(R.id.editor_button_white_board, this::openWhiteBoard, R.string.visual_editor_white_board); // opens drawingActivity
         setupAndroidListener.apply(R.id.editor_button_cloze, this::performCloze, R.string.visual_editor_tooltip_cloze);
         setupAndroidListener.apply(R.id.editor_button_insert_mathjax, this::insertMathJax, R.string.visual_editor_tooltip_mathjax);
@@ -268,6 +271,13 @@ private void openWhiteBoard() {
         startActivityForResultWithoutAnimation(new Intent(this, DrawingActivity.class), REQUEST_WHITE_BOARD_EDIT);
     }
 
+    private void openFontSelectionDialog() {
+        FontSelectionDialog fontSelectionDialog = new FontSelectionDialog(this, 20);
+        fontSelectionDialog.setOnFontSizeChanged(size ->{
+            mWebView.setSelectedFontSize(size);
+        });
+        fontSelectionDialog.showFontSelectionDialog();
+    }
 
     private int getNextClozeId() {
         List<String> fields = Arrays.asList(mFields);

AnkiDroid/src/main/java/com/ichi2/anki/multimediacard/visualeditor/FontSelectionDialog.java

@@ -0,0 +1,108 @@
+/*
+ Copyright (c) 2021 Akshay Jadhav <[email protected]>
+ This program is free software; you can redistribute it and/or modify it under
+ the terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3 of the License, or (at your option) any later
+ version.
+ This program is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
+ PARTICULAR PURPOSE. See the GNU General Public License for more details.
+ You should have received a copy of the GNU General Public License along with
+ this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+package com.ichi2.anki.multimediacard.visualeditor;
+
+import android.content.Context;
+import android.os.Build;
+import android.view.Gravity;
+import android.widget.LinearLayout;
+import android.widget.SeekBar;
+
+import com.afollestad.materialdialogs.MaterialDialog;
+import com.ichi2.anki.R;
+import com.ichi2.ui.FixedTextView;
+
+import java.util.function.Consumer;
+
+import androidx.annotation.NonNull;
+import androidx.annotation.Nullable;
+
+public class FontSelectionDialog {
+
+    private final Context mContext;
+    private Integer mFontSize;
+    private FixedTextView mFontSizeText;
+    public @Nullable
+    Consumer<Integer> mOnFontSizeChanged;
+
+
+    public FontSelectionDialog(@NonNull Context context, @NonNull int fontSize) {
+        this.mContext = context;
+        this.mFontSize = fontSize;
+    }
+
+
+    public final SeekBar.OnSeekBarChangeListener seekBarChangeListener = new SeekBar.OnSeekBarChangeListener() {
+        @Override
+        public void onProgressChanged(SeekBar seekBar, int value, boolean b) {
+            mFontSize = value;
+            mFontSizeText.setText("" + value);
+        }
+
+        @Override
+        public void onStartTrackingTouch(SeekBar seekBar) {
+            // intentionally blank
+        }
+
+
+        @Override
+        public void onStopTrackingTouch(SeekBar seekBar) {
+            // intentionally blank
+        }
+    };
+
+    public void showFontSelectionDialog() {
+        LinearLayout layout = new LinearLayout(mContext);
+        layout.setOrientation(LinearLayout.VERTICAL);
+        layout.setPadding(6, 6, 6, 6);
+
+        mFontSizeText = new FixedTextView(mContext);
+        mFontSizeText.setGravity(Gravity.CENTER_HORIZONTAL);
+        mFontSizeText.setTextSize(30);
+        mFontSizeText.setText("" + mFontSize);
+
+        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
+
+        layout.addView(mFontSizeText, params);
+
+        SeekBar seekBar = new SeekBar(mContext);
+        seekBar.setProgress(mFontSize);
+
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+            seekBar.setMin(15);
+        }
+        seekBar.setMax(60);
+
+        seekBar.setOnSeekBarChangeListener(seekBarChangeListener);
+
+        layout.addView(seekBar, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,
+                LinearLayout.LayoutParams.WRAP_CONTENT));
+
+        new MaterialDialog.Builder(mContext)
+                .title(R.string.visual_editor_font_size)
+                .positiveText(R.string.save)
+                .negativeText(R.string.dialog_cancel)
+                .customView(layout, true)
+                .onPositive((dialog, which) -> {
+                    if (mOnFontSizeChanged != null) {
+                        mOnFontSizeChanged.accept(mFontSize);
+                    }
+                })
+                .show();
+    }
+
+    public void setOnFontSizeChanged(Consumer<Integer> c) {
+        this.mOnFontSizeChanged = c;
+    }
+}

AnkiDroid/src/main/java/com/ichi2/anki/multimediacard/visualeditor/SummerNoteVisualEditor.java

@@ -84,6 +84,11 @@ public void setSelectedBackgroundColor(int color) {
         execUnsafe("setTextBackColor('" + colorToHex(color) +"');");
     }
 
+    @Override
+    public void setSelectedFontSize(int size) {
+        execUnsafe("setFontSize('"+ size +"')");
+    }
+
     @Override
     protected void onPostInit(String utf8Content, String baseUrl) {
         addJavascriptInterface(this, "RTextEditorView");

AnkiDroid/src/main/java/com/ichi2/anki/multimediacard/visualeditor/VisualEditorWebView.java

@@ -268,6 +268,8 @@ public void injectCss(String css) {
 
     public abstract void setSelectedBackgroundColor(int color);
 
+    public abstract void setSelectedFontSize(int size);
+
     protected String colorToHex(int color) {
         return String.format("#%06X", (color & 0xFFFFFF));
     }

AnkiDroid/src/main/res/layout/visual_editor.xml

@@ -72,6 +72,13 @@
                 style="@style/visual_editor_toolbar_button"
                 app:srcCompat="@drawable/ic_cloze_black_24dp"
                 />
+
+            <androidx.appcompat.widget.AppCompatImageButton
+                android:id="@+id/editor_button_font_size"
+                style="@style/visual_editor_toolbar_button"
+                app:srcCompat="@drawable/ic_format_font_size_24dp"
+                />
+
             <!-- Format Clear -->
             <androidx.appcompat.widget.AppCompatImageButton
                 android:id="@+id/editor_button_clear_formatting"

AnkiDroid/src/main/res/values/16-multimedia-editor.xml

@@ -142,5 +142,7 @@
     <string name="visual_editor_tooltip_record_audio">Record Audio</string>
     <string name="visual_editor_tooltip_mathjax">Insert MathJax Equation</string>
     <string name="visual_editor_white_board">Open WhiteBoard</string>
+    <string name="visual_editor_change_font">Change FontSize</string>
+    <string name="visual_editor_font_size" maxLength="41">Font size</string>
 
 </resources>