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