Add Icons to Buttons

This commit is contained in:
Yuri Becker
2025-03-20 13:03:46 +01:00
parent fb06cea060
commit dc1ea604f7
28 changed files with 164 additions and 149 deletions

View File

@@ -1,7 +1,6 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Controls.Fusion
import QtQuick.Dialogs
import "../js/qmldict.js" as JsLib

View File

@@ -1,7 +1,6 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Controls.Fusion
import QtQuick.Dialogs
import "../js/qmldict.js" as JsLib

View File

@@ -2,7 +2,6 @@ import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Qt.labs.qmlmodels
import QtQuick.Controls.Fusion
Item {
anchors.fill: parent

View File

@@ -20,7 +20,6 @@ GridLayout
Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
}
TextField
{
property string name: "business"

View File

@@ -2,176 +2,170 @@ import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Qt.labs.qmlmodels
import QtQuick.Controls.Fusion
Item
{
SearchBar
{
Item {
function viewCriterion(criterion) {
business_model.viewCriterion(criterion.text);
}
Component.onCompleted: customersStack.pop()
SearchBar {
id: searchBar
anchors.margins: 9
}
Button
{
id: addBusinessBtn
icon.source: "qrc:/images/addbusiness.svg"
icon.color: "olive"
Button {
id: addCustomer
anchors.right: parent.right
flat: true
icon.source: "qrc:/images/PlusCircle.svg"
text: qsTr("Kunde hinzufügen")
onClicked: appLoader.source = "AddCustomer.qml"
}
ColumnLayout
{
ColumnLayout {
id: tableColumn
clip: true
anchors
{
top: searchBar.bottom
anchors {
bottom: parent.bottom
left: parent.left
right: parent.right
top: searchBar.bottom
}
RowLayout
{
RowLayout {
id: sortView
RadioButton
{
RadioButton {
id: showAll
checked: true
text: qsTr("Alle")
onClicked: viewCriterion(showAll)
}
RadioButton
{
RadioButton {
id: showInterested
text: qsTr("Interessent")
onClicked: viewCriterion(showInterested)
}
RadioButton
{
RadioButton {
id: showClientele
text: qsTr("Kunden")
onClicked: viewCriterion(showClientele)
}
RadioButton
{
RadioButton {
id: showProvider
text: qsTr("Lieferant")
onClicked: viewCriterion(showProvider)
}
RadioButton
{
RadioButton {
id: showFinished
text: qsTr("Erledigt")
onClicked: viewCriterion(showFinished)
}
}
HorizontalHeaderView
{
HorizontalHeaderView {
id: horizontalHeader
Layout.fillWidth: true
implicitHeight: 40
movableColumns: true //@disable-check M16
syncView: customerTable
delegate: Rectangle
{
color: addBusinessBtn.palette.alternateBase
border.color: addBusinessBtn.palette.base
implicitHeight: 40
delegate: Rectangle {
Layout.fillWidth: true
border.color: addCustomer.palette.base
color: addCustomer.palette.alternateBase
implicitHeight: 40
implicitWidth: 1
Text
{
text: model.display
Text {
color: addCustomer.palette.text
elide: Text.ElideRight
width: parent.width
height: parent.height
horizontalAlignment: Text.AlignHCenter
text: model.display
verticalAlignment: Text.AlignVCenter
color: addBusinessBtn.palette.text
width: parent.width
}
}
}
TableView
{
property real newWidth: 0
TableView {
id: customerTable
z: 1
property real newWidth: 0
Layout.fillHeight: true
//height: tableColumn.height - (sortView.height + horizontalHeader.height)
Layout.fillWidth: true
columnSpacing: 1
rowSpacing: 2
model: business_model
alternatingRows: true
columnSpacing: 1
model: business_model
resizableColumns: true
rowSpacing: 2
selectionBehavior: TableView.SelectRows
ScrollBar.vertical: ScrollBar
{
z: 1
ScrollBar.vertical: ScrollBar {
policy: customerTable.contentHeight > customerTable.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
}
selectionModel: ItemSelectionModel
{
id: selModel
model: customerTable.model
}
delegate:Rectangle
{
required property bool selected
delegate: Rectangle {
required property bool current
implicitWidth: customerTable.width / customerTable.columns
required property bool selected
color: selected ? addCustomer.palette.highlight //palette.highlight
: (customerTable.alternatingRows && row % 2 !== 0 ? addCustomer.palette.base // palette.base
: addCustomer.palette.alternateBase) //palette.alternateBase)
implicitHeight: 25
color: selected
? addBusinessBtn.palette.highlight //palette.highlight
: (customerTable.alternatingRows && row % 2 !== 0
? addBusinessBtn.palette.base // palette.base
: addBusinessBtn.palette.alternateBase) //palette.alternateBase)
Text
{
text: model.display == null? "": model.display // @disable-check M126
implicitWidth: customerTable.width / customerTable.columns
Text {
color: addCustomer.palette.text
elide: Text.ElideRight
width: parent.width
height: parent.height
verticalAlignment: Text.AlignVCenter
leftPadding: 9
color: addBusinessBtn.palette.text
text: model.display == null ? "" : model.display // @disable-check M126
verticalAlignment: Text.AlignVCenter
width: parent.width
}
MouseArea
{
property bool hovered: false
MouseArea {
id: mouseArea
property bool hovered: false
anchors.fill: parent
hoverEnabled: true
onDoubleClicked:
{
business_model.onRowClicked(row)
customersStack.push("CustomerDetails.qml", {selectedClient: row});
}
onEntered:
{
customerTable.selectionModel.select(customerTable.model.index(row, 0), ItemSelectionModel.SelectCurrent | ItemSelectionModel.Rows)
}
onDoubleClicked: {
business_model.onRowClicked(row);
customersStack.push("CustomerDetails.qml", {
selectedClient: row
});
}
onEntered: {
customerTable.selectionModel.select(customerTable.model.index(row, 0), ItemSelectionModel.SelectCurrent | ItemSelectionModel.Rows);
}
}
}
selectionModel: ItemSelectionModel {
id: selModel
Item
{
model: customerTable.model
}
}
Item {
Layout.fillWidth: true
}
}
function viewCriterion(criterion)
{
business_model.viewCriterion(criterion.text)
}
Component.onCompleted: customersStack.pop()
}

View File

@@ -16,8 +16,8 @@ Item
Button
{
id: addEmployeeBtn
icon.source: "qrc:/images/addbusiness.svg"
icon.color: "olive"
text: qsTr("Mitarbeiter Hinzufügen")
icon.source: "qrc:/images/PlusCircle.svg"
anchors.right: parent.right
flat: true
onClicked: appLoader.source = "AddApplicant.qml"

View File

@@ -32,16 +32,15 @@ Item {
}
ColumnLayout {
spacing: Dimensions.m
anchors.centerIn: parent
spacing: Dimensions.m
Label {
font: Typography.h1
text: qsTr("Login")
Layout.alignment: Qt.AlignHCenter
Layout.bottomMargin: Dimensions.l
font: Typography.h1
text: qsTr("Login")
}
Field {
label: qsTr("Benutzername")
@@ -78,11 +77,11 @@ Item {
}
}
}
Button {
Layout.topMargin: Dimensions.m
implicitWidth: parent.width
icon.source: "qrc:/images/ArrowRightEndOnRectangle.svg"
text: qsTr("Login")
width: parent.width
onClicked: {
if (benutzerName.text.trim() && passwort.text.trim())

View File

@@ -2,7 +2,6 @@ import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Qt.labs.qmlmodels
import QtQuick.Controls.Fusion
Item {
property var availableFilters: [""]

View File

@@ -2,7 +2,6 @@ import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Qt.labs.qmlmodels
import QtQuick.Controls.Fusion
Item
{
@@ -15,10 +14,9 @@ Item
Button
{
id: addObjectBtn
icon.source: "qrc:/images/addbusiness.svg"
icon.color: "olive"
icon.source: "qrc:/images/PlusCircle.svg"
text: qsTr("Objekt Hinzufügen")
anchors.right: parent.right
flat: true
onClicked: appLoader.source = "AddObject.qml"
}

View File

@@ -18,8 +18,7 @@ RowLayout
Button
{
icon.source: "qrc:/images/search.svg"
icon.color: "olive"
icon.source: "qrc:/images/MagnifyingGlass.svg"
x: parent.x + parent.width - width
height: parent.height
flat: true
@@ -29,8 +28,7 @@ RowLayout
Button
{
id: filterBtn
icon.source: "qrc:/images/filter.svg"
icon.color: "olive"
icon.source: "qrc:/images/Funnel.svg"
x: parent.x + parent.width
height: searchField.height
flat: true

View File

@@ -199,8 +199,7 @@ RowLayout
Button
{
id: atajos
icon.source: "qrc:/images/menu.svg"
icon.color: "red"
icon.source: "qrc:/images/Bars3.svg"
flat: true
Layout.rightMargin: 9
onClicked: mainMenu.open()

View File

@@ -1,30 +1,50 @@
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls.impl as I
import QtQuick.Templates as T
T.Button {
id: control
implicitHeight: implicitContentHeight
implicitWidth: contentItem.width
icon.color: Colors.foreground
icon.height: 21
icon.width: 21
implicitHeight: Math.max(
implicitBackgroundHeight + topInset + bottomInset,
implicitContentHeight + topPadding + bottomPadding
)
implicitWidth: Math.max(
implicitBackgroundWidth + leftInset + rightInset,
implicitContentWidth + leftPadding + rightPadding
)
padding: Dimensions.s - (icon.source.toString() === "" ? 0 : 1)
background: Rectangle {
anchors.fill: parent
color: Colors.primary
radius: Dimensions.radius
}
contentItem: Text {
color: Colors.foreground
font: control.font
padding: Dimensions.s + 2
contentItem: I.IconLabel {
spacing: Dimensions.s
mirrored: control.mirrored
display: control.display
icon: control.icon
text: control.text
// Make sure the button is at least wide enough to be comfortably clickable
width: Math.max(implicitWidth, 120)
horizontalAlignment: Text.AlignHCenter
font: control.font
color: Colors.foreground
}
onIconChanged: () => {
// console.log("ICON '" + JSON.stringify(icon.source) + "' " + (icon.source.toString() === "") + " ");
}
MouseArea {
id: mouseArea
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onPressed: (mouse) => mouse.accepted = false
onPressed: mouse => mouse.accepted = false
}
}

View File

@@ -0,0 +1,4 @@
<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-slot="icon" data-darkreader-inline-fill="">
<path clip-rule="evenodd" fill-rule="evenodd" d="M17 4.25A2.25 2.25 0 0 0 14.75 2h-5.5A2.25 2.25 0 0 0 7 4.25v2a.75.75 0 0 0 1.5 0v-2a.75.75 0 0 1 .75-.75h5.5a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-.75.75h-5.5a.75.75 0 0 1-.75-.75v-2a.75.75 0 0 0-1.5 0v2A2.25 2.25 0 0 0 9.25 18h5.5A2.25 2.25 0 0 0 17 15.75V4.25Z"></path>
<path clip-rule="evenodd" fill-rule="evenodd" d="M1 10a.75.75 0 0 1 .75-.75h9.546l-1.048-.943a.75.75 0 1 1 1.004-1.114l2.5 2.25a.75.75 0 0 1 0 1.114l-2.5 2.25a.75.75 0 1 1-1.004-1.114l1.048-.943H1.75A.75.75 0 0 1 1 10Z"></path>
</svg>

After

Width:  |  Height:  |  Size: 708 B

3
images/Bars3.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-slot="icon">
<path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 0 1 2.75 4h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75ZM2 10a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 10Zm0 5.25a.75.75 0 0 1 .75-.75h14.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1-.75-.75Z"></path>
</svg>

After

Width:  |  Height:  |  Size: 414 B

View File

@@ -1,3 +1,3 @@
<svg fill="none" stroke-width="1.5" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-slot="icon" data-darkreader-inline-stroke="">
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"></path>
<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-slot="icon">
<path clip-rule="evenodd" fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"></path>
</svg>

Before

Width:  |  Height:  |  Size: 283 B

After

Width:  |  Height:  |  Size: 318 B

3
images/Funnel.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-slot="icon">
<path clip-rule="evenodd" fill-rule="evenodd" d="M2.628 1.601C5.028 1.206 7.49 1 10 1s4.973.206 7.372.601a.75.75 0 0 1 .628.74v2.288a2.25 2.25 0 0 1-.659 1.59l-4.682 4.683a2.25 2.25 0 0 0-.659 1.59v3.037c0 .684-.31 1.33-.844 1.757l-1.937 1.55A.75.75 0 0 1 8 18.25v-5.757a2.25 2.25 0 0 0-.659-1.591L2.659 6.22A2.25 2.25 0 0 1 2 4.629V2.34a.75.75 0 0 1 .628-.74Z"></path>
</svg>

After

Width:  |  Height:  |  Size: 495 B

View File

@@ -0,0 +1,3 @@
<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-slot="icon">
<path clip-rule="evenodd" fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11ZM2 9a7 7 0 1 1 12.452 4.391l3.328 3.329a.75.75 0 1 1-1.06 1.06l-3.329-3.328A7 7 0 0 1 2 9Z"></path>
</svg>

After

Width:  |  Height:  |  Size: 319 B

3
images/PlusCircle.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-slot="icon">
<path clip-rule="evenodd" fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-11.25a.75.75 0 0 0-1.5 0v2.5h-2.5a.75.75 0 0 0 0 1.5h2.5v2.5a.75.75 0 0 0 1.5 0v-2.5h2.5a.75.75 0 0 0 0-1.5h-2.5v-2.5Z"></path>
</svg>

After

Width:  |  Height:  |  Size: 344 B

6
images/README.md Normal file
View File

@@ -0,0 +1,6 @@
Icons are sourced from [heroicons.dev](https://heroicons.dev/?iconset=v2-20-solid&size=21) and licensed under the terms of the MIT license.
## Solid or Outline?
Get the 20px Solid icon for most cases, since solid icons are the easiest for users to scan.
You might need an Outline icon in some cases, e.g. because the icon renders so big that a solid icon looks "boring". Suffix outline icon files with `-Outline`) and change the `stroke-width` attribute in the .svg to 2.

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z"/></svg>

Before

Width:  |  Height:  |  Size: 751 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z"/></svg>

Before

Width:  |  Height:  |  Size: 182 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M720-40v-120H600v-80h120v-120h80v120h120v80H800v120h-80ZM80-160v-240H40v-80l40-200h600l40 200v80h-40v120h-80v-120H440v240H80Zm80-80h200v-160H160v160Zm-38-240h516-516ZM80-720v-80h600v80H80Zm42 240h516l-24-120H146l-24 120Z"/></svg>

Before

Width:  |  Height:  |  Size: 345 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5F6368"><path d="M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h360v80H200v560h560v-360h80v360q0 33-23.5 56.5T760-120H200Zm120-160v-80h320v80H320Zm0-120v-80h320v80H320Zm0-120v-80h320v80H320Zm360-80v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Z"/></svg>

Before

Width:  |  Height:  |  Size: 362 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#000000"><path d="M720-400v-120H600v-80h120v-120h80v120h120v80H800v120h-80Zm-360-80q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM40-160v-112q0-34 17.5-62.5T104-378q62-31 126-46.5T360-440q66 0 130 15.5T616-378q29 15 46.5 43.5T680-272v112H40Zm80-80h480v-32q0-11-5.5-20T580-306q-54-27-109-40.5T360-360q-56 0-111 13.5T140-306q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T440-640q0-33-23.5-56.5T360-720q-33 0-56.5 23.5T280-640q0 33 23.5 56.5T360-560Zm0-80Zm0 400Z"/></svg>

Before

Width:  |  Height:  |  Size: 603 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M440-160q-17 0-28.5-11.5T400-200v-240L168-736q-15-20-4.5-42t36.5-22h560q26 0 36.5 22t-4.5 42L560-440v240q0 17-11.5 28.5T520-160h-80Zm40-308 198-252H282l198 252Zm0 0Z"/></svg>

Before

Width:  |  Height:  |  Size: 290 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>

Before

Width:  |  Height:  |  Size: 193 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>

Before

Width:  |  Height:  |  Size: 376 B

View File

@@ -1,22 +1,20 @@
<RCC>
<qresource prefix="/">
<file>qtquickcontrols2.conf</file>
<file>images/add.svg</file>
<file>images/addbusiness.svg</file>
<file>images/addperson.svg</file>
<file>images/filter.svg</file>
<file>images/menu.svg</file>
<file>images/search.svg</file>
<file>images/ArrowRightEndOnRectangle.svg</file>
<file>images/Bars3.svg</file>
<file>images/ChevronDown.svg</file>
<file>images/Funnel.svg</file>
<file>images/MagnifyingGlass.svg</file>
<file>images/PlusCircle.svg</file>
<file>images/tero.jpg</file>
<file>sounds/error.ogg</file>
<file>sounds/fail2c.ogg</file>
<file>sounds/puzzerr.ogg</file>
<file>sounds/sysnotify.ogg</file>
<file>sounds/wrong.ogg</file>
<file>fonts/RobotoCondensed.otf</file>
<file>images/account.svg</file>
<file>README</file>
<file>LICENSE</file>
<file>images/tero.jpg</file>
</qresource>
</RCC>