mirror of
https://github.com/zhuzichu520/FluentUI.git
synced 2025-05-13 00:13:29 +08:00
Compare commits
No commits in common. "af573b71a4fcd40bfb09e110e4284d5802f90f3b" and "6b9f7a1c9913714a147476d130eac34526b8030d" have entirely different histories.
af573b71a4
...
6b9f7a1c99
@ -2487,8 +2487,8 @@ Some contents...</source>
|
||||
<location filename="qml/page/T_TextBox.qml" line="33"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="64"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="97"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="135"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="168"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="128"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="157"/>
|
||||
<source>Disabled</source>
|
||||
<translation type="unfinished"></translation>
|
||||
</message>
|
||||
@ -2507,11 +2507,6 @@ Some contents...</source>
|
||||
<source>AutoSuggestBox</source>
|
||||
<translation type="unfinished"></translation>
|
||||
</message>
|
||||
<message>
|
||||
<location filename="qml/page/T_TextBox.qml" line="131"/>
|
||||
<source>Show suggest when pressed</source>
|
||||
<translation type="unfinished"></translation>
|
||||
</message>
|
||||
</context>
|
||||
<context>
|
||||
<name>T_Theme</name>
|
||||
|
@ -2676,8 +2676,8 @@ Some contents...</source>
|
||||
<location filename="qml/page/T_TextBox.qml" line="33"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="64"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="97"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="135"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="168"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="128"/>
|
||||
<location filename="qml/page/T_TextBox.qml" line="157"/>
|
||||
<source>Disabled</source>
|
||||
<translation type="unfinished">禁用</translation>
|
||||
</message>
|
||||
@ -2696,11 +2696,6 @@ Some contents...</source>
|
||||
<source>AutoSuggestBox</source>
|
||||
<translation type="unfinished">自动建议框</translation>
|
||||
</message>
|
||||
<message>
|
||||
<location filename="qml/page/T_TextBox.qml" line="131"/>
|
||||
<source>Show suggest when pressed</source>
|
||||
<translation>按下时显示建议</translation>
|
||||
</message>
|
||||
</context>
|
||||
<context>
|
||||
<name>T_Theme</name>
|
||||
|
@ -26,8 +26,7 @@ FluScrollablePage{
|
||||
width: parent.width
|
||||
text: qsTr("It usually appears in the upper right corner of the notification icon or avatar to display the number of messages that need to be processed")
|
||||
}
|
||||
Flow{
|
||||
width: parent.width
|
||||
Row{
|
||||
spacing: 20
|
||||
Rectangle{
|
||||
width: 40
|
||||
@ -35,7 +34,7 @@ FluScrollablePage{
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
position: "topRight"
|
||||
topRight: true
|
||||
showZero: true
|
||||
count:0
|
||||
}
|
||||
@ -47,7 +46,7 @@ FluScrollablePage{
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
position: "topRight"
|
||||
topRight: true
|
||||
showZero: true
|
||||
count:5
|
||||
}
|
||||
@ -58,7 +57,7 @@ FluScrollablePage{
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
position: "topRight"
|
||||
topRight: true
|
||||
showZero: true
|
||||
count:50
|
||||
}
|
||||
@ -69,10 +68,9 @@ FluScrollablePage{
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
position: "topRight"
|
||||
topRight: true
|
||||
showZero: true
|
||||
count:1000
|
||||
max: 999
|
||||
count:100
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
@ -81,7 +79,7 @@ FluScrollablePage{
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
position: "topRight"
|
||||
topRight: true
|
||||
showZero: true
|
||||
isDot:true
|
||||
}
|
||||
@ -92,7 +90,7 @@ FluScrollablePage{
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
position: "topRight"
|
||||
topRight: true
|
||||
showZero: true
|
||||
count:99
|
||||
color: Qt.rgba(250/255,173/255,20/255,1)
|
||||
@ -104,71 +102,12 @@ FluScrollablePage{
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
position: "topRight"
|
||||
topRight: true
|
||||
showZero: true
|
||||
count:99
|
||||
color: Qt.rgba(82/255,196/255,26/255,1)
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
width: 40
|
||||
height: 40
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
position: "topRight"
|
||||
showZero: true
|
||||
count:100
|
||||
color: Qt.rgba(84/255,169/255,1,1)
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
width: 40
|
||||
height: 40
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
position: "bottomLeft"
|
||||
showZero: true
|
||||
count:100
|
||||
color: Qt.rgba(84/255,169/255,1,1)
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
width: 40
|
||||
height: 40
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
position: "topLeft"
|
||||
showZero: true
|
||||
count:100
|
||||
color: Qt.rgba(84/255,169/255,1,1)
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
width: 40
|
||||
height: 40
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
position: "bottomRight"
|
||||
showZero: true
|
||||
count:100
|
||||
color: Qt.rgba(84/255,169/255,1,1)
|
||||
}
|
||||
}
|
||||
Rectangle{
|
||||
width: 40
|
||||
height: 40
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
position: "topRight"
|
||||
count: "NEW"
|
||||
color: Qt.rgba(84/255,169/255,1,1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -181,9 +120,7 @@ FluScrollablePage{
|
||||
radius: 8
|
||||
color: Qt.rgba(191/255,191/255,191/255,1)
|
||||
FluBadge{
|
||||
position: "topRight"
|
||||
count: 100
|
||||
max: 99
|
||||
isDot: false
|
||||
color: Qt.rgba(82/255,196/255,26/255,1)
|
||||
}
|
||||
|
@ -114,26 +114,18 @@ FluScrollablePage{
|
||||
placeholderText: qsTr("AutoSuggestBox")
|
||||
items: generateRandomNames(100)
|
||||
disabled: text_box_suggest_switch.checked
|
||||
itemRows: 12
|
||||
showSuggestWhenPressed: text_box_show_suggest_switch.checked
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
left: parent.left
|
||||
}
|
||||
}
|
||||
RowLayout{
|
||||
FluToggleSwitch{
|
||||
id:text_box_suggest_switch
|
||||
anchors{
|
||||
verticalCenter: parent.verticalCenter
|
||||
right: parent.right
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:text_box_show_suggest_switch
|
||||
text: qsTr("Show suggest when pressed")
|
||||
}
|
||||
FluToggleSwitch{
|
||||
id:text_box_suggest_switch
|
||||
text: qsTr("Disabled")
|
||||
}
|
||||
text: qsTr("Disabled")
|
||||
}
|
||||
}
|
||||
CodeExpander{
|
||||
@ -141,9 +133,6 @@ FluScrollablePage{
|
||||
Layout.topMargin: -6
|
||||
code:'FluAutoSuggestBox{
|
||||
placeholderText: qsTr("AutoSuggestBox")
|
||||
itemRows: 12
|
||||
itemHeight: 38
|
||||
showSuggestWhenPressed: false
|
||||
}'
|
||||
}
|
||||
|
||||
|
@ -7,12 +7,9 @@ FluTextBox{
|
||||
property var items:[]
|
||||
property string emptyText: qsTr("No results found")
|
||||
property int autoSuggestBoxReplacement: FluentIcons.Search
|
||||
property int itemHeight: 38
|
||||
property int itemRows: 8
|
||||
property bool showSuggestWhenPressed: false
|
||||
property string textRole: "title"
|
||||
property var filter: function(item){
|
||||
if(item[textRole].indexOf(control.text)!==-1){
|
||||
if(item.title.indexOf(control.text)!==-1){
|
||||
return true
|
||||
}
|
||||
return false
|
||||
@ -32,11 +29,17 @@ FluTextBox{
|
||||
control.updateText(modelData[textRole])
|
||||
}
|
||||
function loadData(){
|
||||
var result = []
|
||||
if(items==null){
|
||||
list_view.model = []
|
||||
list_view.model = result
|
||||
return
|
||||
}
|
||||
list_view.model = items.filter(item => control.filter(item))
|
||||
items.map(function(item){
|
||||
if(control.filter(item)){
|
||||
result.push(item)
|
||||
}
|
||||
})
|
||||
list_view.model = result
|
||||
}
|
||||
}
|
||||
onActiveFocusChanged: {
|
||||
@ -66,7 +69,7 @@ FluTextBox{
|
||||
ScrollBar.vertical: FluScrollBar {}
|
||||
header: Item{
|
||||
width: control.width
|
||||
height: visible ? control.itemHeight : 0
|
||||
height: visible ? 38 : 0
|
||||
visible: list_view.count === 0
|
||||
FluText{
|
||||
text: emptyText
|
||||
@ -79,7 +82,7 @@ FluTextBox{
|
||||
}
|
||||
delegate:FluControl{
|
||||
id: item_control
|
||||
height: control.itemHeight
|
||||
height: 38
|
||||
width: control.width
|
||||
onClicked: {
|
||||
d.handleClick(modelData)
|
||||
@ -111,7 +114,7 @@ FluTextBox{
|
||||
background:Rectangle{
|
||||
id: rect_background
|
||||
implicitWidth: control.width
|
||||
implicitHeight: control.itemHeight*Math.min(Math.max(list_view.count,1),control.itemRows)
|
||||
implicitHeight: 38*Math.min(Math.max(list_view.count,1),8)
|
||||
radius: 5
|
||||
color: FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(1,1,1,1)
|
||||
border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,1) : Qt.rgba(191/255,191/255,191/255,1)
|
||||
@ -121,14 +124,6 @@ FluTextBox{
|
||||
}
|
||||
}
|
||||
onTextChanged: {
|
||||
control.showSuggest()
|
||||
}
|
||||
onPressed: {
|
||||
if(control.showSuggestWhenPressed){
|
||||
control.showSuggest()
|
||||
}
|
||||
}
|
||||
function showSuggest(){
|
||||
d.loadData()
|
||||
if(d.flagVisible){
|
||||
var pos = control.mapToItem(null, 0, 0)
|
||||
|
@ -5,15 +5,19 @@ import FluentUI 1.0
|
||||
Rectangle{
|
||||
property bool isDot: false
|
||||
property bool showZero: false
|
||||
property var count: 0
|
||||
property int max: 99
|
||||
property string position: "" // topLeft, topRight, bottomLeft, bottomRight
|
||||
property int count: 0
|
||||
property bool topRight: false
|
||||
id:control
|
||||
color:Qt.rgba(255/255,77/255,79/255,1)
|
||||
width: {
|
||||
if(isDot)
|
||||
return 10
|
||||
return content_text.implicitWidth + 12
|
||||
if(count<10){
|
||||
return 20
|
||||
}else if(count<100){
|
||||
return 30
|
||||
}
|
||||
return 40
|
||||
}
|
||||
height: {
|
||||
if(isDot)
|
||||
@ -27,74 +31,49 @@ Rectangle{
|
||||
}
|
||||
border.width: 1
|
||||
border.color: Qt.rgba(1,1,1,1)
|
||||
anchors {
|
||||
left: {
|
||||
if(!parent){
|
||||
return undefined
|
||||
}
|
||||
return (position === "topLeft" || position === "bottomLeft") ? parent.left : undefined
|
||||
}
|
||||
anchors{
|
||||
right: {
|
||||
if(!parent){
|
||||
return undefined
|
||||
}
|
||||
return (position === "topRight" || position === "bottomRight") ? parent.right : undefined
|
||||
if(parent && topRight)
|
||||
return parent.right
|
||||
return undefined
|
||||
}
|
||||
top: {
|
||||
if(!parent){
|
||||
return undefined
|
||||
}
|
||||
return (position === "topLeft" || position === "topRight") ? parent.top : undefined
|
||||
}
|
||||
bottom: {
|
||||
if(!parent){
|
||||
return undefined
|
||||
}
|
||||
return (position === "bottomLeft" || position === "bottomRight") ? parent.bottom : undefined
|
||||
}
|
||||
leftMargin: {
|
||||
if(!parent){
|
||||
return 0
|
||||
}
|
||||
return (position === "topLeft" || position === "bottomLeft") ? (isDot ? -2.5 : -(width / 2)) : 0
|
||||
if(parent && topRight)
|
||||
return parent.top
|
||||
return undefined
|
||||
}
|
||||
rightMargin: {
|
||||
if(!parent){
|
||||
return 0
|
||||
if(parent && topRight){
|
||||
if(isDot){
|
||||
return -2.5
|
||||
}
|
||||
return -(control.width/2)
|
||||
}
|
||||
return (position === "topRight" || position === "bottomRight") ? (isDot ? -2.5 : -(width / 2)) : 0
|
||||
return 0
|
||||
}
|
||||
topMargin: {
|
||||
if(!parent){
|
||||
return 0
|
||||
if(parent && topRight){
|
||||
if(isDot){
|
||||
return -2.5
|
||||
}
|
||||
return -10
|
||||
}
|
||||
return (position === "topLeft" || position === "topRight") ? (isDot ? -2.5 : -10) : 0
|
||||
}
|
||||
bottomMargin: {
|
||||
if(!parent){
|
||||
return 0
|
||||
}
|
||||
return (position === "bottomLeft" || position === "bottomRight") ? (isDot ? -2.5 : -10) : 0
|
||||
return 0
|
||||
}
|
||||
}
|
||||
visible: {
|
||||
if(typeof(count) === "number"){
|
||||
return showZero ? true : count !== 0
|
||||
}
|
||||
return true
|
||||
if(showZero)
|
||||
return true
|
||||
return count!==0
|
||||
}
|
||||
FluText{
|
||||
id: content_text
|
||||
anchors.centerIn: parent
|
||||
color: Qt.rgba(1,1,1,1)
|
||||
visible: !isDot
|
||||
text:{
|
||||
if(typeof(count) === "string"){
|
||||
if(count<100)
|
||||
return count
|
||||
}else if(typeof(count) === "number"){
|
||||
return count <= max ? count.toString() : "%1+".arg(max.toString())
|
||||
}
|
||||
return ""
|
||||
return "100+"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -6,12 +6,9 @@ FluTextBox{
|
||||
property var items:[]
|
||||
property string emptyText: qsTr("No results found")
|
||||
property int autoSuggestBoxReplacement: FluentIcons.Search
|
||||
property int itemHeight: 38
|
||||
property int itemRows: 8
|
||||
property bool showSuggestWhenPressed: false
|
||||
property string textRole: "title"
|
||||
property var filter: function(item){
|
||||
if(item[textRole].indexOf(control.text)!==-1){
|
||||
if(item.title.indexOf(control.text)!==-1){
|
||||
return true
|
||||
}
|
||||
return false
|
||||
@ -31,11 +28,17 @@ FluTextBox{
|
||||
control.updateText(modelData[textRole])
|
||||
}
|
||||
function loadData(){
|
||||
var result = []
|
||||
if(items==null){
|
||||
list_view.model = []
|
||||
list_view.model = result
|
||||
return
|
||||
}
|
||||
list_view.model = items.filter(item => control.filter(item))
|
||||
items.map(function(item){
|
||||
if(control.filter(item)){
|
||||
result.push(item)
|
||||
}
|
||||
})
|
||||
list_view.model = result
|
||||
}
|
||||
}
|
||||
onActiveFocusChanged: {
|
||||
@ -65,7 +68,7 @@ FluTextBox{
|
||||
ScrollBar.vertical: FluScrollBar {}
|
||||
header: Item{
|
||||
width: control.width
|
||||
height: visible ? control.itemHeight : 0
|
||||
height: visible ? 38 : 0
|
||||
visible: list_view.count === 0
|
||||
FluText{
|
||||
text: emptyText
|
||||
@ -78,7 +81,7 @@ FluTextBox{
|
||||
}
|
||||
delegate:FluControl{
|
||||
id: item_control
|
||||
height: control.itemHeight
|
||||
height: 38
|
||||
width: control.width
|
||||
onClicked: {
|
||||
d.handleClick(modelData)
|
||||
@ -110,7 +113,7 @@ FluTextBox{
|
||||
background:Rectangle{
|
||||
id: rect_background
|
||||
implicitWidth: control.width
|
||||
implicitHeight: control.itemHeight*Math.min(Math.max(list_view.count,1),control.itemRows)
|
||||
implicitHeight: 38*Math.min(Math.max(list_view.count,1),8)
|
||||
radius: 5
|
||||
color: FluTheme.dark ? Qt.rgba(43/255,43/255,43/255,1) : Qt.rgba(1,1,1,1)
|
||||
border.color: FluTheme.dark ? Qt.rgba(26/255,26/255,26/255,1) : Qt.rgba(191/255,191/255,191/255,1)
|
||||
@ -120,14 +123,6 @@ FluTextBox{
|
||||
}
|
||||
}
|
||||
onTextChanged: {
|
||||
control.showSuggest()
|
||||
}
|
||||
onPressed: {
|
||||
if(control.showSuggestWhenPressed){
|
||||
control.showSuggest()
|
||||
}
|
||||
}
|
||||
function showSuggest(){
|
||||
d.loadData()
|
||||
if(d.flagVisible){
|
||||
var pos = control.mapToItem(null, 0, 0)
|
||||
|
@ -5,15 +5,19 @@ import FluentUI
|
||||
Rectangle{
|
||||
property bool isDot: false
|
||||
property bool showZero: false
|
||||
property var count: 0
|
||||
property int max: 99
|
||||
property string position: "" // topLeft, topRight, bottomLeft, bottomRight
|
||||
property int count: 0
|
||||
property bool topRight: false
|
||||
id:control
|
||||
color:Qt.rgba(255/255,77/255,79/255,1)
|
||||
width: {
|
||||
if(isDot)
|
||||
return 10
|
||||
return content_text.implicitWidth + 12
|
||||
if(count<10){
|
||||
return 20
|
||||
}else if(count<100){
|
||||
return 30
|
||||
}
|
||||
return 40
|
||||
}
|
||||
height: {
|
||||
if(isDot)
|
||||
@ -27,74 +31,49 @@ Rectangle{
|
||||
}
|
||||
border.width: 1
|
||||
border.color: Qt.rgba(1,1,1,1)
|
||||
anchors {
|
||||
left: {
|
||||
if(!parent){
|
||||
return undefined
|
||||
}
|
||||
return (position === "topLeft" || position === "bottomLeft") ? parent.left : undefined
|
||||
}
|
||||
anchors{
|
||||
right: {
|
||||
if(!parent){
|
||||
return undefined
|
||||
}
|
||||
return (position === "topRight" || position === "bottomRight") ? parent.right : undefined
|
||||
if(parent && topRight)
|
||||
return parent.right
|
||||
return undefined
|
||||
}
|
||||
top: {
|
||||
if(!parent){
|
||||
return undefined
|
||||
}
|
||||
return (position === "topLeft" || position === "topRight") ? parent.top : undefined
|
||||
}
|
||||
bottom: {
|
||||
if(!parent){
|
||||
return undefined
|
||||
}
|
||||
return (position === "bottomLeft" || position === "bottomRight") ? parent.bottom : undefined
|
||||
}
|
||||
leftMargin: {
|
||||
if(!parent){
|
||||
return 0
|
||||
}
|
||||
return (position === "topLeft" || position === "bottomLeft") ? (isDot ? -2.5 : -(width / 2)) : 0
|
||||
if(parent && topRight)
|
||||
return parent.top
|
||||
return undefined
|
||||
}
|
||||
rightMargin: {
|
||||
if(!parent){
|
||||
return 0
|
||||
if(parent && topRight){
|
||||
if(isDot){
|
||||
return -2.5
|
||||
}
|
||||
return -(control.width/2)
|
||||
}
|
||||
return (position === "topRight" || position === "bottomRight") ? (isDot ? -2.5 : -(width / 2)) : 0
|
||||
return 0
|
||||
}
|
||||
topMargin: {
|
||||
if(!parent){
|
||||
return 0
|
||||
if(parent && topRight){
|
||||
if(isDot){
|
||||
return -2.5
|
||||
}
|
||||
return -10
|
||||
}
|
||||
return (position === "topLeft" || position === "topRight") ? (isDot ? -2.5 : -10) : 0
|
||||
}
|
||||
bottomMargin: {
|
||||
if(!parent){
|
||||
return 0
|
||||
}
|
||||
return (position === "bottomLeft" || position === "bottomRight") ? (isDot ? -2.5 : -10) : 0
|
||||
return 0
|
||||
}
|
||||
}
|
||||
visible: {
|
||||
if(typeof(count) === "number"){
|
||||
return showZero ? true : count !== 0
|
||||
}
|
||||
return true
|
||||
if(showZero)
|
||||
return true
|
||||
return count!==0
|
||||
}
|
||||
FluText{
|
||||
id: content_text
|
||||
anchors.centerIn: parent
|
||||
color: Qt.rgba(1,1,1,1)
|
||||
visible: !isDot
|
||||
text:{
|
||||
if(typeof(count) === "string"){
|
||||
if(count<100)
|
||||
return count
|
||||
}else if(typeof(count) === "number"){
|
||||
return count <= max ? count.toString() : "%1+".arg(max.toString())
|
||||
}
|
||||
return ""
|
||||
return "100+"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user