Add toolbar support to change preview (#6)

* feat: Add initial draft for toolbar

* feat: Add initial draft for toolbar

* feat: Add preview resizing

* feat: Add dark theme icons

src/main/kotlin/de/timo_reymann/mjml_support/editor/JCEFHtmlPanelProvider.kt

@@ -11,5 +11,6 @@ class JCEFHtmlPanelProvider : MjmlHtmlPanelProvider() {
             else -> AvailabilityInfo.UNAVAILABLE
         }
 
+
     override fun getProviderInfo(): ProviderInfo = ProviderInfo("JCEF Browser", JCEFHtmlPanelProvider::class.java.name)
 }

src/main/kotlin/de/timo_reymann/mjml_support/editor/MjmlPreviewFileEditor.kt

@@ -18,14 +18,18 @@ import com.intellij.ui.jcef.JCEFHtmlPanel
 import com.intellij.util.Alarm
 import de.timo_reymann.mjml_support.bundle.MjmlBundle
 import de.timo_reymann.mjml_support.editor.render.MjmlRenderer
-import java.awt.BorderLayout
+import java.awt.*
 import java.awt.event.ComponentAdapter
 import java.awt.event.ComponentEvent
 import java.beans.PropertyChangeListener
 import java.util.*
 import javax.swing.JComponent
 import javax.swing.JPanel
 
+import javax.swing.BoxLayout
+import javax.swing.JLabel
+import javax.swing.BorderFactory
+
 
 class MjmlPreviewFileEditor(private val project: Project, private val virtualFile: VirtualFile) :
     UserDataHolderBase(), FileEditor {
@@ -51,13 +55,19 @@ class MjmlPreviewFileEditor(private val project: Project, private val virtualFil
 
     override fun getPreferredFocusedComponent(): JComponent? = panel?.component
 
+    fun getPanel(): JCEFHtmlPanel? {
+        return this.panel
+    }
+
     override fun selectNotify() {
         if (panel != null) {
             updateHtmlPooled()
         }
     }
 
-    override fun getComponent(): JComponent = htmlPanelWrapper
+    override fun getComponent(): JComponent {
+        return htmlPanelWrapper
+    }
     override fun getName(): String = MjmlBundle.message("mjml_preview.name")
     override fun setState(state: FileEditorState) {}
     override fun isModified(): Boolean = false
@@ -135,8 +145,11 @@ class MjmlPreviewFileEditor(private val project: Project, private val virtualFil
 
     private fun attachHtmlPanel() {
         panel = retrievePanelProvider().createHtmlPanel()
-
-        htmlPanelWrapper.add(panel!!.component, BorderLayout.CENTER)
+        val c = GridBagConstraints()
+        c.fill = GridBagConstraints.VERTICAL;
+        c.weightx = 0.0;
+        c.weighty = 1.0;
+        htmlPanelWrapper.add(panel!!.component, c)
         htmlPanelWrapper.repaint()
         myLastRenderedHtml = ""
         updateHtmlPooled()
@@ -170,7 +183,10 @@ class MjmlPreviewFileEditor(private val project: Project, private val virtualFil
                 pooledAlarm.addRequest({ updateHtml() }, PARSING_CALL_TIMEOUT_MS)
             }
         }, this)
-        htmlPanelWrapper = JPanel(BorderLayout())
+        htmlPanelWrapper = JPanel(GridBagLayout())
+        htmlPanelWrapper.minimumSize = Dimension(800,0)
+        htmlPanelWrapper.preferredSize = Dimension(800,0)
+
         htmlPanelWrapper.addComponentListener(object : ComponentAdapter() {
             override fun componentShown(e: ComponentEvent) {
                 swingAlarm.addRequest({

src/main/kotlin/de/timo_reymann/mjml_support/editor/MjmlPreviewSplitEditorProvider.kt

@@ -13,4 +13,5 @@ class MjmlPreviewSplitEditorProvider : SplitTextEditorProvider(PsiAwareTextEdito
             secondEditor
         )
     }
+
 }

src/main/kotlin/de/timo_reymann/mjml_support/editor/MjmlSplitEditor.kt

@@ -1,15 +1,23 @@
 package de.timo_reymann.mjml_support.editor
 
+import com.intellij.icons.AllIcons
+import com.intellij.openapi.actionSystem.*
 import com.intellij.openapi.editor.Editor
 import com.intellij.openapi.fileEditor.TextEditor
 import com.intellij.openapi.fileEditor.TextEditorWithPreview
+import com.intellij.openapi.project.DumbAware
 import com.intellij.openapi.vfs.VirtualFile
 import com.intellij.pom.Navigatable
+import com.intellij.ui.JBSplitter
 import de.timo_reymann.mjml_support.bundle.MjmlBundle
+import de.timo_reymann.mjml_support.icons.EditorIcons
+import java.awt.Dimension
+import javax.swing.Icon
 
-class MjmlSplitEditor(val mainEditor: TextEditor, secondEditor: MjmlPreviewFileEditor) :
-    TextEditorWithPreview(mainEditor, secondEditor,"TextEditorWithPreview", Layout.SHOW_EDITOR),
+open class MjmlSplitEditor(val mainEditor: TextEditor, val secondEditor: MjmlPreviewFileEditor) :
+    TextEditorWithPreview(mainEditor, secondEditor, "TextEditorWithPreview", Layout.SHOW_EDITOR),
     TextEditor {
+    protected var previewWidthStatus = PreviewWidthStatus.DESKTOP
 
     override fun getName(): String = MjmlBundle.message("mjml_preview.name")
 
@@ -21,7 +29,43 @@ class MjmlSplitEditor(val mainEditor: TextEditor, secondEditor: MjmlPreviewFileE
 
     override fun navigateTo(navigatable: Navigatable) = mainEditor.navigateTo(navigatable)
 
+    override fun createViewActionGroup(): ActionGroup = DefaultActionGroup(
+        showEditorAction,
+        showEditorAndPreviewAction,
+        showPreviewAction,
+        Separator.create(),
+        PreviewWidthChangeAction(PreviewWidthStatus.DESKTOP),
+        PreviewWidthChangeAction(PreviewWidthStatus.MOBILE)
+    )
+
     init {
         secondEditor.setMainEditor(mainEditor.editor)
+        PreviewWidthChangeAction(previewWidthStatus).select()
+    }
+
+    inner class PreviewWidthChangeAction(private val myPreviewWidthStatus: PreviewWidthStatus) :
+        ToggleAction(myPreviewWidthStatus.text, myPreviewWidthStatus.description, myPreviewWidthStatus.icon),
+        DumbAware {
+
+        override fun isSelected(e: AnActionEvent): Boolean = myPreviewWidthStatus == previewWidthStatus
+
+        fun select() {
+            // TODO Change preview width / trigger rerender
+            val comp = secondEditor.getPanel()?.component ?: return
+            comp.size = Dimension(myPreviewWidthStatus.width, comp.size.height)
+            comp.preferredSize = Dimension(myPreviewWidthStatus.width, comp.preferredSize.height)
+            previewWidthStatus = myPreviewWidthStatus
+        }
+
+        override fun setSelected(e: AnActionEvent, state: Boolean) {
+            if (state) {
+                select()
+            }
+        }
     }
 }
+
+enum class PreviewWidthStatus(val text: String, val description: String, val width: Int, val icon: Icon) {
+    MOBILE("Mobile Preview", "Show preview for mobile devices", 320, EditorIcons.SMARTPHONE),
+    DESKTOP("Desktop Preview", "Show desktop preview", 800, EditorIcons.DESKTOP);
+}

src/main/kotlin/de/timo_reymann/mjml_support/editor/SplitTextEditorProvider.kt

@@ -7,8 +7,8 @@ import com.intellij.openapi.vfs.VirtualFile
 import org.jdom.Element
 
 abstract class SplitTextEditorProvider(
-    protected val myFirstProvider: FileEditorProvider,
-    protected val mySecondProvider: FileEditorProvider
+    private val myFirstProvider: FileEditorProvider,
+    private val mySecondProvider: FileEditorProvider
 ) :
     AsyncFileEditorProvider, DumbAware {
     private val myEditorTypeId: String =
@@ -75,9 +75,7 @@ abstract class SplitTextEditorProvider(
 
     protected abstract fun createSplitEditor(firstEditor: FileEditor, secondEditor: FileEditor): FileEditor
 
-    override fun getPolicy(): FileEditorPolicy {
-        return FileEditorPolicy.HIDE_DEFAULT_EDITOR
-    }
+    override fun getPolicy(): FileEditorPolicy = FileEditorPolicy.HIDE_DEFAULT_EDITOR
 
     companion object {
         private const val FIRST_EDITOR = "first_editor"

src/main/kotlin/de/timo_reymann/mjml_support/icons/EditorIcons.kt

@@ -0,0 +1,8 @@
+package de.timo_reymann.mjml_support.icons
+
+import com.intellij.openapi.util.IconLoader
+
+object EditorIcons {
+    val SMARTPHONE = IconLoader.getIcon("/icons/editor/smartphone.svg", EditorIcons::class.java)
+    val DESKTOP = IconLoader.getIcon("/icons/editor/desktop.svg", EditorIcons::class.java)
+}

src/main/resources/META-INF/plugin.xml

@@ -21,6 +21,10 @@
             <li>inspections for containing tags</li>
         </ul>
 
+        <h2>Credits</h2>
+        <div>Mobile icon made by <a href="https://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
+        <div>Desktop icon made by <a href="https://www.flaticon.com/authors/dave-gandy" title="Dave Gandy">Dave Gandy</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a></div>
+
         <h2>Changelog</h2>
         <ul>
             <li>1.4.2

src/main/resources/mjml-config-schema.json

@@ -4,6 +4,7 @@
   "properties": {
     "config": {
       "type": "object",
+      "description": "Configuration properties for mjml rendering",
       "properties": {
         "fonts": {
           "description": "Default fonts imported in the HTML rendered by HTML",