diff --git a/src/core/GCButtonStyle.qml b/src/core/GCButtonStyle.qml index e9a9bc709..c0aef0cf6 100644 --- a/src/core/GCButtonStyle.qml +++ b/src/core/GCButtonStyle.qml @@ -1,129 +1,138 @@ /* GCompris - GCButtonStyle.qml * * Copyright (C) 2014 Bruno Coudoin * * Authors: * Bruno Coudoin * * 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 * (at your option) 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.2 import QtQuick.Controls 1.0 import QtQuick.Controls.Styles 1.0 import GCompris 1.0 /** * Provides styling for GCompris' Buttons. * @ingroup components * * @inherit QtQuick.Controls.Styles.ButtonStyle */ ButtonStyle { /** * type:real * Fixed font size of the label in pt. * * Set to a value > 0 for enforcing a fixed font.pointSize for the label, * that won't be updated with ApplicationSettings.baseFontSize. * @sa ApplicationSettings.baseFontSize, GCText.fixFontSize */ property real fixedFontSize: -1 /** * type:string - * theme of the button. For now, two themes are accepted: "light" and "dark" + * theme of the button. For now, three themes are accepted: "light" and "dark" and "highContrast" * * Default is dark. */ property string theme: "dark" /** * type:variant * existing themes for the button. * A theme is composed of: * the colors of the button when selected: selectedColorGradient0 and selectedColorGradient1. * the colors of the button when not selected: backgroundColorGradient0 and backgroundColorGradient1. * the button's border color * the text color */ property variant themes: { "dark": { backgroundColorGradient0: "#23373737", selectedColorGradient0: "#C03ACAFF", backgroundColorGradient1: "#13373737", selectedColorGradient1: "#803ACAFF", borderColor: "#FF373737", textColor: "#FF373737" }, "light": { backgroundColorGradient0: "#42FFFFFF", selectedColorGradient0: "#C03ACAFF", backgroundColorGradient1: "#23FFFFFF", selectedColorGradient1: "#803ACAFF", borderColor: "white", textColor: "white" + }, + "highContrast": { + backgroundColorGradient0: "#EEFFFFFF", + selectedColorGradient0: "#C03ACAFF", + backgroundColorGradient1: "#AAFFFFFF", + selectedColorGradient1: "#803ACAFF", + borderColor: "white", + textColor: "373737" + } } property string textSize: "regular" property variant textSizes: { "regular": { fontSize: 14, fontBold: false }, "subtitle": { fontSize: 16, fontBold: true }, "title": { fontSize: 24, fontBold: true } } background: Rectangle { border.width: control.activeFocus ? 4 : 2 border.color: themes[theme].borderColor radius: 10 gradient: Gradient { GradientStop { position: 0 ; color: control.pressed ? themes[theme].selectedColorGradient0 : themes[theme].backgroundColorGradient0 } GradientStop { position: 1 ; color: control.pressed ? themes[theme].selectedColorGradient1 : themes[theme].backgroundColorGradient1 } } } label: Item { id: labelItem anchors.fill: parent implicitWidth: labelText.implicitWidth implicitHeight: labelText.implicitHeight GCText { id: labelText color: themes[theme].textColor text: control.text fontSize: textSizes[textSize].fontSize font.bold: textSizes[textSize].fontBold anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter wrapMode: Text.WordWrap Component.onCompleted: { if (fixedFontSize > 0) { labelText.fixFontSize = true; labelText.fontSize = fixedFontSize; } } } } } diff --git a/src/core/GCDialog.qml b/src/core/GCDialog.qml index a7c279344..7b9cfcc89 100644 --- a/src/core/GCDialog.qml +++ b/src/core/GCDialog.qml @@ -1,223 +1,225 @@ /* GCompris - GCDialog.qml * * Copyright (C) 2014 Bruno Coudoin * * Authors: * Bruno Coudoin * * 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 * (at your option) 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.2 import QtQuick.Controls 1.0 import GCompris 1.0 /** * A QML component for GCompris dialogs. * @ingroup components * * Contains the following basic layout elements: Title (message), a GCompris * cancel button (GCButtonCancel) at the top right and two optional buttons. * * Can be conveniently instantiated dynamically in conjunction with * showMessageDialog from core.js. * * GCDialog should now be used wherever you'd use a QtQuick dialog. It has * been decided to implement dialogs ourselves in GCompris because of * missing translations of labels of Qt's standard buttons for some language * supported by GCompris, as well as integration problems on some OSes * (Sailfish OS). * * @inherit QtQuick.Item * @sa showMessageDialog */ Item { id: gcdialog /** * type:string * Heading instruction text. */ property alias message: instructionTxt.textIn /** * type:string * Label of the first button. */ property alias button1Text: button1.text /** * type:string * Label of the second button. */ property alias button2Text: button2.text /** * Emitted when the dialog should be started. * * Triggers fading in. */ signal start /** * Emitted when the dialog should be stopped. * * Triggers fading out. */ signal stop /** * Emitted when the dialog has stopped. */ signal close /** * Emitted when the first button has been clicked. */ signal button1Hit /** * Emitted when the second button has been clicked. */ signal button2Hit focus: true opacity: 0 anchors { fill: parent } onStart: opacity = 1 onStop: opacity = 0 onClose: destroy() Behavior on opacity { NumberAnimation { duration: 200 } } onOpacityChanged: opacity === 0 ? close() : null z: 1500 Rectangle { anchors.fill: parent opacity: 0.8 color: "grey" } MultiPointTouchArea { // Just to catch mouse events anchors.fill: parent } /* Message */ Item { id: instruction anchors { horizontalCenter: parent.horizontalCenter top: parent.top topMargin: buttonCancel.height } width: parent.width * 0.8 Rectangle { id: instructionTxtBg anchors.top: instruction.top z: 1 width: parent.width height: gcdialog.height - button1.height * 5 opacity: 0.9 radius: 10 border.width: 2 border.color: "white" gradient: Gradient { GradientStop { position: 0.0; color: "#fff" } GradientStop { position: 0.9; color: "#fff" } GradientStop { position: 1.0; color: "#ddd" } } Flickable { id: flick anchors.margins: 8 anchors.fill: parent contentWidth: instructionTxt.contentWidth contentHeight: instructionTxt.contentHeight flickableDirection: Flickable.VerticalFlick clip: true GCText { id: instructionTxt fontSize: regularSize color: "black" // @FIXME This property breaks the wrapping // horizontalAlignment: Text.AlignHCenter // need to remove the anchors (left and right) else sometimes text is hidden on the side width: instruction.width - 2*flick.anchors.margins wrapMode: TextEdit.WordWrap textFormat: TextEdit.RichText z: 2 text: style + "" + textIn + "" property string textIn property string style: "" } } } Button { id: button1 width: parent.width height: (visible ? 60 : 30) * ApplicationInfo.ratio anchors { horizontalCenter: parent.horizontalCenter top: instructionTxtBg.bottom topMargin: 10 } style: GCButtonStyle { + theme: "highContrast" } visible: text != "" onClicked: { gcdialog.button1Hit() gcdialog.stop() } } Button { id: button2 width: parent.width height: (visible ? 60 : 30) * ApplicationInfo.ratio anchors { horizontalCenter: parent.horizontalCenter top: button1.bottom topMargin: 10 } style: GCButtonStyle { + theme: "highContrast" } visible: text != "" onClicked: { gcdialog.button2Hit() gcdialog.stop() } } } // Fixme not working, need to properly get the focus on this dialog Keys.onEscapePressed: { stop() event.accepted = true; } // The cancel button GCButtonCancel { id: buttonCancel onClose: parent.stop() } }