diff --git a/images/dark/add.svg b/images/dark/add.svg new file mode 100644 index 0000000..3bcd12d --- /dev/null +++ b/images/dark/add.svg @@ -0,0 +1,66 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/images/dark/close.svg b/images/dark/close.svg new file mode 100644 index 0000000..9812e0f --- /dev/null +++ b/images/dark/close.svg @@ -0,0 +1,93 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + diff --git a/images/light/add.svg b/images/light/add.svg new file mode 100644 index 0000000..def3824 --- /dev/null +++ b/images/light/add.svg @@ -0,0 +1,66 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/images/light/close.svg b/images/light/close.svg new file mode 100644 index 0000000..489f7e2 --- /dev/null +++ b/images/light/close.svg @@ -0,0 +1,93 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + diff --git a/qml.qrc b/qml.qrc index 9027130..a79fe14 100644 --- a/qml.qrc +++ b/qml.qrc @@ -3,5 +3,11 @@ qml/main.qml qml/TextEditor.qml qml/TabView.qml + qml/CTabBar.qml + qml/CTabButton.qml + images/dark/add.svg + images/dark/close.svg + images/light/add.svg + images/light/close.svg diff --git a/qml/CTabBar.qml b/qml/CTabBar.qml new file mode 100644 index 0000000..b122ed3 --- /dev/null +++ b/qml/CTabBar.qml @@ -0,0 +1,65 @@ +import QtQuick 2.15 +import QtQml 2.15 +import QtQuick.Window 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import FishUI 1.0 as FishUI + +TabBar { + id: control + + // property var model + + implicitWidth: _content.width + + default property alias content : _content.data + property bool newTabVisibile: true + + signal newTabClicked() + + background: Rectangle { + color: "transparent" + } + + contentItem: Item { + RowLayout { + anchors.fill: parent + spacing: FishUI.Units.smallSpacing + + ScrollView { + id: _scrollView + Layout.fillWidth: true + Layout.fillHeight: true + + ScrollBar.horizontal.policy: ScrollBar.AlwaysOff + ScrollBar.vertical.policy: ScrollBar.AlwaysOff + + clip: true + + Flickable { + id: _flickable + + Row { + id: _content + width: _scrollView.width + height: _scrollView.height + } + } + + } + + Loader { + active: control.newTabVisibile + visible: active + asynchronous: true + Layout.fillHeight: true + Layout.preferredWidth: visible ? height : 0 + + sourceComponent: FishUI.RoundImageButton { + source: "qrc:/images/" + (FishUI.Theme.darkMode ? "dark/" : "light/") + "add.svg" + onClicked: control.newTabClicked() + } + } + } + } +} diff --git a/qml/CTabButton.qml b/qml/CTabButton.qml new file mode 100644 index 0000000..a43b068 --- /dev/null +++ b/qml/CTabButton.qml @@ -0,0 +1,78 @@ +import QtQuick 2.15 +import QtQml 2.15 +import QtQuick.Window 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 +import FishUI 1.0 as FishUI + +Item { + id: control + + property bool checked: false + property bool hovered: _mouseArea.containsMouse + property string text: "" + + signal clicked() + signal closeClicked() + + MouseArea { + id: _mouseArea + anchors.fill: parent + hoverEnabled: true + onClicked: control.clicked() + } + + Rectangle { + id: hoveredRect + anchors.fill: parent + anchors.leftMargin: FishUI.Units.smallSpacing / 2 + anchors.rightMargin: FishUI.Units.smallSpacing / 2 + anchors.topMargin: FishUI.Units.smallSpacing / 2 + color: _mouseArea.containsMouse ? FishUI.Theme.textColor : "transparent" + opacity: _mouseArea.pressed ? 0.1 : 0.05 + border.width: 0 + radius: FishUI.Theme.smallRadius + } + + Rectangle { + id: checkedRect + anchors.leftMargin: FishUI.Units.smallSpacing / 2 + anchors.rightMargin: FishUI.Units.smallSpacing / 2 + anchors.topMargin: FishUI.Units.smallSpacing / 2 + anchors.fill: parent + color: FishUI.Theme.highlightColor + opacity: _mouseArea.pressed ? 0.9 : 1 + border.width: 0 + visible: checked + radius: FishUI.Theme.smallRadius + } + + RowLayout { + anchors.fill: parent + anchors.leftMargin: FishUI.Units.smallSpacing / 2 + anchors.rightMargin: FishUI.Units.smallSpacing / 2 + anchors.topMargin: FishUI.Units.smallSpacing / 2 + spacing: 0 + + Label { + text: control.text + Layout.fillWidth: true + Layout.fillHeight: true + horizontalAlignment: Qt.AlignHCenter + verticalAlignment: Qt.AlignVCenter + color: control.checked ? FishUI.Theme.highlightedTextColor + : FishUI.Theme.textColor + elide: Text.ElideMiddle + wrapMode: Text.NoWrap + } + + FishUI.RoundImageButton { + visible: control.checked + Layout.preferredHeight: 24 + Layout.preferredWidth: 24 + size: 24 + source: "qrc:/images/" + (FishUI.Theme.darkMode || control.checked ? "dark/" : "light/") + "close.svg" + onClicked: control.closeClicked() + } + } +} diff --git a/qml/TextEditor.qml b/qml/TextEditor.qml index 0a0a351..6c1537f 100644 --- a/qml/TextEditor.qml +++ b/qml/TextEditor.qml @@ -47,6 +47,10 @@ Item { boundsBehavior: Flickable.StopAtBounds boundsMovement: Flickable.StopAtBounds + ScrollBar.vertical: ScrollBar { + policy: ScrollBar.AlwaysOff + } + TextArea.flickable: TextArea { id: body text: document.text @@ -74,12 +78,11 @@ Item { active: control.showLineNumbers && !document.isRich asynchronous: true - anchors.left: parent.left - anchors.top: parent.top + anchors.left: body.left + anchors.top: body.top + anchors.topMargin: body.topPadding + body.textMargin height: _flickable.contentHeight - - // height: Math.max(_flickable.contentHeight, control.height) width: active ? 32 : 0 sourceComponent: _linesCounterComponent @@ -93,8 +96,8 @@ Item { ListView { id: _linesCounterList - anchors.fill: parent - anchors.topMargin: body.topPadding + body.textMargin +// anchors.fill: parent +// anchors.topMargin: body.topPadding + body.textMargin model: document.lineCount clip: true @@ -143,9 +146,8 @@ Item { // property bool foldable : control.document.isFoldable(line) width: ListView.view.width - height: Math.max(fontSize, document.lineHeight(line)) + height: document.lineHeight(line) - readonly property real fontSize: 11//control.body.font.pointSize readonly property bool isCurrentItem: ListView.isCurrentItem // Connections { diff --git a/qml/main.qml b/qml/main.qml index b3bb0c0..ee53482 100644 --- a/qml/main.qml +++ b/qml/main.qml @@ -13,35 +13,42 @@ FishUI.Window { title: qsTr("Text Editor") headerItem: Item { - TabBar { + CTabBar { anchors.fill: parent anchors.margins: FishUI.Units.smallSpacing / 2 + anchors.rightMargin: FishUI.Units.largeSpacing * 2 currentIndex : _tabView.currentIndex + onNewTabClicked: { + addTab() + } + Repeater { id: _repeater model: _tabView.count - TabButton { + CTabButton { text: _tabView.contentModel.get(index).fileName implicitHeight: parent.height - implicitWidth: Math.max(parent.width / _repeater.count, 200) + implicitWidth: parent.width / _repeater.count ToolTip.delay: 1000 ToolTip.timeout: 5000 - hoverEnabled: true + + checked: _tabView.currentIndex == index ToolTip.visible: hovered ToolTip.text: _tabView.contentModel.get(index).fileUrl - leftPadding: FishUI.Units.smallSpacing - rightPadding: FishUI.Units.smallSpacing - onClicked: { _tabView.currentIndex = index _tabView.currentItem.forceActiveFocus() } + + onCloseClicked: { + _tabView.closeTab(index) + } } } }