Warning, /maui/paleta/src/controls/ImagePage.qml is written in an unsupported language. File is not indexed.
0001 import QtQuick 2.0
0002 import QtQuick 2.15
0003 import QtQml 2.15
0004 import QtQuick.Controls 2.15
0005 import QtQuick.Layouts 1.12
0006
0007 import org.mauikit.controls 1.3 as Maui
0008 import org.mauikit.filebrowsing 1.3 as FM
0009
0010 import org.kde.paleta 1.0 as Paleta
0011
0012 Maui.Page
0013 {
0014 id: control
0015 showCSDControls: true
0016 headBar.background: null
0017 autoHideHeader: true
0018 property real contrastRatio : Maui.ColorUtils.contrastRatio(_imgColors.foreground, _imgColors.background)
0019
0020 background: Rectangle
0021 {
0022 readonly property bool isDark : Maui.ColorUtils.brightnessForColor(_imgColors.dominant) === Maui.ColorUtils.Dark
0023 color: Maui.ColorUtils.tintWithAlpha(Maui.Theme.backgroundColor, _imgColors.dominant, isDark ? 0.2 : 0.4)
0024 }
0025
0026 Component
0027 {
0028 id: _fileDialogComponent
0029 FM.FileDialog
0030 {
0031
0032 }
0033 }
0034
0035 headBar.leftContent: Maui.ToolButtonMenu
0036 {
0037 icon.name: "application-menu"
0038 MenuItem
0039 {
0040 text: i18n("Settings")
0041 icon.name: "settings-configure"
0042 }
0043
0044 MenuItem
0045 {
0046 text: i18n("About")
0047 icon.name: "documentinfo"
0048 onTriggered: root.about()
0049 }
0050
0051 }
0052
0053 headBar.rightContent: Switch
0054 {
0055 // text: i18n("Dark")
0056 icon.name: "contrast"
0057 checked: Maui.Style.styleType === Maui.Style.Dark
0058
0059 onToggled: Maui.Style.styleType = Maui.Style.styleType === Maui.Style.Dark ? Maui.Style.Light : Maui.Style.Dark
0060 }
0061
0062 Maui.ImageColors
0063 {
0064 id: _imgColors
0065 source: _img.imageSource.replace("file://", "")
0066 }
0067
0068 ScrollView
0069 {
0070 width: Math.min(parent.width, 800)
0071 anchors.centerIn: parent
0072 height: Math.min(contentHeight+ topPadding +bottomPadding, parent.height)
0073 padding: Maui.Style.space.medium
0074
0075 Flickable
0076 {
0077 id: _flickable
0078
0079 // contentWidth: availableWidth
0080 contentHeight: _grid.implicitHeight
0081
0082 GridLayout
0083 {
0084 id: _grid
0085 readonly property bool isWide : width > Maui.Style.units.gridUnit * 30
0086 width: parent.width
0087
0088 //rows: 2
0089 columns: isWide? 2 : 1
0090 rowSpacing: Maui.Style.space.huge
0091 columnSpacing: rowSpacing
0092
0093 ColumnLayout
0094 {
0095 spacing: Maui.Style.space.medium
0096 Layout.preferredWidth: 200
0097 Layout.fillWidth: !_grid.isWide
0098
0099 Item
0100 {
0101
0102 implicitHeight: 200
0103 Layout.fillWidth: true
0104 Maui.IconItem
0105 {
0106 id: _img
0107 anchors.fill:parent
0108 imageSource: "file:///home/camilo/Downloads/Elizabeth Pryton/EP 1335_e.jpg"
0109 maskRadius: Maui.Style.radiusV
0110 }
0111
0112 DropArea
0113 {
0114 id: _dropArea
0115 anchors.fill: parent
0116 onDropped: _img.imageSource = drop.urls[0]
0117
0118 Rectangle
0119 {
0120 anchors.fill: parent
0121 radius: Maui.Style.radiusV
0122 visible: _dropArea.containsDrag
0123 color: Maui.Theme.backgroundColor
0124 }
0125 }
0126 }
0127
0128 Button
0129 {
0130 Layout.alignment: Qt.AlignCenter
0131 // Layout.fillWidth: true
0132 text: i18n("Select")
0133 onClicked: openImage()
0134 }
0135 }
0136
0137
0138 Maui.SectionGroup
0139 {
0140 Layout.fillWidth: true
0141 // Layout.minimumWidth: 300
0142 title: "Colors"
0143
0144 Maui.SectionItem
0145 {
0146 label1.text: i18n("Palette")
0147 columns: 1
0148
0149 Flow
0150 {
0151 spacing: Maui.Style.space.medium
0152 Layout.fillWidth: true
0153
0154 Repeater
0155 {
0156 model:_imgColors.palette
0157
0158 delegate: ColorButton
0159 {
0160
0161 color: modelData.color
0162 text: modelData.color
0163
0164 onClicked:
0165 {
0166 Maui.Handy.copyTextToClipboard(modelData.color)
0167 root.notify("color", "Color copied1","color copied", () => {console.log(index)}, 2000, i18n("Copy"))
0168
0169 }
0170 }
0171 }
0172 }
0173 }
0174
0175 Maui.SectionItem
0176 {
0177 label1.text: i18n("Colors")
0178 columns: 1
0179
0180 Flow
0181 {
0182 Layout.fillWidth: true
0183 spacing: Maui.Style.space.medium
0184
0185 ColorButton
0186 {
0187 color: _imgColors.background
0188 text: i18n("Background")
0189 }
0190
0191 ColorButton
0192 {
0193 color: _imgColors.foreground
0194 text: i18n("Foreground")
0195
0196 }
0197
0198 ColorButton
0199 {
0200 color: _imgColors.dominant
0201 text: i18n("Dominant")
0202
0203 }
0204
0205 ColorButton
0206 {
0207 color: _imgColors.highlight
0208 text: i18n("Highlight")
0209
0210 }
0211
0212 ColorButton
0213 {
0214 color: _imgColors.average
0215 text: i18n("Average")
0216
0217 }
0218 }
0219 }
0220
0221
0222 Maui.SectionItem
0223 {
0224 label1.text: i18n("Others")
0225 columns: 1
0226 Flow
0227 {
0228 Layout.fillWidth: true
0229 spacing: Maui.Style.space.medium
0230
0231 ColorButton
0232 {
0233 color: _imgColors.closestToWhite
0234 text: i18n("Light")
0235
0236 }
0237 ColorButton
0238 {
0239 color: _imgColors.closestToBlack
0240 text: i18n("Dark")
0241
0242 }
0243 }
0244 }
0245 }
0246
0247 Maui.SectionGroup
0248 {
0249 Layout.fillWidth: true
0250 Layout.columnSpan: _grid.columns
0251 title: i18n("Contrast Ratio")
0252
0253
0254 Pane
0255 {
0256 Layout.fillWidth: true
0257 implicitWidth: _layout.implicitWidth + leftPadding + rightPadding
0258 implicitHeight: _layout.implicitHeight + topPadding + bottomPadding
0259
0260 background: Rectangle
0261 {
0262 radius: Maui.Style.radiusV
0263 color: _imgColors.background
0264 }
0265
0266 contentItem: ColumnLayout
0267 {
0268 id: _layout
0269 spacing: Maui.Style.space.medium
0270
0271 Label
0272 {
0273 Layout.fillWidth: true
0274 text: i18n("Hello World! This is an example text.")
0275 font: Maui.Style.h1Font
0276 color: _imgColors.foreground
0277 wrapMode: Text.Wrap
0278 elide: Text.ElideRight
0279 verticalAlignment: Qt.AlignVCenter
0280 }
0281
0282 Label
0283 {
0284 Layout.fillWidth: true
0285
0286 text: i18n("WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. .")
0287 color: _imgColors.foreground
0288 wrapMode: Text.Wrap
0289 elide: Text.ElideRight
0290 verticalAlignment: Qt.AlignVCenter
0291 }
0292 }
0293 }
0294
0295 Maui.SectionItem
0296 {
0297 label1.text: i18n("Contrast Ratio")
0298 label2.text: contrastRatio
0299 }
0300
0301 Maui.SectionItem
0302 {
0303 label1.text: "Checks"
0304
0305 columns: 1
0306
0307 Flow
0308 {
0309 Layout.fillWidth: true
0310 spacing: Maui.Style.space.medium
0311
0312 Maui.Chip
0313 {
0314 text: i18n("AA Small Text")
0315 icon.name: passes ? "checkbox" : "error"
0316 property bool passes : contrastRatio > 4.5
0317 color: passes ? Maui.Theme.positiveBackgroundColor : Maui.Theme.negativeBackgroundColor
0318 }
0319
0320 Maui.Chip
0321 {
0322 text: i18n("AAA Small Text")
0323 icon.name: passes ? "checkbox" : "error"
0324
0325 property bool passes : contrastRatio > 7.0
0326 color: passes ? Maui.Theme.positiveBackgroundColor : Maui.Theme.negativeBackgroundColor
0327 }
0328
0329 Maui.Chip
0330 {
0331 text: i18n("AA Large Text")
0332 icon.name: passes ? "checkbox" : "error"
0333
0334 property bool passes : contrastRatio > 3
0335 color: passes ? Maui.Theme.positiveBackgroundColor : Maui.Theme.negativeBackgroundColor
0336 }
0337
0338 Maui.Chip
0339 {
0340 text: i18n("AAA Large Text")
0341 icon.name: passes ? "checkbox" : "error"
0342
0343 property bool passes : contrastRatio > 4.5
0344 color: passes ? Maui.Theme.positiveBackgroundColor : Maui.Theme.negativeBackgroundColor
0345 }
0346 }
0347 }
0348 }
0349 }
0350 }
0351 }
0352
0353 Maui.Holder
0354 {
0355 anchors.fill: parent
0356 visible: _img.imageSource.length === 0
0357
0358 emoji: Maui.App.iconName
0359 title: Maui.App.about.displayName
0360 body: Maui.App.about.shortDescription
0361
0362 actions: Action
0363 {
0364 text: i18n("Open...")
0365 onTriggered: openImage()
0366 }
0367 }
0368
0369 function openImage()
0370 {
0371 _dialogLoader.sourceComponent = _fileDialogComponent
0372 dialog.mode = dialog.modes.OPEN
0373 dialog.singleSelection = true
0374 dialog.callback = (urls) => { console.log("files selected:", urls); _img.imageSource = urls[0]}
0375
0376 dialog.settings.filterType = FM.FMList.IMAGE
0377 dialog.open()
0378 }
0379 }