HtmlEditorToolbar.qml

/* Copyright (C) 2025 CIT-Services <info@cit-services.eu>
 
   This file is part of Dekko email client for Ubuntu devices
 
   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 2 of
   the License or (at your option) version 3
 
   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/>.
*/
import QtQuick 2.4
import QtQuick.Controls.Suru 2.2
import Lomiri.Components 1.3
import Lomiri.Components.Popups 1.3
import Dekko.Lomiri.Constants 1.0
 
Rectangle {
    id: toolbar
 
    property var editor: null
    property string currentFontSize: "11pt"
    property color currentTextColor: "#202124"
    property color currentHighlightColor: "transparent"
 
    signal fontSizeClicked()
    signal textColorClicked()
    signal highlightColorClicked()
    signal linkClicked()
 
    height: units.gu(5.2)
    color: theme.palette.normal.background
 
    Flickable {
        anchors.fill: parent
        contentWidth: toolbarRow.width + units.gu(2)
        contentHeight: height
        flickableDirection: Flickable.HorizontalFlick
        clip: true
 
        Row {
            id: toolbarRow
            x: units.gu(1)
            anchors.verticalCenter: parent.verticalCenter
            spacing: units.gu(0.6)
 
            // Bold
            Button {
                width: units.gu(4.2)
                height: units.gu(3.8)
                text: "B"
                font.bold: true
                color: editor && editor.font.bold ? Suru.highlightColor : theme.palette.normal.foreground
                onClicked: {
                    if (editor) {
                        editor.font.bold = !editor.font.bold
                    }
                }
            }
 
            // Italic
            Button {
                width: units.gu(4.2)
                height: units.gu(3.8)
                text: "I"
                font.italic: true
                color: editor && editor.font.italic ? Suru.highlightColor : theme.palette.normal.foreground
                onClicked: {
                    if (editor) {
                        editor.font.italic = !editor.font.italic
                    }
                }
            }
 
            // Underline
            Button {
                width: units.gu(4.2)
                height: units.gu(3.8)
                text: "U"
                font.underline: true
                color: editor && editor.font.underline ? Suru.highlightColor : theme.palette.normal.foreground
                onClicked: {
                    if (editor) {
                        editor.font.underline = !editor.font.underline
                    }
                }
            }
 
            ToolbarSeparator {}
 
            // Font Size
            Button {
                width: units.gu(6.8)
                height: units.gu(3.8)
                text: currentFontSize
                color: theme.palette.normal.foreground
                onClicked: toolbar.fontSizeClicked()
            }
 
            // Text Color
            Button {
                width: units.gu(4.2)
                height: units.gu(3.8)
                text: "A"
                font.bold: true
                color: theme.palette.normal.foreground
                Rectangle {
                    anchors {
                        bottom: parent.bottom
                        bottomMargin: units.dp(4)
                        horizontalCenter: parent.horizontalCenter
                    }
                    width: units.gu(2.2)
                    height: units.dp(3)
                    radius: units.dp(1)
                    color: toolbar.currentTextColor
                }
                onClicked: toolbar.textColorClicked()
            }
 
            // Highlight Color
            Button {
                width: units.gu(4.2)
                height: units.gu(3.8)
                color: theme.palette.normal.foreground
                Rectangle {
                    anchors.centerIn: parent
                    width: units.gu(2.2)
                    height: units.gu(1.6)
                    radius: units.dp(2)
                    color: toolbar.currentHighlightColor === "transparent" ? "#fff9c4" : toolbar.currentHighlightColor
                    border.width: units.dp(1)
                    border.color: theme.palette.normal.baseText
                }
                onClicked: toolbar.highlightColorClicked()
            }
 
            ToolbarSeparator {}
 
            // Alignment Left
            Button {
                width: units.gu(4.2)
                height: units.gu(3.8)
                property bool isActive: editor && editor.textAlignment === Text.AlignLeft
                color: isActive ? Suru.highlightColor : theme.palette.normal.foreground
                property color iconColor: isActive ? "white" : theme.palette.normal.baseText
                Column {
                    anchors.centerIn: parent
                    spacing: units.dp(2)    
                    Rectangle { width: units.gu(2.4); height: units.dp(2); color: parent.parent.iconColor; anchors.left: parent.left }
                    Rectangle { width: units.gu(1.6); height: units.dp(2); color: parent.parent.iconColor; anchors.left: parent.left }
                    Rectangle { width: units.gu(2.0); height: units.dp(2); color: parent.parent.iconColor; anchors.left: parent.left }
                    Rectangle { width: units.gu(1.2); height: units.dp(2); color: parent.parent.iconColor; anchors.left: parent.left }
                }
                onClicked: if (editor) editor.setTextAlignment(Text.AlignLeft)
            }
 
            // Alignment Center
            Button {
                width: units.gu(4.2)
                height: units.gu(3.8)
                property bool isActive: editor && editor.textAlignment === Text.AlignHCenter
                color: isActive ? Suru.highlightColor : theme.palette.normal.foreground
                property color iconColor: isActive ? "white" : theme.palette.normal.baseText
                Column {
                    anchors.centerIn: parent
                    spacing: units.dp(2)
                    Rectangle { width: units.gu(2.4); height: units.dp(2); color: parent.parent.iconColor; anchors.horizontalCenter: parent.horizontalCenter }
                    Rectangle { width: units.gu(1.6); height: units.dp(2); color: parent.parent.iconColor; anchors.horizontalCenter: parent.horizontalCenter }
                    Rectangle { width: units.gu(2.0); height: units.dp(2); color: parent.parent.iconColor; anchors.horizontalCenter: parent.horizontalCenter }
                    Rectangle { width: units.gu(1.2); height: units.dp(2); color: parent.parent.iconColor; anchors.horizontalCenter: parent.horizontalCenter }
                }
                onClicked: if (editor) editor.setTextAlignment(Text.AlignHCenter)
            }
 
            // Alignment Right
            Button {
                width: units.gu(4.2)
                height: units.gu(3.8)
                property bool isActive: editor && editor.textAlignment === Text.AlignRight
                color: isActive ? Suru.highlightColor : theme.palette.normal.foreground
                property color iconColor: isActive ? "white" : theme.palette.normal.baseText
                Column {
                    anchors.centerIn: parent
                    spacing: units.dp(2)
                    Rectangle { width: units.gu(2.4); height: units.dp(2); color: parent.parent.iconColor; anchors.right: parent.right }
                    Rectangle { width: units.gu(1.6); height: units.dp(2); color: parent.parent.iconColor; anchors.right: parent.right }
                    Rectangle { width: units.gu(2.0); height: units.dp(2); color: parent.parent.iconColor; anchors.right: parent.right }
                    Rectangle { width: units.gu(1.2); height: units.dp(2); color: parent.parent.iconColor; anchors.right: parent.right }
                }
                onClicked: if (editor) editor.setTextAlignment(Text.AlignRight)
            }
 
            // Alignment Justify
            Button {
                width: units.gu(4.2)
                height: units.gu(3.8)
                property bool isActive: editor && editor.textAlignment === Text.AlignJustify
                color: isActive ? Suru.highlightColor : theme.palette.normal.foreground
                property color iconColor: isActive ? "white" : theme.palette.normal.baseText
                Column {
                    anchors.centerIn: parent
                    spacing: units.dp(2)
                    Rectangle { width: units.gu(2.4); height: units.dp(2); color: parent.parent.iconColor }
                    Rectangle { width: units.gu(2.4); height: units.dp(2); color: parent.parent.iconColor }
                    Rectangle { width: units.gu(2.4); height: units.dp(2); color: parent.parent.iconColor }
                    Rectangle { width: units.gu(2.4); height: units.dp(2); color: parent.parent.iconColor }
                }
                onClicked: if (editor) editor.setTextAlignment(Text.AlignJustify)
            }
 
            ToolbarSeparator {}
 
            // Unordered List
            Button {
                width: units.gu(4.2)
                height: units.gu(3.8)
                color: theme.palette.normal.foreground
                text: "• "
                onClicked: if (editor) editor.makeUnorderedList()
            }
 
            // Ordered List
            Button {
                width: units.gu(4.2)
                height: units.gu(3.8)
                color: theme.palette.normal.foreground
                text: "1."
                onClicked: if (editor) editor.makeOrderedList()
            }
 
            ToolbarSeparator {}
 
            // Link
            Button {
                width: units.gu(4.2)
                height: units.gu(3.8)
                color: theme.palette.normal.foreground
                iconName: "insert-link"
                onClicked: toolbar.linkClicked()
            }
 
            ToolbarSeparator {}
 
            // Undo
            Button {
                width: units.gu(4.2)
                height: units.gu(3.8)
                color: theme.palette.normal.foreground
                iconName: "edit-undo"
                onClicked: if (editor) editor.undo()
            }
 
            // Redo
            Button {
                width: units.gu(4.2)
                height: units.gu(3.8)
                color: theme.palette.normal.foreground
                iconName: "edit-redo"
                onClicked: if (editor) editor.redo()
            }
 
            ToolbarSeparator {}
 
            // Clear Formatting
            Button {
                width: units.gu(4.8)
                height: units.gu(3.8)
                color: theme.palette.normal.foreground
                iconName: "edit-clear"
                onClicked: if (editor) editor.removeAllFormatting()
            }
        }
    }
}