forked from Public/monero-gui
White theme
This commit is contained in:
dsc
@@ -26,304 +26,320 @@
|
||||
// STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
|
||||
// THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
|
||||
import QtQuick 2.5
|
||||
import QtQuick 2.9
|
||||
import QtQuick.Window 2.0
|
||||
import QtQuick.Layouts 1.1
|
||||
import QtGraphicalEffects 1.0
|
||||
import QtQuick.Layouts 1.2
|
||||
|
||||
import FontAwesome 1.0
|
||||
import "." as MoneroComponents
|
||||
import "effects/" as MoneroEffects
|
||||
|
||||
Rectangle {
|
||||
id: titleBar
|
||||
|
||||
height: {
|
||||
if(!customDecorations || isMobile){
|
||||
return 0;
|
||||
}
|
||||
|
||||
if(small) return 38 * scaleRatio;
|
||||
else return 50 * scaleRatio;
|
||||
}
|
||||
y: -height
|
||||
z: 1
|
||||
|
||||
property string title
|
||||
id: root
|
||||
property int mouseX: 0
|
||||
property bool containsMouse: false
|
||||
property bool basicButtonVisible: false
|
||||
property bool customDecorations: persistentSettings.customDecorations
|
||||
property bool showWhatIsButton: true
|
||||
property bool showMinimizeButton: false
|
||||
property bool showMaximizeButton: false
|
||||
property bool showMinimizeButton: true
|
||||
property bool showMaximizeButton: true
|
||||
property bool showCloseButton: true
|
||||
property bool showMoneroLogo: false
|
||||
property bool small: false
|
||||
property alias titleBarGradientImageOpacity: titleBarGradientImage.opacity
|
||||
property bool orange: false
|
||||
property string buttonHoverColor: "#262626"
|
||||
property string buttonHoverColorOrange: "#44FFFFFF"
|
||||
|
||||
height: {
|
||||
if(!persistentSettings.customDecorations || isMobile) return 0;
|
||||
return 50 * scaleRatio;
|
||||
}
|
||||
|
||||
z: 1
|
||||
color: "transparent"
|
||||
|
||||
signal closeClicked
|
||||
signal maximizeClicked
|
||||
signal minimizeClicked
|
||||
signal languageClicked
|
||||
signal goToBasicVersion(bool yes)
|
||||
|
||||
Item {
|
||||
// Background gradient
|
||||
width: parent.width
|
||||
height: parent.height
|
||||
z: parent.z + 1
|
||||
|
||||
Image {
|
||||
id: titleBarGradientImage
|
||||
visible: !titleBar.orange
|
||||
anchors.fill: parent
|
||||
height: titleBar.height
|
||||
width: titleBar.width
|
||||
source: "../images/titlebarGradient.jpg"
|
||||
state: "default"
|
||||
states: [
|
||||
State {
|
||||
name: "default";
|
||||
PropertyChanges { target: btnSidebarCollapse; visible: true}
|
||||
PropertyChanges { target: btnLanguageToggle; visible: true}
|
||||
}, State {
|
||||
// show only theme switcher and window controls
|
||||
name: "essentials";
|
||||
PropertyChanges { target: btnSidebarCollapse; visible: false}
|
||||
PropertyChanges { target: btnLanguageToggle; visible: false}
|
||||
}
|
||||
]
|
||||
|
||||
Rectangle {
|
||||
visible: titleBar.orange
|
||||
width: parent.width
|
||||
height: parent.height
|
||||
color: "#ff6600"
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: titlebarlogo
|
||||
width: 125
|
||||
height: parent.height
|
||||
anchors.centerIn: parent
|
||||
visible: customDecorations
|
||||
z: parent.z + 1
|
||||
|
||||
Image {
|
||||
visible: !isMobile && showMoneroLogo && !titleBar.orange
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 11
|
||||
width: 125
|
||||
height: 28
|
||||
source: "../images/titlebarLogo.png"
|
||||
}
|
||||
|
||||
Image {
|
||||
visible: !isMobile && showMoneroLogo && titleBar.orange
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 11
|
||||
width: 132
|
||||
height: 22
|
||||
source: "../images/moneroLogo_white.png"
|
||||
}
|
||||
}
|
||||
|
||||
Label {
|
||||
id: titleLabel
|
||||
visible: !showMoneroLogo && customDecorations && titleBar.title !== ''
|
||||
anchors.centerIn: parent
|
||||
fontSize: 18
|
||||
text: titleBar.title
|
||||
z: parent.z + 1
|
||||
MoneroEffects.GradientBackground {
|
||||
anchors.fill: parent
|
||||
duration: 300
|
||||
fallBackColor: MoneroComponents.Style.middlePanelBackgroundColor
|
||||
initialStartColor: MoneroComponents.Style.titleBarBackgroundGradientStart
|
||||
initialStopColor: MoneroComponents.Style.titleBarBackgroundGradientStop
|
||||
blackColorStart: MoneroComponents.Style._b_titleBarBackgroundGradientStart
|
||||
blackColorStop: MoneroComponents.Style._b_titleBarBackgroundGradientStop
|
||||
whiteColorStart: MoneroComponents.Style._w_titleBarBackgroundGradientStart
|
||||
whiteColorStop: MoneroComponents.Style._w_titleBarBackgroundGradientStop
|
||||
start: Qt.point(width, 0)
|
||||
end: Qt.point(0, 0)
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
width: 40
|
||||
height: parent.height
|
||||
spacing: 0
|
||||
z: parent.z + 2
|
||||
spacing: 0
|
||||
anchors.fill: parent
|
||||
|
||||
// collapse sidebar
|
||||
Rectangle {
|
||||
id: btnSidebarCollapse
|
||||
visible: root.basicButtonVisible
|
||||
color: "transparent"
|
||||
Layout.preferredWidth: parent.height
|
||||
Layout.preferredHeight: parent.height
|
||||
Layout.preferredWidth: Layout.preferredHeight
|
||||
|
||||
id: goToBasicVersionButton
|
||||
property bool containsMouse: titleBar.mouseX >= x && titleBar.mouseX <= x + width
|
||||
property bool checked: false
|
||||
color: "transparent"
|
||||
height: titleBar.height
|
||||
width: height
|
||||
visible: !titleBar.orange && titleBar.basicButtonVisible
|
||||
|
||||
Image {
|
||||
width: 14
|
||||
MoneroEffects.ImageMask {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
height: 14
|
||||
anchors.centerIn: parent
|
||||
source: "../images/expand.png"
|
||||
width: 14
|
||||
image: MoneroComponents.Style.titleBarExpandSource
|
||||
color: MoneroComponents.Style.defaultFontColor
|
||||
fontAwesomeFallbackIcon: FontAwesome.cube
|
||||
fontAwesomeFallbackSize: 14
|
||||
fontAwesomeFallbackOpacity: MoneroComponents.Style.blackTheme ? 1.0 : 0.9
|
||||
opacity: 0.75
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: basicMouseArea
|
||||
hoverEnabled: true
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onEntered: { goToBasicVersionButton.color = titleBar.orange ? titleBar.buttonHoverColorOrange : titleBar.buttonHoverColor }
|
||||
onExited: goToBasicVersionButton.color = "transparent";
|
||||
onClicked: {
|
||||
releaseFocus()
|
||||
parent.checked = !parent.checked
|
||||
titleBar.goToBasicVersion(leftPanel.visible)
|
||||
}
|
||||
onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
|
||||
onExited: parent.color = "transparent"
|
||||
onClicked: root.goToBasicVersion(leftPanel.visible)
|
||||
}
|
||||
}
|
||||
|
||||
// language selection
|
||||
Rectangle {
|
||||
Layout.preferredHeight: parent.height
|
||||
Layout.preferredWidth: Layout.preferredHeight
|
||||
visible: !titleBar.orange && persistentSettings.customDecorations
|
||||
|
||||
id: languageSelection
|
||||
property bool containsMouse: titleBar.mouseX >= x && titleBar.mouseX <= x + width
|
||||
property bool checked: false
|
||||
color: "transparent"
|
||||
height: titleBar.height
|
||||
width: height
|
||||
z: parent.z + 2
|
||||
|
||||
Image {
|
||||
width: 14
|
||||
height: 14
|
||||
anchors.centerIn: parent
|
||||
source: "../images/langFlagGrey.png"
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
hoverEnabled: true
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onEntered: parent.color = "#262626";
|
||||
onExited: parent.color = "transparent";
|
||||
onClicked: {
|
||||
releaseFocus();
|
||||
appWindow.toggleLanguageView();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
id: row
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
visible: parent.customDecorations
|
||||
z: parent.z + 2
|
||||
|
||||
Rectangle {
|
||||
id: minimizeButton
|
||||
visible: showMinimizeButton
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
width: 42
|
||||
id: btnLanguageToggle
|
||||
color: "transparent"
|
||||
Layout.preferredWidth: parent.height
|
||||
Layout.preferredHeight: parent.height
|
||||
|
||||
Image {
|
||||
anchors.centerIn: parent
|
||||
source: "../images/minimize.png"
|
||||
Text {
|
||||
text: FontAwesome.globe
|
||||
font.family: FontAwesome.fontFamily
|
||||
font.pixelSize: 16 * scaleRatio
|
||||
color: MoneroComponents.Style.defaultFontColor
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
opacity: 0.75
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: minimizeArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onEntered: {
|
||||
if(titleBar.orange){
|
||||
minimizeButton.color = titleBar.buttonHoverColorOrange;
|
||||
} else {
|
||||
minimizeButton.color = titleBar.buttonHoverColor;
|
||||
}
|
||||
}
|
||||
onExited: minimizeButton.color = "transparent";
|
||||
onClicked: minimizeClicked();
|
||||
onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
|
||||
onExited: parent.color = "transparent"
|
||||
onClicked: root.languageClicked()
|
||||
}
|
||||
}
|
||||
|
||||
// switch theme
|
||||
Rectangle {
|
||||
id: maximizeButton
|
||||
visible: showMaximizeButton
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
width: 42
|
||||
color: "transparent";
|
||||
color: "transparent"
|
||||
Layout.preferredWidth: parent.height
|
||||
Layout.preferredHeight: parent.height
|
||||
|
||||
Image {
|
||||
anchors.centerIn: parent
|
||||
height: 16
|
||||
width: 16
|
||||
source: appWindow.visibility === Window.FullScreen ? "../images/backToWindowIcon.png" :
|
||||
"../images/fullscreen.png"
|
||||
Text {
|
||||
text: MoneroComponents.Style.blackTheme ? FontAwesome.lightbulbO : FontAwesome.moonO
|
||||
font.family: FontAwesome.fontFamily
|
||||
font.pixelSize: 16 * scaleRatio
|
||||
color: MoneroComponents.Style.defaultFontColor
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
opacity: 0.75
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: maximizeArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onEntered: {
|
||||
if(titleBar.orange){
|
||||
maximizeButton.color = titleBar.buttonHoverColorOrange;
|
||||
} else {
|
||||
maximizeButton.color = titleBar.buttonHoverColor;
|
||||
}
|
||||
onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
|
||||
onExited: parent.color = "transparent"
|
||||
onClicked: {
|
||||
MoneroComponents.Style.blackTheme = !MoneroComponents.Style.blackTheme;
|
||||
persistentSettings.blackTheme = MoneroComponents.Style.blackTheme;
|
||||
}
|
||||
onExited: maximizeButton.color = "transparent";
|
||||
onClicked: maximizeClicked();
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: closeButton
|
||||
visible: showCloseButton
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
width: 42
|
||||
color: containsMouse ? "#E04343" : "#00000000"
|
||||
Item {
|
||||
// make dummy space when hiding buttons when titlebar
|
||||
// state is 'essentials' in order for the
|
||||
// monero logo to still be centered
|
||||
Layout.preferredWidth: parent.height * 2 // amount of buttons we hide
|
||||
Layout.preferredHeight: parent.height
|
||||
visible: root.state == "essentials"
|
||||
}
|
||||
|
||||
// monero logo
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: parent.height
|
||||
|
||||
Image {
|
||||
anchors.centerIn: parent
|
||||
width: 16
|
||||
height: 16
|
||||
source: "../images/close.png"
|
||||
id: imgLogo
|
||||
width: 125
|
||||
height: 28
|
||||
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
source: MoneroComponents.Style.titleBarLogoSource
|
||||
visible: {
|
||||
if(!isOpenGL) return true;
|
||||
if(!MoneroComponents.Style.blackTheme) return true;
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
Colorize {
|
||||
visible: isOpenGL && MoneroComponents.Style.blackTheme
|
||||
anchors.fill: imgLogo
|
||||
source: imgLogo
|
||||
saturation: 0.0
|
||||
}
|
||||
}
|
||||
|
||||
// minimize
|
||||
Rectangle {
|
||||
color: "transparent"
|
||||
visible: root.showMinimizeButton
|
||||
Layout.preferredWidth: parent.height
|
||||
Layout.preferredHeight: parent.height
|
||||
|
||||
MoneroEffects.ImageMask {
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 18
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
height: 3
|
||||
width: 15
|
||||
image: MoneroComponents.Style.titleBarMinimizeSource
|
||||
color: MoneroComponents.Style.defaultFontColor
|
||||
fontAwesomeFallbackIcon: FontAwesome.minus
|
||||
fontAwesomeFallbackSize: 18
|
||||
fontAwesomeFallbackOpacity: MoneroComponents.Style.blackTheme ? 0.8 : 0.6
|
||||
opacity: 0.75
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: closeClicked();
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onEntered: {
|
||||
if(titleBar.orange){
|
||||
closeButton.color = titleBar.buttonHoverColorOrange;
|
||||
} else {
|
||||
closeButton.color = titleBar.buttonHoverColor;
|
||||
}
|
||||
}
|
||||
onExited: closeButton.color = "transparent";
|
||||
onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
|
||||
onExited: parent.color = "transparent"
|
||||
onClicked: root.minimizeClicked();
|
||||
}
|
||||
}
|
||||
|
||||
// maximize
|
||||
Rectangle {
|
||||
id: test
|
||||
visible: root.showMaximizeButton
|
||||
color: "transparent"
|
||||
Layout.preferredWidth: parent.height
|
||||
Layout.preferredHeight: parent.height
|
||||
|
||||
Image {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
source: MoneroComponents.Style.titleBarFullscreenSource
|
||||
sourceSize.width: 16
|
||||
sourceSize.height: 16
|
||||
smooth: true
|
||||
mipmap: true
|
||||
opacity: 0.75
|
||||
rotation: appWindow.visibility === Window.FullScreen ? 180 : 0
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: buttonArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
|
||||
onExited: parent.color = "transparent"
|
||||
onClicked: root.maximizeClicked();
|
||||
}
|
||||
}
|
||||
|
||||
// close
|
||||
Rectangle {
|
||||
visible: root.showCloseButton
|
||||
color: "transparent"
|
||||
Layout.preferredWidth: parent.height
|
||||
Layout.preferredHeight: parent.height
|
||||
|
||||
MoneroEffects.ImageMask {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
height: 16
|
||||
width: 16
|
||||
image: MoneroComponents.Style.titleBarCloseSource
|
||||
color: MoneroComponents.Style.defaultFontColor
|
||||
fontAwesomeFallbackIcon: FontAwesome.timesRectangle
|
||||
fontAwesomeFallbackSize: 18
|
||||
fontAwesomeFallbackOpacity: MoneroComponents.Style.blackTheme ? 0.8 : 0.6
|
||||
opacity: 0.75
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onEntered: parent.color = MoneroComponents.Style.titleBarButtonHoverColor
|
||||
onExited: parent.color = "transparent"
|
||||
onClicked: root.closeClicked();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// window borders
|
||||
Rectangle {
|
||||
visible: !titleBar.orange
|
||||
z: parent.z + 3
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.right: parent.right
|
||||
anchors.left: parent.left
|
||||
height: 1
|
||||
color: "#2F2F2F"
|
||||
z: parent.z + 1
|
||||
anchors.right: parent.right
|
||||
height: MoneroComponents.Style.blackTheme ? 1 : 1
|
||||
color: MoneroComponents.Style.titleBarBackgroundBorderColor
|
||||
|
||||
MoneroEffects.ColorTransition {
|
||||
targetObj: parent
|
||||
blackColor: MoneroComponents.Style._b_titleBarBackgroundBorderColor
|
||||
whiteColor: MoneroComponents.Style._w_titleBarBackgroundBorderColor
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
visible: titleBar.small && !titleBar.orange
|
||||
anchors.top: parent.top
|
||||
anchors.right: parent.right
|
||||
anchors.left: parent.left
|
||||
height: 1
|
||||
color: "#2F2F2F"
|
||||
z: parent.z + 1
|
||||
MouseArea {
|
||||
enabled: persistentSettings.customDecorations
|
||||
property var previousPosition
|
||||
anchors.fill: parent
|
||||
propagateComposedEvents: true
|
||||
onPressed: previousPosition = globalCursor.getPosition()
|
||||
onPositionChanged: {
|
||||
if (pressedButtons == Qt.LeftButton) {
|
||||
var pos = globalCursor.getPosition()
|
||||
var dx = pos.x - previousPosition.x
|
||||
var dy = pos.y - previousPosition.y
|
||||
|
||||
appWindow.x += dx
|
||||
appWindow.y += dy
|
||||
previousPosition = pos
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user