Skip to content

Commit

Permalink
Work on components
Browse files Browse the repository at this point in the history
  • Loading branch information
emericg committed Jun 12, 2024
1 parent fe3b756 commit 21d5034
Show file tree
Hide file tree
Showing 20 changed files with 591 additions and 93 deletions.
8 changes: 7 additions & 1 deletion qml/ComponentLibrary/ComponentLibrary.qrc
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@
<file alias="ListSeparator.qml">menus/ListSeparator.qml</file>
<file alias="ListSeparatorPadded.qml">menus/ListSeparatorPadded.qml</file>
<file alias="ListTitle.qml">menus/ListTitle.qml</file>
<file alias="SectionTitle.qml">menus/SectionTitle.qml</file>

<file alias="ButtonDesktop.qml">buttons/ButtonDesktop.qml</file>
<file alias="ButtonOutline.qml">buttons/ButtonOutline.qml</file>
Expand Down Expand Up @@ -117,6 +116,13 @@
<file alias="TextField_FileDialog.qml">complex/TextField_FileDialog.qml</file>
<file alias="TextField_FolderDialog.qml">complex/TextField_FolderDialog.qml</file>

<file alias="MapButton.qml">maps/MapButton.qml</file>
<file alias="MapButtonCompass.qml">maps/MapButtonCompass.qml</file>
<file alias="MapButtonZoom.qml">maps/MapButtonZoom.qml</file>
<file alias="MapFrameArea.qml">maps/MapFrameArea.qml</file>
<file alias="MapMarker.qml">maps/MapMarker.qml</file>
<file alias="MapScale.qml">maps/MapScale.qml</file>

<file alias="TagClear.qml">wip/TagClear.qml</file>
<file alias="TagDesktop.qml">wip/TagDesktop.qml</file>
<file alias="TagFlat.qml">wip/TagFlat.qml</file>
Expand Down
26 changes: 13 additions & 13 deletions qml/ComponentLibrary/ThemeEngine.qml
Original file line number Diff line number Diff line change
Expand Up @@ -552,8 +552,8 @@ Item {
colorBackground = "#f9f8f7"
colorForeground = "#f3f2f1"

colorPrimary = colorYellow
colorSecondary = "#ffe800"
colorPrimary = "#ffc900"
colorSecondary = "#ffeb00"
colorSuccess = colorGreen
colorWarning = colorOrange
colorError = colorRed
Expand Down Expand Up @@ -1036,7 +1036,7 @@ Item {
colorError = "#D33E39"

colorText = "white"
colorSubText = "#AAA"
colorSubText = "#999"
colorIcon = "white"
colorSeparator = "#666" // darker: "#333" // lighter: "#666"
colorLowContrast = "black"
Expand Down Expand Up @@ -1091,16 +1091,16 @@ Item {
colorText = "#222222"
colorSubText = "#555555"
colorIcon = "#333333"
colorSeparator = "#E4E4E4"
colorSeparator = "#e4e4e4"
colorLowContrast = "white"
colorHighContrast = "black"

colorComponent = "#EAEAEA"
colorComponent = "#f5f5f5"
colorComponentText = "black"
colorComponentContent = "black"
colorComponentBorder = "#DDD"
colorComponentDown = "#E6E6E6"
colorComponentBackground = "#FAFAFA"
colorComponentBorder = "#ddd"
colorComponentDown = "#eee"
colorComponentBackground = "#f8f8f8"

componentRadius = 4
componentBorderWidth = 2
Expand Down Expand Up @@ -1141,18 +1141,18 @@ Item {
colorWarning = "#FFDB63"
colorError = "#FA6871"

colorText = "#D2D2D2"
colorSubText = "#A3A3A3"
colorText = "#D4D4D4"
colorSubText = "#888"
colorIcon = "#A0A0A0"
colorSeparator = "#666"
colorLowContrast = "black"
colorHighContrast = "white"

colorComponent = "white"
colorComponent = "#fcfcfc"
colorComponentText = "black"
colorComponentContent = "black"
colorComponentBorder = "#E4E4E4"
colorComponentDown = "#DDD"
colorComponentBorder = "#e4e4e4"
colorComponentDown = "#ddd"
colorComponentBackground = "white"

componentRadius = 2
Expand Down
6 changes: 3 additions & 3 deletions qml/ComponentLibrary/complex/TextField_FileDialog.qml
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import QtCore

import QtQuick
import QtQuick.Dialogs
import QtQuick.Controls.impl
import QtQuick.Templates as T

import QtQuick.Dialogs
import QtCore

import ThemeEngine
import "qrc:/utils/UtilsPath.js" as UtilsPath

Expand Down
6 changes: 3 additions & 3 deletions qml/ComponentLibrary/complex/TextField_FolderDialog.qml
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import QtCore

import QtQuick
import QtQuick.Dialogs
import QtQuick.Controls.impl
import QtQuick.Templates as T

import QtQuick.Dialogs
import QtCore

import ThemeEngine
import "qrc:/utils/UtilsPath.js" as UtilsPath

Expand Down
88 changes: 88 additions & 0 deletions qml/ComponentLibrary/maps/MapButton.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import QtQuick
import QtQuick.Effects
import QtQuick.Controls.impl
import QtQuick.Templates as T

import ThemeEngine
import "qrc:/utils/UtilsNumber.js" as UtilsNumber

T.Button {
id: control

implicitWidth: Theme.componentHeight
implicitHeight: Theme.componentHeight

focusPolicy: Qt.NoFocus

// image
property url source
property int sourceSize: UtilsNumber.alignTo(height * 0.5, 2)
property int sourceRotation: 0

// settings
property int radius: width * 0.28
property string hoverMode: "off" // available: off
property string highlightMode: "off" // available: off

// colors
property string iconColor: Theme.colorIcon
property string highlightColor: Theme.colorPrimary
property string borderColor: Theme.colorSeparator
property string backgroundColor: Theme.colorLowContrast

////////////////

background: Item {
implicitWidth: Theme.componentHeight
implicitHeight: Theme.componentHeight

Rectangle { // background_alpha_borders
anchors.fill: parent
anchors.margins: isPhone ? -2 : -3
radius: control.radius
color: control.borderColor
opacity: 0.66

layer.enabled: true
layer.effect: MultiEffect {
autoPaddingEnabled: true
shadowEnabled: true
shadowColor: Theme.colorBoxShadow
}
}
Rectangle { // background
anchors.fill: parent
radius: control.radius
color: control.backgroundColor
}
/*
RippleThemed {
width: parent.width
height: parent.height
clip: visible
anchor: control
pressed: control.pressed
active: enabled && (control.down || control.visualFocus || control.hovered)
color: Qt.rgba(Theme.colorForeground.r, Theme.colorForeground.g, Theme.colorForeground.b, 0.9)
}
*/
}

////////////////

contentItem: Item {
IconSvg {
anchors.centerIn: parent

width: control.sourceSize
height: control.sourceSize

color: control.iconColor
source: control.source
rotation: control.sourceRotation
}
}

////////////////
}
100 changes: 100 additions & 0 deletions qml/ComponentLibrary/maps/MapButtonCompass.qml
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
import QtQuick
import QtQuick.Effects
import QtQuick.Controls.impl
import QtQuick.Templates as T

import ThemeEngine
import "qrc:/utils/UtilsNumber.js" as UtilsNumber

T.Button {
id: control

implicitWidth: Theme.componentHeight
implicitHeight: Theme.componentHeight

focusPolicy: Qt.NoFocus

// image
property url source_top: "qrc:/gfx/compass_top.svg"
property url source_bottom: "qrc:/gfx/compass_bottom.svg"
property int sourceSize: UtilsNumber.alignTo(height * 0.8, 2)
property int sourceRotation: 0

// settings
property int radius: width * 0.28
property string hoverMode: "off" // available: off
property string highlightMode: "off" // available: off

// colors
property string iconColor: Theme.colorIcon
property string highlightColor: Theme.colorPrimary
property string borderColor: Theme.colorSeparator
property string backgroundColor: Theme.colorLowContrast

////////////////

background: Item {
implicitWidth: Theme.componentHeight
implicitHeight: Theme.componentHeight

Rectangle { // background_alpha_borders
anchors.fill: parent
anchors.margins: isPhone ? -2 : -3
radius: control.radius
color: control.borderColor
opacity: 0.66

layer.enabled: true
layer.effect: MultiEffect {
autoPaddingEnabled: true
shadowEnabled: true
shadowColor: Theme.colorBoxShadow
}
}
Rectangle { // background
anchors.fill: parent
radius: control.radius
color: control.backgroundColor
}
/*
RippleThemed {
width: parent.width
height: parent.height
clip: visible
anchor: control
pressed: control.pressed
active: enabled && (control.down || control.visualFocus || control.hovered)
color: Qt.rgba(Theme.colorForeground.r, Theme.colorForeground.g, Theme.colorForeground.b, 0.9)
}
*/
}

////////////////

contentItem: Item {
rotation: control.sourceRotation
Behavior on rotation { RotationAnimation { duration: 333; direction: RotationAnimator.Shortest} }

IconSvg {
anchors.centerIn: parent

width: control.sourceSize
height: control.sourceSize

color: Theme.colorRed
source: control.source_top
}
IconSvg {
anchors.centerIn: parent

width: control.sourceSize
height: control.sourceSize

color: control.iconColor
source: control.source_bottom
}
}

////////////////
}
Loading

0 comments on commit 21d5034

Please sign in to comment.