diff --git a/src/controls/Theme.qml b/src/controls/Theme.qml index afca1b2..8c9ee1d 100644 --- a/src/controls/Theme.qml +++ b/src/controls/Theme.qml @@ -41,7 +41,7 @@ QtObject { property color secondBackgroundColor: darkMode ? "#2C2C2D" : "#FFFFFF" property color alternateBackgroundColor: darkMode ? "#3C3C3D" : "#F2F4F5" - property color textColor: darkMode ? "#FFFFFF" : "#323238" + property color textColor: darkMode ? "#FFFFFF" : "#4E5668" property color disabledTextColor: darkMode ? "#888888" : "#64646E" property color highlightColor: FishUICore.ThemeManager.accentColor diff --git a/src/fish-style/Button.qml b/src/fish-style/Button.qml index 67d14d8..4058a0f 100644 --- a/src/fish-style/Button.qml +++ b/src/fish-style/Button.qml @@ -1,20 +1,39 @@ -import QtQuick 2.4 -import QtQuick.Templates 2.4 as T +/* + * Copyright (C) 2021 CutefishOS Team. + * + * Author: Reion Wong + * + * 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 . + */ + +import QtQuick 2.12 +import QtQuick.Templates 2.12 as T +import QtGraphicalEffects 1.0 import FishUI 1.0 as FishUI -import QtQuick.Controls.impl 2.4 +import QtQuick.Controls.impl 2.12 T.Button { id: control implicitWidth: Math.max(background.implicitWidth, contentItem.implicitWidth + FishUI.Units.largeSpacing) implicitHeight: background.implicitHeight hoverEnabled: true - scale: control.pressed ? 0.95 : 1.0 - Behavior on scale { - NumberAnimation { - duration: 100 - } - } + icon.width: FishUI.Units.iconSizes.small + icon.height: FishUI.Units.iconSizes.small + + icon.color: control.enabled ? (control.highlighted ? control.FishUI.Theme.highlightColor : control.FishUI.Theme.textColor) : control.FishUI.Theme.disabledTextColor + spacing: FishUI.Units.smallSpacing property color hoveredColor: Qt.tint(FishUI.Theme.textColor, Qt.rgba(FishUI.Theme.backgroundColor.r, FishUI.Theme.backgroundColor.g, @@ -26,12 +45,6 @@ T.Button { property color flatHoveredColor: Qt.lighter(FishUI.Theme.highlightColor, 1.1) property color flatPressedColor: Qt.darker(FishUI.Theme.highlightColor, 1.1) - icon.width: FishUI.Units.iconSizes.small - icon.height: FishUI.Units.iconSizes.small - - icon.color: control.enabled ? (control.highlighted ? control.FishUI.Theme.highlightColor : control.FishUI.Theme.textColor) : control.FishUI.Theme.disabledTextColor - spacing: FishUI.Units.smallSpacing - contentItem: IconLabel { text: control.text font: control.font @@ -47,15 +60,60 @@ T.Button { implicitWidth: (FishUI.Units.iconSizes.medium * 3) + FishUI.Units.largeSpacing implicitHeight: FishUI.Units.iconSizes.medium + FishUI.Units.smallSpacing + Rectangle { + id: _flatBackground + anchors.fill: parent + radius: FishUI.Theme.mediumRadius + border.width: 1 + border.color: control.enabled ? control.activeFocus ? FishUI.Theme.highlightColor : "transparent" + : "transparent" + visible: control.flat + + color: { + if (!control.enabled) + return FishUI.Theme.alternateBackgroundColor + + if (control.pressed) + return control.flatPressedColor + + if (control.hovered) + return control.flatHoveredColor + + return FishUI.Theme.highlightColor + } + + gradient: Gradient { + orientation: Gradient.Vertical + GradientStop { position: 0.0; color: Qt.rgba(_flatBackground.color.r, + _flatBackground.color.g, + _flatBackground.color.b, 0.85) } + GradientStop { position: 1.0; color: Qt.rgba(_flatBackground.color.r, + _flatBackground.color.g, + _flatBackground.color.b, 1) } + } + } + Rectangle { id: _background anchors.fill: parent radius: FishUI.Theme.mediumRadius border.width: 1 - border.color: control.flat && control.enabled ? FishUI.Theme.highlightColor : control.activeFocus || control.pressed ? FishUI.Theme.highlightColor : "transparent" + visible: !control.flat + border.color: control.enabled ? control.activeFocus ? FishUI.Theme.highlightColor : "transparent" + : "transparent" + + color: { + if (!control.enabled) + return FishUI.Theme.alternateBackgroundColor + + if (control.pressed) + return control.pressedColor + + if (control.hovered) + return control.hoveredColor - color: control.flat && control.enabled ? control.pressed ? control.flatPressedColor : control.hovered ? control.flatHoveredColor : FishUI.Theme.highlightColor - : control.pressed ? control.pressedColor : control.hovered ? control.hoveredColor : FishUI.Theme.alternateBackgroundColor + return FishUI.Theme.alternateBackgroundColor + } } } }