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 }