Warning, /maui/mauikit/src/controls.6/IconItem.qml is written in an unsupported language. File is not indexed.
0001 /*
0002 * Copyright 2018 Camilo Higuita <milo.h@aol.com>
0003 *
0004 * This program is free software; you can redistribute it and/or modify
0005 * it under the terms of the GNU Library General Public License as
0006 * published by the Free Software Foundation; either version 2, or
0007 * (at your option) any later version.
0008 *
0009 * This program is distributed in the hope that it will be useful,
0010 * but WITHOUT ANY WARRANTY; without even the implied warranty of
0011 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
0012 * GNU General Public License for more details
0013 *
0014 * You should have received a copy of the GNU Library General Public
0015 * License along with this program; if not, write to the
0016 * Free Software Foundation, Inc.,
0017 * 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
0018 */
0019
0020 import QtQuick
0021 import QtQuick.Controls
0022 import Qt5Compat.GraphicalEffects
0023
0024 import org.mauikit.controls 1.3 as Maui
0025
0026 /**
0027 * @inherit QtQuick.Item
0028 * @since org.mauikit.controls 1.0
0029 * @brief An element to display an icon from the icon theme or file asset; or an image from a local file or a remote URL.
0030 *
0031 * <a href="https://doc.qt.io/qt-6/qml-qtquick-controls-item.html">This controls inherits from QQC2 Item, to checkout its inherited properties refer to the Qt Docs.</a>
0032 *
0033 * @note The image can be masked to have a rounded borders.
0034 * @see maskRadius
0035 *
0036 * @image html Misc/iconitem.png
0037 *
0038 * @code
0039 * Row
0040 * {
0041 * anchors.centerIn: parent
0042 * spacing: Maui.Style.space.big
0043 *
0044 * Maui.IconItem
0045 * {
0046 * imageSource: "file:///home/camiloh/Downloads/premium_photo-1664203068007-52240d0ca48f.avif"
0047 * imageSizeHint: 200
0048 * maskRadius: 100
0049 * fillMode: Image.PreserveAspectCrop
0050 *
0051 * }
0052 *
0053 * Maui.IconItem
0054 * {
0055 * iconSource: "vvave"
0056 * iconSizeHint: 94
0057 * }
0058 * }
0059 * @endcode
0060 *
0061 * @section notes Notes
0062 *
0063 * By default this item is only visible if the image source is ready or if the icon is valid. You can make it always visible, but would be a better idea to set a fallback icon with `icon.fallback: "icon-name"`.
0064 *
0065 * <a href="https://invent.kde.org/maui/mauikit/-/blob/qt6-2/examples/SideBarView.qml">You can find a more complete example at this link.</a>
0066 */
0067 Item
0068 {
0069 id: control
0070
0071 visible: icon.valid || img.status === Image.Ready
0072
0073 implicitHeight: visible ? Math.max(iconSizeHint, imageSizeHint) : 0
0074 implicitWidth: implicitHeight
0075
0076 smooth: true
0077
0078 /**
0079 * @brief Whether the control should be styled as being highlighted by some external event.
0080 * By default this is set to `false`.
0081 * @note When highlighted a monochromatic icon will take the color fo the accent color.
0082 */
0083 property bool highlighted: false
0084
0085 /**
0086 * @brief Whether the control should be styled as being hovered by a cursor.
0087 * By default his is set to `false`.
0088 */
0089 property bool hovered: false
0090
0091 /**
0092 * @brief A hint for the size of the icon. It will never be larger than the actual container size.
0093 * @note If the container size is 200x200, and the icon size hint has been set to 64, then the icon will be centered. If the icon size hint is larger, then the maximum value will be the container size.
0094 *
0095 * By default this is set to `Style.iconSizes.big`.
0096 */
0097 property int iconSizeHint : Maui.Style.iconSizes.big
0098
0099 /**
0100 * @brief A hint for the size of the image. It will never be larger than the actual container size.
0101 * @note If the container size is 200x200, and the image size hint has been set to 140, then the image will be aligned following the `alignment` property. If the image size hint is larger, then the maximum value will be the container size.
0102 * @see alignment
0103 *
0104 * By default this is set to `-1`, which means the image will fill the container size..
0105 */
0106 property int imageSizeHint : -1
0107
0108 /**
0109 * @brief The local or remote file URL of the image to be used.
0110 * @property string IconItem::imageSource
0111 */
0112 property alias imageSource : img.source
0113
0114 /**
0115 * @brief The name of the icon to be used.
0116 * @property string IconItem::iconSource
0117 */
0118 property alias iconSource : icon.source
0119
0120 /**
0121 * @brief The preferred fill mode for the image.
0122 * By default this is set to `Image.PreserveAspectFit`.
0123 * @note For more options and information review the QQC2 Image documentation.
0124 * @property enum IconItem::fillMode
0125 */
0126 property alias fillMode : img.fillMode
0127
0128 /**
0129 * @brief The border radius to mask the icon/image header section.
0130 * By default this is set to `0`.
0131 */
0132 property int maskRadius: 0
0133
0134 /**
0135 * @brief The painted width size of the image. This will make the image resolution fit this size.
0136 * By default this is set to `-1`, which means that the image will be loaded with its original resolution size.
0137 */
0138 property int imageWidth : -1
0139
0140 /**
0141 * @brief The painted height size of the image. This will make the image resolution fit this size.
0142 * By default this is set to `-1`, which means that the image will be loaded with its original resolution size.
0143 */
0144 property int imageHeight : -1
0145
0146 /**
0147 * @brief Whether the icon should be masked and tinted with the text color, this is used for monochromatic icons. If you plan to use a colorful icon, consider setting this property to `false`.
0148 */
0149 property alias isMask : icon.isMask
0150
0151 /**
0152 * @brief An alias to the QQC2 Image control for displaying the image.
0153 * @note Review the control own properties on Qt documentation.
0154 * @property Image IconItem::image
0155 */
0156 property alias image : img
0157
0158 /**
0159 * @brief An alias to the MauiKit Icon control for displaying the icon.
0160 * @see Icon
0161 * @property Icon IconItem::icon
0162 */
0163 property alias icon: icon
0164
0165 /**
0166 * @brief The desired color for tinting the monochromatic icons.
0167 * By default this is set to check the `isMask` property, and then decide base on the `highlighted` property is use the text color or accent color.
0168 */
0169 property color color : isMask ? (control.highlighted ? Maui.Theme.highlightedTextColor : Maui.Theme.textColor) : "transparent"
0170
0171 /**
0172 * @brief The aligment of the image in the container.
0173 * If the `imageSizeHint` has been set to a smaller size than the container, then its alignment will be dtermined by this property. Otherwise the image will fill the container size.
0174 * By default this is set to `Qt.AlignHCenter`.
0175 * Possible values are:
0176 * - Qt.AlignLeft
0177 * - Qt.AlignRight
0178 * - Qt.AlignHCenter
0179 */
0180 property int alignment: Qt.AlignHCenter
0181
0182 Maui.Icon
0183 {
0184 id: icon
0185 smooth: control.smooth
0186 anchors.centerIn: parent
0187 height: valid ? Math.floor(Math.min(parent.height, control.iconSizeHint)) : 0
0188 width: height
0189 color: control.color
0190 isMask: (height <= Maui.Style.iconSizes.medium)
0191 }
0192
0193 Image
0194 {
0195 id: img
0196
0197 width: Math.min(imageSizeHint >=0 ? imageSizeHint : parent.width, parent.width)
0198 height: Math.min(imageSizeHint >= 0 ? imageSizeHint : parent.height, parent.height)
0199
0200 anchors.verticalCenter: parent.verticalCenter
0201 x: switch(control.alignment)
0202 {
0203 case Qt.AlignLeft: return 0
0204 case Qt.AlignHCenter: return control.width/2 - width/2
0205 case Qt.AlignRight: return control.width - width
0206 }
0207
0208 sourceSize.width: (control.imageWidth > -1 ? control.imageWidth : width)
0209 sourceSize.height: (control.imageHeight > -1 ? control.imageHeight : height)
0210
0211 horizontalAlignment: Qt.AlignHCenter
0212 verticalAlignment: Qt.AlignVCenter
0213
0214 cache: true
0215 asynchronous: true
0216 smooth: control.smooth
0217 mipmap: false
0218
0219 layer.enabled: control.maskRadius
0220 layer.effect: OpacityMask
0221 {
0222 maskSource: Item
0223 {
0224 width: img.width
0225 height: img.height
0226
0227 Rectangle
0228 {
0229 anchors.centerIn: parent
0230 width: Math.min(parent.width, img.paintedWidth)
0231 height: Math.min(parent.height, img.paintedHeight)
0232 radius: control.maskRadius
0233 }
0234 }
0235 }
0236 }
0237 }