1// Copyright (c) 2018 Ultimaker B.V. 2// Cura is released under the terms of the LGPLv3 or higher. 3 4import QtQuick 2.10 5import QtQuick.Controls 1.4 6import QtQuick.Controls.Styles 1.4 7 8import UM 1.1 as UM 9 10QtObject 11{ 12 property Component print_setup_header_button: Component 13 { 14 ButtonStyle 15 { 16 background: Rectangle 17 { 18 color: 19 { 20 if(control.enabled) 21 { 22 if(control.valueError) 23 { 24 return Theme.getColor("setting_validation_error_background"); 25 } 26 else if(control.valueWarning) 27 { 28 return Theme.getColor("setting_validation_warning_background"); 29 } 30 else 31 { 32 return Theme.getColor("setting_control"); 33 } 34 } 35 else 36 { 37 return Theme.getColor("setting_control_disabled"); 38 } 39 } 40 41 radius: UM.Theme.getSize("setting_control_radius").width 42 border.width: Theme.getSize("default_lining").width 43 border.color: 44 { 45 if (control.enabled) 46 { 47 if (control.valueError) 48 { 49 return Theme.getColor("setting_validation_error"); 50 } 51 else if (control.valueWarning) 52 { 53 return Theme.getColor("setting_validation_warning"); 54 } 55 else if (control.hovered) 56 { 57 return Theme.getColor("setting_control_border_highlight"); 58 } 59 else 60 { 61 return Theme.getColor("setting_control_border"); 62 } 63 } 64 else 65 { 66 return Theme.getColor("setting_control_disabled_border"); 67 } 68 } 69 UM.RecolorImage 70 { 71 id: downArrow 72 anchors.verticalCenter: parent.verticalCenter 73 anchors.right: parent.right 74 anchors.rightMargin: Theme.getSize("default_margin").width 75 width: Theme.getSize("standard_arrow").width 76 height: Theme.getSize("standard_arrow").height 77 sourceSize.height: width 78 color: control.enabled ? Theme.getColor("setting_control_button") : Theme.getColor("setting_category_disabled_text") 79 source: Theme.getIcon("arrow_bottom") 80 } 81 Label 82 { 83 id: printSetupComboBoxLabel 84 color: control.enabled ? Theme.getColor("setting_control_text") : Theme.getColor("setting_control_disabled_text") 85 text: control.text; 86 elide: Text.ElideRight; 87 anchors.left: parent.left; 88 anchors.leftMargin: Theme.getSize("setting_unit_margin").width 89 anchors.right: downArrow.left; 90 anchors.rightMargin: control.rightMargin; 91 anchors.verticalCenter: parent.verticalCenter; 92 font: Theme.getFont("default") 93 } 94 } 95 label: Label{} 96 } 97 } 98 99 property Component main_window_header_tab: Component 100 { 101 ButtonStyle 102 { 103 // This property will be back-propagated when the width of the label is calculated 104 property var buttonWidth: 0 105 106 background: Rectangle 107 { 108 id: backgroundRectangle 109 implicitHeight: control.height 110 implicitWidth: buttonWidth 111 radius: UM.Theme.getSize("action_button_radius").width 112 113 color: 114 { 115 if (control.checked) 116 { 117 return UM.Theme.getColor("main_window_header_button_background_active") 118 } 119 else 120 { 121 if (control.hovered) 122 { 123 return UM.Theme.getColor("main_window_header_button_background_hovered") 124 } 125 return UM.Theme.getColor("main_window_header_button_background_inactive") 126 } 127 } 128 129 } 130 131 label: Item 132 { 133 id: contents 134 anchors.horizontalCenter: parent.horizontalCenter 135 anchors.verticalCenter: parent.verticalCenter 136 height: control.height 137 width: buttonLabel.width + 4 * UM.Theme.getSize("default_margin").width 138 139 Label 140 { 141 id: buttonLabel 142 text: control.text 143 anchors.verticalCenter: parent.verticalCenter 144 anchors.horizontalCenter: parent.horizontalCenter 145 font: UM.Theme.getFont("medium") 146 color: 147 { 148 if (control.checked) 149 { 150 return UM.Theme.getColor("main_window_header_button_text_active") 151 } 152 else 153 { 154 if (control.hovered) 155 { 156 return UM.Theme.getColor("main_window_header_button_text_hovered") 157 } 158 return UM.Theme.getColor("main_window_header_button_text_inactive") 159 } 160 } 161 } 162 Component.onCompleted: 163 { 164 buttonWidth = width 165 } 166 } 167 168 169 } 170 } 171 172 property Component tool_button: Component 173 { 174 ButtonStyle 175 { 176 background: Item 177 { 178 implicitWidth: Theme.getSize("button").width 179 implicitHeight: Theme.getSize("button").height 180 181 UM.PointingRectangle 182 { 183 id: button_tooltip 184 185 anchors.left: parent.right 186 anchors.leftMargin: Theme.getSize("button_tooltip_arrow").width * 2 187 anchors.verticalCenter: parent.verticalCenter 188 189 target: Qt.point(parent.x, y + Math.round(height/2)) 190 arrowSize: Theme.getSize("button_tooltip_arrow").width 191 color: Theme.getColor("button_tooltip") 192 opacity: control.hovered ? 1.0 : 0.0; 193 visible: control.text != "" 194 195 width: control.hovered ? button_tip.width + Theme.getSize("button_tooltip").width : 0 196 height: Theme.getSize("button_tooltip").height 197 198 Behavior on width { NumberAnimation { duration: 100; } } 199 Behavior on opacity { NumberAnimation { duration: 100; } } 200 201 Label 202 { 203 id: button_tip 204 205 anchors.horizontalCenter: parent.horizontalCenter 206 anchors.verticalCenter: parent.verticalCenter 207 208 text: control.text 209 font: Theme.getFont("default") 210 color: Theme.getColor("tooltip_text") 211 } 212 } 213 214 Rectangle 215 { 216 id: buttonFace 217 218 anchors.fill: parent 219 property bool down: control.pressed || (control.checkable && control.checked) 220 221 color: 222 { 223 if(control.customColor !== undefined && control.customColor !== null) 224 { 225 return control.customColor 226 } 227 else if(control.checkable && control.checked && control.hovered) 228 { 229 return Theme.getColor("toolbar_button_active_hover") 230 } 231 else if(control.pressed || (control.checkable && control.checked)) 232 { 233 return Theme.getColor("toolbar_button_active") 234 } 235 else if(control.hovered) 236 { 237 return Theme.getColor("toolbar_button_hover") 238 } 239 return Theme.getColor("toolbar_background") 240 } 241 Behavior on color { ColorAnimation { duration: 50; } } 242 243 border.width: (control.hasOwnProperty("needBorder") && control.needBorder) ? Theme.getSize("default_lining").width : 0 244 border.color: control.checked ? Theme.getColor("icon") : Theme.getColor("lining") 245 } 246 } 247 248 label: Item 249 { 250 UM.RecolorImage 251 { 252 anchors.centerIn: parent 253 opacity: control.enabled ? 1.0 : 0.2 254 source: control.iconSource 255 width: Theme.getSize("button_icon").width 256 height: Theme.getSize("button_icon").height 257 color: Theme.getColor("icon") 258 259 sourceSize: Theme.getSize("button_icon") 260 } 261 } 262 } 263 } 264 265 property Component progressbar: Component 266 { 267 ProgressBarStyle 268 { 269 background: Rectangle 270 { 271 implicitWidth: Theme.getSize("message").width - (Theme.getSize("default_margin").width * 2) 272 implicitHeight: Theme.getSize("progressbar").height 273 color: control.hasOwnProperty("backgroundColor") ? control.backgroundColor : Theme.getColor("progressbar_background") 274 radius: Theme.getSize("progressbar_radius").width 275 } 276 progress: Rectangle 277 { 278 color: 279 { 280 if(control.indeterminate) 281 { 282 return "transparent"; 283 } 284 else if(control.hasOwnProperty("controlColor")) 285 { 286 return control.controlColor; 287 } 288 else 289 { 290 return Theme.getColor("progressbar_control"); 291 } 292 } 293 radius: Theme.getSize("progressbar_radius").width 294 Rectangle 295 { 296 radius: Theme.getSize("progressbar_radius").width 297 color: control.hasOwnProperty("controlColor") ? control.controlColor : Theme.getColor("progressbar_control") 298 width: Theme.getSize("progressbar_control").width 299 height: Theme.getSize("progressbar_control").height 300 visible: control.indeterminate 301 302 SequentialAnimation on x 303 { 304 id: xAnim 305 property int animEndPoint: Theme.getSize("message").width - Math.round((Theme.getSize("default_margin").width * 2.5)) - Theme.getSize("progressbar_control").width 306 running: control.indeterminate && control.visible 307 loops: Animation.Infinite 308 NumberAnimation { from: 0; to: xAnim.animEndPoint; duration: 2000;} 309 NumberAnimation { from: xAnim.animEndPoint; to: 0; duration: 2000;} 310 } 311 } 312 } 313 } 314 } 315 316 property Component scrollview: Component 317 { 318 ScrollViewStyle 319 { 320 decrementControl: Item { } 321 incrementControl: Item { } 322 323 transientScrollBars: false 324 325 scrollBarBackground: Rectangle 326 { 327 implicitWidth: Theme.getSize("scrollbar").width 328 radius: Math.round(implicitWidth / 2) 329 color: Theme.getColor("scrollbar_background") 330 } 331 332 handle: Rectangle 333 { 334 id: scrollViewHandle 335 implicitWidth: Theme.getSize("scrollbar").width 336 radius: Math.round(implicitWidth / 2) 337 338 color: styleData.pressed ? Theme.getColor("scrollbar_handle_down") : styleData.hovered ? Theme.getColor("scrollbar_handle_hover") : Theme.getColor("scrollbar_handle") 339 Behavior on color { ColorAnimation { duration: 50; } } 340 } 341 } 342 } 343 344 property Component combobox: Component 345 { 346 ComboBoxStyle 347 { 348 349 background: Rectangle 350 { 351 implicitHeight: Theme.getSize("setting_control").height; 352 implicitWidth: Theme.getSize("setting_control").width; 353 354 color: control.hovered ? UM.Theme.getColor("setting_control_highlight") : UM.Theme.getColor("setting_control") 355 Behavior on color { ColorAnimation { duration: 50; } } 356 357 border.width: Theme.getSize("default_lining").width; 358 border.color: control.hovered ? Theme.getColor("setting_control_border_highlight") : Theme.getColor("setting_control_border"); 359 radius: UM.Theme.getSize("setting_control_radius").width 360 } 361 362 label: Item 363 { 364 Label 365 { 366 anchors.left: parent.left 367 anchors.leftMargin: Theme.getSize("default_lining").width 368 anchors.right: downArrow.left 369 anchors.rightMargin: Theme.getSize("default_lining").width 370 anchors.verticalCenter: parent.verticalCenter 371 372 text: control.currentText 373 font: Theme.getFont("default"); 374 color: !enabled ? Theme.getColor("setting_control_disabled_text") : Theme.getColor("setting_control_text") 375 376 elide: Text.ElideRight 377 verticalAlignment: Text.AlignVCenter 378 } 379 380 UM.RecolorImage 381 { 382 id: downArrow 383 anchors.right: parent.right 384 anchors.rightMargin: Theme.getSize("default_lining").width * 2 385 anchors.verticalCenter: parent.verticalCenter 386 387 source: Theme.getIcon("arrow_bottom") 388 width: Theme.getSize("standard_arrow").width 389 height: Theme.getSize("standard_arrow").height 390 sourceSize.width: width + 5 * screenScaleFactor 391 sourceSize.height: width + 5 * screenScaleFactor 392 393 color: Theme.getColor("setting_control_button"); 394 } 395 } 396 } 397 } 398 399 property Component checkbox: Component 400 { 401 CheckBoxStyle 402 { 403 background: Item { } 404 indicator: Rectangle 405 { 406 implicitWidth: Theme.getSize("checkbox").width 407 implicitHeight: Theme.getSize("checkbox").height 408 409 color: (control.hovered || control._hovered) ? Theme.getColor("checkbox_hover") : (control.enabled ? Theme.getColor("checkbox") : Theme.getColor("checkbox_disabled")) 410 Behavior on color { ColorAnimation { duration: 50; } } 411 412 radius: control.exclusiveGroup ? Math.round(Theme.getSize("checkbox").width / 2) : Theme.getSize("checkbox_radius").width 413 414 border.width: Theme.getSize("default_lining").width 415 border.color: (control.hovered || control._hovered) ? Theme.getColor("checkbox_border_hover") : Theme.getColor("checkbox_border") 416 417 UM.RecolorImage 418 { 419 anchors.verticalCenter: parent.verticalCenter 420 anchors.horizontalCenter: parent.horizontalCenter 421 width: Math.round(parent.width / 2.5) 422 height: Math.round(parent.height / 2.5) 423 sourceSize.height: width 424 color: Theme.getColor("checkbox_mark") 425 source: control.exclusiveGroup ? Theme.getIcon("dot") : Theme.getIcon("check") 426 opacity: control.checked 427 Behavior on opacity { NumberAnimation { duration: 100; } } 428 } 429 } 430 label: Label 431 { 432 text: control.text 433 color: Theme.getColor("checkbox_text") 434 font: Theme.getFont("default") 435 elide: Text.ElideRight 436 renderType: Text.NativeRendering 437 } 438 } 439 } 440 441 property Component partially_checkbox: Component 442 { 443 CheckBoxStyle 444 { 445 background: Item { } 446 indicator: Rectangle 447 { 448 implicitWidth: Theme.getSize("checkbox").width 449 implicitHeight: Theme.getSize("checkbox").height 450 451 color: (control.hovered || control._hovered) ? Theme.getColor("checkbox_hover") : Theme.getColor("checkbox"); 452 Behavior on color { ColorAnimation { duration: 50; } } 453 454 radius: control.exclusiveGroup ? Math.round(Theme.getSize("checkbox").width / 2) : UM.Theme.getSize("checkbox_radius").width 455 456 border.width: Theme.getSize("default_lining").width; 457 border.color: (control.hovered || control._hovered) ? Theme.getColor("checkbox_border_hover") : Theme.getColor("checkbox_border"); 458 459 UM.RecolorImage 460 { 461 anchors.verticalCenter: parent.verticalCenter 462 anchors.horizontalCenter: parent.horizontalCenter 463 width: Math.round(parent.width / 2.5) 464 height: Math.round(parent.height / 2.5) 465 sourceSize.height: width 466 color: Theme.getColor("checkbox_mark") 467 source: 468 { 469 if (control.checkbox_state == 2) 470 { 471 return Theme.getIcon("solid"); 472 } 473 else 474 { 475 return control.exclusiveGroup ? Theme.getIcon("dot") : Theme.getIcon("check"); 476 } 477 } 478 opacity: control.checked 479 Behavior on opacity { NumberAnimation { duration: 100; } } 480 } 481 } 482 label: Label 483 { 484 text: control.text 485 color: Theme.getColor("checkbox_text") 486 font: Theme.getFont("default") 487 } 488 } 489 } 490 491 property Component text_field: Component 492 { 493 TextFieldStyle 494 { 495 textColor: Theme.getColor("setting_control_text") 496 placeholderTextColor: Theme.getColor("setting_control_text") 497 font: Theme.getFont("default") 498 499 background: Rectangle 500 { 501 implicitHeight: control.height; 502 implicitWidth: control.width; 503 504 border.width: Theme.getSize("default_lining").width; 505 border.color: control.hovered ? Theme.getColor("setting_control_border_highlight") : Theme.getColor("setting_control_border"); 506 radius: UM.Theme.getSize("setting_control_radius").width 507 508 color: Theme.getColor("setting_validation_ok"); 509 510 Label 511 { 512 anchors.right: parent.right; 513 anchors.rightMargin: Theme.getSize("setting_unit_margin").width; 514 anchors.verticalCenter: parent.verticalCenter; 515 516 text: control.unit ? control.unit : "" 517 color: Theme.getColor("setting_unit"); 518 font: Theme.getFont("default"); 519 renderType: Text.NativeRendering 520 } 521 } 522 } 523 } 524 525 property Component print_setup_action_button: Component 526 { 527 ButtonStyle 528 { 529 background: Rectangle 530 { 531 border.width: UM.Theme.getSize("default_lining").width 532 border.color: 533 { 534 if(!control.enabled) 535 { 536 return UM.Theme.getColor("action_button_disabled_border"); 537 } 538 else if(control.pressed) 539 { 540 return UM.Theme.getColor("action_button_active_border"); 541 } 542 else if(control.hovered) 543 { 544 return UM.Theme.getColor("action_button_hovered_border"); 545 } 546 else 547 { 548 return UM.Theme.getColor("action_button_border"); 549 } 550 } 551 color: 552 { 553 if(!control.enabled) 554 { 555 return UM.Theme.getColor("action_button_disabled"); 556 } 557 else if(control.pressed) 558 { 559 return UM.Theme.getColor("action_button_active"); 560 } 561 else if(control.hovered) 562 { 563 return UM.Theme.getColor("action_button_hovered"); 564 } 565 else 566 { 567 return UM.Theme.getColor("action_button"); 568 } 569 } 570 Behavior on color { ColorAnimation { duration: 50 } } 571 572 implicitWidth: actualLabel.contentWidth + (UM.Theme.getSize("thick_margin").width * 2) 573 574 Label 575 { 576 id: actualLabel 577 anchors.centerIn: parent 578 color: 579 { 580 if(!control.enabled) 581 { 582 return UM.Theme.getColor("action_button_disabled_text"); 583 } 584 else if(control.pressed) 585 { 586 return UM.Theme.getColor("action_button_active_text"); 587 } 588 else if(control.hovered) 589 { 590 return UM.Theme.getColor("action_button_hovered_text"); 591 } 592 else 593 { 594 return UM.Theme.getColor("action_button_text"); 595 } 596 } 597 font: UM.Theme.getFont("medium") 598 text: control.text 599 } 600 } 601 label: Item { } 602 } 603 } 604 605 property Component toolbox_action_button: Component 606 { 607 ButtonStyle 608 { 609 background: Rectangle 610 { 611 implicitWidth: UM.Theme.getSize("toolbox_action_button").width 612 implicitHeight: UM.Theme.getSize("toolbox_action_button").height 613 color: 614 { 615 if (control.installed) 616 { 617 return UM.Theme.getColor("action_button_disabled"); 618 } 619 else 620 { 621 if (control.hovered) 622 { 623 return UM.Theme.getColor("primary_hover"); 624 } 625 else 626 { 627 return UM.Theme.getColor("primary"); 628 } 629 } 630 631 } 632 } 633 label: Label 634 { 635 text: control.text 636 color: 637 { 638 if (control.installed) 639 { 640 return UM.Theme.getColor("action_button_disabled_text"); 641 } 642 else 643 { 644 if (control.hovered) 645 { 646 return UM.Theme.getColor("button_text_hover"); 647 } 648 else 649 { 650 return UM.Theme.getColor("button_text"); 651 } 652 } 653 } 654 verticalAlignment: Text.AlignVCenter 655 horizontalAlignment: Text.AlignHCenter 656 font: UM.Theme.getFont("default_bold") 657 } 658 } 659 } 660 661 property Component monitor_button_style: Component 662 { 663 ButtonStyle 664 { 665 background: Rectangle 666 { 667 border.width: UM.Theme.getSize("default_lining").width 668 border.color: 669 { 670 if(!control.enabled) 671 { 672 return UM.Theme.getColor("action_button_disabled_border"); 673 } 674 else if(control.pressed) 675 { 676 return UM.Theme.getColor("action_button_active_border"); 677 } 678 else if(control.hovered) 679 { 680 return UM.Theme.getColor("action_button_hovered_border"); 681 } 682 return UM.Theme.getColor("action_button_border"); 683 } 684 color: 685 { 686 if(!control.enabled) 687 { 688 return UM.Theme.getColor("action_button_disabled"); 689 } 690 else if(control.pressed) 691 { 692 return UM.Theme.getColor("action_button_active"); 693 } 694 else if(control.hovered) 695 { 696 return UM.Theme.getColor("action_button_hovered"); 697 } 698 return UM.Theme.getColor("action_button"); 699 } 700 Behavior on color 701 { 702 ColorAnimation 703 { 704 duration: 50 705 } 706 } 707 } 708 709 label: Item 710 { 711 UM.RecolorImage 712 { 713 anchors.verticalCenter: parent.verticalCenter 714 anchors.horizontalCenter: parent.horizontalCenter 715 width: Math.floor(control.width / 2) 716 height: Math.floor(control.height / 2) 717 sourceSize.height: width 718 color: 719 { 720 if(!control.enabled) 721 { 722 return UM.Theme.getColor("action_button_disabled_text"); 723 } 724 else if(control.pressed) 725 { 726 return UM.Theme.getColor("action_button_active_text"); 727 } 728 else if(control.hovered) 729 { 730 return UM.Theme.getColor("action_button_hovered_text"); 731 } 732 return UM.Theme.getColor("action_button_text"); 733 } 734 source: control.iconSource 735 } 736 } 737 } 738 } 739 740 property Component monitor_checkable_button_style: Component 741 { 742 ButtonStyle { 743 background: Rectangle { 744 border.width: control.checked ? UM.Theme.getSize("default_lining").width * 2 : UM.Theme.getSize("default_lining").width 745 border.color: 746 { 747 if(!control.enabled) 748 { 749 return UM.Theme.getColor("action_button_disabled_border"); 750 } 751 else if (control.checked || control.pressed) 752 { 753 return UM.Theme.getColor("action_button_active_border"); 754 } 755 else if(control.hovered) 756 { 757 return UM.Theme.getColor("action_button_hovered_border"); 758 } 759 return UM.Theme.getColor("action_button_border"); 760 } 761 color: 762 { 763 if(!control.enabled) 764 { 765 return UM.Theme.getColor("action_button_disabled"); 766 } 767 else if (control.checked || control.pressed) 768 { 769 return UM.Theme.getColor("action_button_active"); 770 } 771 else if (control.hovered) 772 { 773 return UM.Theme.getColor("action_button_hovered"); 774 } 775 return UM.Theme.getColor("action_button"); 776 } 777 Behavior on color { ColorAnimation { duration: 50; } } 778 Label { 779 anchors.left: parent.left 780 anchors.right: parent.right 781 anchors.verticalCenter: parent.verticalCenter 782 anchors.leftMargin: UM.Theme.getSize("default_lining").width * 2 783 anchors.rightMargin: UM.Theme.getSize("default_lining").width * 2 784 color: 785 { 786 if(!control.enabled) 787 { 788 return UM.Theme.getColor("action_button_disabled_text"); 789 } 790 else if (control.checked || control.pressed) 791 { 792 return UM.Theme.getColor("action_button_active_text"); 793 } 794 else if (control.hovered) 795 { 796 return UM.Theme.getColor("action_button_hovered_text"); 797 } 798 return UM.Theme.getColor("action_button_text"); 799 } 800 font: UM.Theme.getFont("default") 801 text: control.text 802 horizontalAlignment: Text.AlignHCenter 803 elide: Text.ElideMiddle 804 } 805 } 806 label: Item { } 807 } 808 } 809} 810