Use FishUI Tab related controls

pull/4/head
reionwong 4 years ago
parent 720c767d01
commit 7967442827

@ -2,13 +2,9 @@
<qresource prefix="/">
<file>qml/main.qml</file>
<file>qml/TextEditor.qml</file>
<file>qml/TabView.qml</file>
<file>qml/CTabBar.qml</file>
<file>qml/CTabButton.qml</file>
<file>images/dark/add.svg</file>
<file>images/dark/close.svg</file>
<file>images/light/add.svg</file>
<file>images/light/close.svg</file>
<file>qml/TabCloseButton.qml</file>
</qresource>
</RCC>

@ -1,64 +0,0 @@
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
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()
}
}
}
}
}

@ -1,79 +0,0 @@
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 : FishUI.Theme.secondBackgroundColor
opacity: _mouseArea.containsMouse ? _mouseArea.pressed ? 0.1 : 0.05 : 1
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
leftPadding: FishUI.Units.smallSpacing / 2
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
}
TabCloseButton {
enabled: control.checked
Layout.preferredHeight: 24
Layout.preferredWidth: 24
size: 24
source: !enabled ? "" : "qrc:/images/" + (FishUI.Theme.darkMode || control.checked ? "dark/" : "light/") + "close.svg"
onClicked: control.closeClicked()
}
}
}

@ -1,68 +0,0 @@
/*
* Copyright (C) 2021 CutefishOS Team.
*
* Author: Reion Wong <reion@cutefishos.com>
*
* 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
* 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/>.
*/
import QtQuick 2.12
import QtQuick.Window 2.3
import QtQuick.Controls 2.4
import FishUI 1.0 as FishUI
Item {
id: control
property var size: 32
property var iconMargins: 0
height: size
width: size
property alias background: _background
property color backgroundColor: "transparent"
property color hoveredColor: "#FF5C6D"
property color pressedColor: "#CC4A57"
property alias source: _image.source
property alias image: _image
signal clicked()
Rectangle {
id: _background
anchors.fill: parent
anchors.margins: size * 0.1
radius: control.height / 2
opacity: 0.9
color: mouseArea.pressed ? pressedColor : mouseArea.containsMouse ? control.hoveredColor : control.backgroundColor
}
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: control.clicked()
}
Image {
id: _image
objectName: "image"
anchors.fill: parent
anchors.margins: control.iconMargins
fillMode: Image.PreserveAspectFit
sourceSize: Qt.size(width, height)
cache: true
asynchronous: false
}
}

@ -1,65 +0,0 @@
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
Container {
id: control
spacing: 0
contentItem: ColumnLayout {
spacing: 0
ListView {
id: _view
Layout.fillWidth: true
Layout.fillHeight: true
interactive: false
orientation: ListView.Horizontal
snapMode: ListView.SnapOneItem
currentIndex: control.currentIndex
model: control.contentModel
boundsBehavior: Flickable.StopAtBounds
boundsMovement :Flickable.StopAtBounds
spacing: 0
preferredHighlightBegin: 0
preferredHighlightEnd: width
highlightRangeMode: ListView.StrictlyEnforceRange
highlightMoveDuration: 0
highlightFollowsCurrentItem: true
highlightResizeDuration: 0
highlightMoveVelocity: -1
highlightResizeVelocity: -1
maximumFlickVelocity: 4 * width
cacheBuffer: _view.count * width
keyNavigationEnabled : false
keyNavigationWraps : false
}
}
function closeTab(index) {
control.removeItem(control.takeItem(index))
control.currentItemChanged()
control.currentItem.forceActiveFocus()
}
function addTab(component, properties) {
const object = component.createObject(control.contentModel, properties)
control.addItem(object)
control.currentIndex = Math.max(control.count - 1, 0)
object.forceActiveFocus()
return object
}
}

@ -19,7 +19,7 @@ FishUI.Window {
color: FishUI.Theme.backgroundColor
}
CTabBar {
FishUI.TabBar {
id: _tabbar
anchors.fill: parent
anchors.margins: FishUI.Units.smallSpacing / 2
@ -35,7 +35,7 @@ FishUI.Window {
id: _repeater
model: _tabView.count
CTabButton {
FishUI.TabButton {
text: _tabView.contentModel.get(index).fileName
implicitHeight: parent.height
implicitWidth: _repeater.count === 1 ? 150
@ -44,7 +44,7 @@ FishUI.Window {
ToolTip.delay: 1000
ToolTip.timeout: 5000
checked: _tabView.currentIndex == index
checked: _tabView.currentIndex === index
ToolTip.visible: hovered
ToolTip.text: _tabView.contentModel.get(index).fileUrl
@ -66,7 +66,7 @@ FishUI.Window {
anchors.fill: parent
spacing: 0
TabView {
FishUI.TabView {
id: _tabView
Layout.fillWidth: true
Layout.fillHeight: true

Loading…
Cancel
Save