openprivacy
/
opaque
3
0
Fork 0
Code Issues 3 Pull Requests 1 Releases Wiki Activity

adding new widgets: Flickable, ScrollBar, Tab; Additional changes and fixes around messaging

This commit is contained in:
Dan Ballard 2020-08-24 14:51:37 -07:00
parent 7bdf6d7955
commit ec6c2d7f82
12 changed files with 173 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
Button.qml
View File

@ -16,8 +16,10 @@ Rectangle {
height: 20 * gcd.themeScale
Layout.minimumHeight: height
Layout.maximumHeight: height
color: mousedown ? Theme.defaultButtonActiveColor : Theme.defaultButtonColor
border.color: mousedown ? Theme.defaultButtonActiveColor : Theme.defaultButtonColor
property color inactiveColor: Theme.defaultButtonColor
property color activeColor: Theme.defaultButtonActiveColor
color: mousedown ? activeColor : inactiveColor
border.color: mousedown ? activeColor : inactiveColor
border.width: 1
radius: override_radius
antialiasing: true
@ -31,14 +33,14 @@ Rectangle {
property string tooltip
signal clicked
RowLayout {
anchors.centerIn: parent
spacing: 6 * gcd.themeScale
Image {
anchors.left: parent.left
id: ico
source: icon!="" ? gcd.assetPath + "fontawesome/"+icon+".svg" : "";
visible: icon != ""
height: button.height / 2
sourceSize.height: button.height / 2
}
@ -49,8 +51,6 @@ Rectangle {
font.styleName: "ExtraBold"
font.pixelSize: button.height / 2
color: Theme.defaultButtonTextColor
anchors.left: ico.right
anchors.leftMargin: 6
visible: button.text != "" && button.text != undefined
}

8
EmojiDrawer.qml
View File

@ -12,12 +12,14 @@ import "theme"
Item {
id: root
height: 0
implicitHeight: 0
height: implicitHeight
property int size: 24
property int requestedHeight: size * 8
property string morph: "clw"
property string color: "v1"
property bool narrowMode: width < (txtSearch.width + root.size * 14 + btnX.width)
signal picked(string shortcode)
signal slideopen()
signal slideclosed()
@ -31,7 +33,7 @@ Item {
PropertyAnimation {
id: animClose;
target: root;
properties: "height";
properties: "implicitHeight";
to: 0;
duration: 400;
}
@ -39,7 +41,7 @@ Item {
PropertyAnimation {
id: animOpen;
target: root;
properties: "height";
properties: "implicitHeight";
to: requestedHeight;
duration: 400;
}

25
Flickable.qml Normal file
View File

@ -0,0 +1,25 @@
//import QtGraphicalEffects 1.0
//import QtQuick 2.7
//import QtQuick.Controls 2.4
//import QtQuick.Controls.Material 2.0
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.impl 2.12
import QtQuick.Templates 2.12 as T
//import QtQuick.Layouts 1.3
import "../opaque" as Opaque
import "../opaque/theme"
import "../const"
Flickable {
id: sv
clip: true
boundsBehavior: Flickable.StopAtBounds
ScrollBar.vertical: Opaque.ScrollBar {}
}

20
Icon.qml
View File

@ -16,7 +16,7 @@ Rectangle {
property bool isHover: false
color: isHover ? backgroundColor : hilightBackgroundColor
color: isHover ? hilightBackgroundColor : backgroundColor
property alias iconColor: iconColorOverlay.color
@ -26,20 +26,32 @@ Rectangle {
signal clicked()
//property int horizontalPadding: 0
//property int verticalPadding: 0
property int size: Math.min(height, width)
//property int innerHeight: height - (verticalPadding*2)
//property int innerWidth: width - (horizontalPadding*2)
Image {
id: srcImg
anchors.fill: parent
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
height: size
width: size
antialiasing: true
smooth: true
visible: false
// Apparently qml can now only DOWN-SCALE/SHRINK the SVG, so with this hack it which won't cause blurriness/pixelation
sourceSize.width: root.width*2
sourceSize.height: root.height*2
sourceSize.width: size*2
sourceSize.height: size*2
}
ColorOverlay{
id: iconColorOverlay
anchors.fill: srcImg
source: srcImg
antialiasing: true

34
ScrollBar.qml Normal file
View File

@ -0,0 +1,34 @@
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.impl 2.12
import QtQuick.Templates 2.12 as T
import "../opaque" as Opaque
import "../opaque/theme"
import "../const"
T.ScrollBar {
palette.dark: Theme.defaultButtonColor
palette.mid: Theme.dividerColor
id: control
implicitWidth: Math.max(implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding)
implicitHeight: Math.max(implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding)
padding: 2
visible: control.policy !== T.ScrollBar.AlwaysOff && control.size < 1.0
contentItem: Rectangle {
implicitWidth: control.interactive ? 6 : 2
implicitHeight: control.interactive ? 6 : 2
radius: width / 2
color: control.pressed ? control.palette.dark : control.palette.mid
opacity: 1.0
}
}

42
Tab.qml Normal file
View File

@ -0,0 +1,42 @@
import QtGraphicalEffects 1.0
import QtQuick 2.7
import QtQuick.Controls 2.4
import QtQuick.Controls.Material 2.0
import QtQuick.Layouts 1.3
import "fonts/Twemoji.js" as T
import "theme"
import "fonts"
import "." as Opaque
Rectangle {
id: root
property bool active: false
property alias text: label.text
color: Theme.backgroundMainColor
signal clicked
height: label.height
Opaque.ScalingLabel {
id: label
anchors.horizontalCenter: parent.horizontalCenter
color: root.active ? Theme.mainTextColor : Theme.altTextColor
size: Theme.tabSize
font.family: Fonts.applicationFontRegular.name
font.styleName: "Bold"
}
MouseArea {
anchors.fill: parent
onClicked: {
parent.focus = true
parent.clicked()
}
}
}

12
TextField.qml
View File

@ -3,13 +3,13 @@ import QtQuick.Controls 2.13
import "theme"
/*!
\qmltype TextField
\inqmlmodule Opaque
\inherits QtQuick::Item
\index Index
\brief Basic single-line text input box.
\qmltype TextField
\inqmlmodule Opaque
\inherits QtQuick::Item
\index Index
\brief Basic single-line text input box.
For example:
For example:
*/
TextField {

4
Toolbar.qml
View File

@ -7,6 +7,8 @@ import QtQuick.Layouts 1.3
import "fonts/Twemoji.js" as T
import "." as Widgets
import "theme"
import "../opaque/fonts"
Rectangle { // Global Toolbar
id: toolbar
@ -74,6 +76,8 @@ Rectangle { // Global Toolbar
color: Theme.mainTextColor
size: Theme.tabSize * gcd.themeScale
weight: Font.Bold
font.family: Fonts.applicationFontRegular.name
font.styleName: "Bold"
text: "global toolbar"
//extraPadding: btnRightMenu.width + 10

9
theme/CwtchDark.qml
View File

@ -15,12 +15,15 @@ ThemeType {
backgroundPaneColor: deepPurple
backgroundHilightElementColor: deepPurple
dividerColor: mauvePurple
mainTextColor: purple
altTextColor: mauvePurple
hilightElementTextColor: purple
defaultButtonColor: mauvePurple
defaultButtonActiveColor: pink
defaultButtonTextColor: whitePurple
defaultButtonDisabledColor: softPurple
portraitOnlineBorderColor: whitePurple
portraitOnlineBackgroundColor: darkGreyPurple
@ -63,4 +66,10 @@ ThemeType {
messageFromMeTextColor: darkGreyPurple
messageFromOtherBackgroundColor: deepPurple
messageFromOtherTextColor: whitePurple
messageStatusNormalColor: mauvePurple
messageStatusBlockedColor: lightGrey
messageStatusBlockedTextColor: whitePurple
messageStatusAlertColor: darkGreyPurple
messageStatusAlertTextColor: whitePurple
}

8
theme/CwtchLight.qml
View File

@ -14,6 +14,7 @@ ThemeType {
backgroundPaneColor: softPurple
backgroundHilightElementColor: softPurple
dividerColor: purple
mainTextColor: darkPurple
altTextColor: purple
@ -21,6 +22,7 @@ ThemeType {
defaultButtonColor: hotPink
defaultButtonActiveColor: pink
defaultButtonTextColor: whitePurple
defaultButtonDisabledColor: purple
portraitOnlineBorderColor: darkPurple
portraitOnlineBackgroundColor: darkPurple
@ -63,4 +65,10 @@ ThemeType {
messageFromMeTextColor: whitePurple
messageFromOtherBackgroundColor: purple
messageFromOtherTextColor: darkPurple
messageStatusNormalColor: purple
messageStatusBlockedColor: lightGrey
messageStatusBlockedTextColor: whitePurple
messageStatusAlertColor: darkPurple
messageStatusAlertTextColor: whitePurple
}

9
theme/Theme.qml
View File

@ -7,12 +7,15 @@ Item {
readonly property color backgroundPaneColor: theme.backgroundPaneColor
readonly property color backgroundHilightElementColor: theme.backgroundHilightElementColor
readonly property color dividerColor: theme.dividerColor
readonly property color mainTextColor: theme.mainTextColor
readonly property color altTextColor: theme.altTextColor
readonly property color hilightElementTextColor: theme.hilightElementTextColor
readonly property color defaultButtonColor: theme.defaultButtonColor
readonly property color defaultButtonActiveColor: theme.defaultButtonActiveColor
readonly property color defaultButtonTextColor: theme.defaultButtonTextColor
readonly property color defaultButtonDisabledColor: theme.defaultButtonDisabledColor
readonly property color dropShadowColor: theme.dropShadowColor
readonly property color dropShadowPaneColor: theme.dropShadowPaneColor
@ -57,6 +60,12 @@ Item {
readonly property color messageFromOtherBackgroundColor: theme.messageFromOtherBackgroundColor
readonly property color messageFromOtherTextColor: theme.messageFromOtherTextColor
readonly property color messageStatusNormalColor: theme.messageStatusNormalColor
readonly property color messageStatusBlockedColor: theme.messageStatusBlockedColor
readonly property color messageStatusBlockedTextColor: theme.messageStatusBlockedTextColor
readonly property color messageStatusAlertColor: theme.messageStatusAlertColor
readonly property color messageStatusAlertTextColor: theme.messageStatusAlertTextColor
readonly property int headerSize: 50
readonly property int usernameSize: 30
readonly property int tabSize: 25

9
theme/ThemeType.qml
View File

@ -5,12 +5,15 @@ QtObject {
property color backgroundPaneColor: "red"
property color backgroundHilightElementColor: "red"
property color dividerColor: "red"
property color mainTextColor: "red"
property color altTextColor: "red"
property color hilightElementTextColor: "red"
property color defaultButtonColor: "red"
property color defaultButtonActiveColor: "red"
property color defaultButtonTextColor: "red"
property color defaultButtonDisabledColor: "red"
property color portraitOnlineBorderColor: "red"
property color portraitOnlineBackgroundColor: "red"
@ -54,6 +57,12 @@ QtObject {
property color messageFromOtherBackgroundColor: "red"
property color messageFromOtherTextColor: "red"
property color messageStatusNormalColor: "red"
property color messageStatusBlockedColor: "red"
property color messageStatusBlockedTextColor: "red"
property color messageStatusAlertColor: "red"
property color messageStatusAlertTextColor: "red"
// ... more to come