← Back to branch summary

~tpeeters/ubuntu-ui-toolkit/tabBar-selectionMode-fix

« back to all changes in this revision

Viewing changes to modules/Ubuntu/Components/Themes/Ambiance/TabBarStyle.qml

  • Committer: Zsombor Egri
  • Date: 2013-11-12 06:41:24 UTC
  • Revision ID: zsombor.egri@canonical.com-20131112064124-7t3m2lnwv4tgxnyi
implementation

Show diffs side-by-side

added added

removed removed

Lines of Context:
modules/Ubuntu/Components/Themes/Ambiance/TabBarStyle.qml
19
19
 
20
20
Item {
21
21
    id: tabBarStyle
22
 
    // styling properties
 
22
    // styling properties, public API
23
23
    property color headerTextColor: Theme.palette.normal.backgroundText
24
24
    property color headerTextSelectedColor: Theme.palette.selected.backgroundText
25
25
 
27
27
    property url indicatorImageSource: "artwork/chevron.png"
28
28
 
29
29
    property string headerFontSize: "x-large"
 
30
    property int headerTextStyle: Text.Normal
 
31
    property color headerTextStyleColor: Theme.palette.normal.backgroundText
30
32
    property int headerFontWeight: Font.Light
31
33
    property real headerTextLeftMargin: units.gu(2)
32
34
    property real headerTextRightMargin: units.gu(2)
33
35
    property real headerTextBottomMargin: units.gu(2)
34
36
 
35
37
    property real buttonPositioningVelocity: styledItem.animate ? 1.0 : -1
36
 
 
37
38
    // The time of inactivity before leaving selection mode automatically
38
39
    property int deactivateTime: 5000
39
40
 
40
 
    /*!
41
 
      The set of tabs this tab bar belongs to
42
 
     */
43
 
    property Tabs tabs: styledItem ? styledItem.tabsItem : null
 
41
    function sync() {
 
42
        buttonView.selectButton(styledItem.selectedIndex);
 
43
    }
 
44
 
44
45
    property ListModel tabsModel : styledItem ? styledItem.model : null
45
46
 
46
47
    Connections {
50
51
            if (styledItem.selectionMode) {
51
52
                activatingTimer.restart();
52
53
            } else {
53
 
                buttonView.selectButton(tabs.selectedTabIndex);
 
54
                buttonView.selectButton(styledItem.selectedIndex);
54
55
            }
55
56
        }
56
57
    }
65
66
    }
66
67
 
67
68
    Connections {
68
 
        target: tabs
69
 
        onSelectedTabIndexChanged: buttonView.selectButton(tabs.selectedTabIndex)
70
 
        onModelChanged: buttonView.selectButton(tabs.selectedTabIndex)
 
69
        target: styledItem
 
70
        onSelectedIndexChanged: buttonView.selectButton(styledItem.selectedIndex)
71
71
    }
72
72
 
73
73
    Component {
105
105
                    // the tab index as selected, but when it is not in selection mode only one
106
106
                    // to avoid seeing fading animations of the unselected button when switching
107
107
                    // tabs from outside the tab bar.
108
 
                    property bool selected: (styledItem.selectionMode && buttonView.needsScrolling) ? tabs.selectedTabIndex === index : buttonView.selectedButtonIndex === button.buttonIndex
 
108
                    property bool selected: (styledItem.selectionMode && buttonView.needsScrolling) ?
 
109
                                                styledItem.selectedIndex === index :
 
110
                                                buttonView.selectedButtonIndex === button.buttonIndex
109
111
                    property real offset: theRow.rowNumber + 1 - button.x / theRow.width;
110
112
                    onOffsetChanged: {
111
113
                        if (selected) {
152
154
                        // The indicator image must be visible after the selected tab button, when the
153
155
                        // tab bar is not in selection mode, or after the "last" button (starting with
154
156
                        // the selected one), when the tab bar is in selection mode.
155
 
                        property bool isLastAfterSelected: index === (tabs.selectedTabIndex === 0 ? repeater.count-1 : tabs.selectedTabIndex - 1)
 
157
                        property bool isLastAfterSelected: index === (styledItem.selectedIndex === 0 ?
 
158
                                                                          repeater.count-1 :
 
159
                                                                          styledItem.selectedIndex - 1)
156
160
                        opacity: (styledItem.selectionMode ? isLastAfterSelected : selected) ? 1 : 0
157
161
                        Behavior on opacity {
158
162
                            NumberAnimation {
180
184
                            baseline: parent.bottom
181
185
                            baselineOffset: -headerTextBottomMargin
182
186
                        }
183
 
                        text: (tab && tab.hasOwnProperty("title")) ? tab.title : title
 
187
                        text: (model.hasOwnProperty("tab") && tab.hasOwnProperty("title")) ? tab.title : title
184
188
                        fontSize: headerFontSize
185
189
                        font.weight: headerFontWeight
 
190
                        style: headerTextStyle
 
191
                        styleColor: headerTextStyleColor
186
192
                    }
187
193
 
188
194
                    onClicked: {
189
195
                        if (!activatingTimer.running) {
190
 
                            tabs.selectedTabIndex = index;
 
196
                            styledItem.selectedIndex = index;
191
197
                            if (!styledItem.alwaysSelectionMode) {
192
198
                                styledItem.selectionMode = false;
193
199
                            }
215
221
 
216
222
    PathView {
217
223
        id: buttonView
218
 
        anchors {
219
 
            left: parent.left
220
 
            top: parent.top
221
 
            bottom: parent.bottom
222
 
        }
 
224
        anchors.fill: parent
223
225
 
224
226
        // set to the width of one tabButtonRow in Component.onCompleted.
225
227
        property real buttonRowWidth: buttonRow1 ? buttonRow1.width : 0
255
257
 
256
258
        // Select the closest of the two buttons that represent the given tab index
257
259
        function selectButton(tabIndex) {
258
 
            if (tabIndex < 0 || tabIndex >= tabsModel.count) return;
 
260
            if (!tabsModel || (tabsModel && (tabIndex < 0 || tabIndex >= tabsModel.count))) return;
259
261
            if (buttonView.buttonRow1 && buttonView.buttonRow2) {
260
262
                var b1 = buttonView.buttonRow1.children[tabIndex];
261
263
                var b2 = buttonView.buttonRow2.children[tabIndex];
285
287
        }
286
288
 
287
289
        Component.onCompleted: {
288
 
            selectButton(tabs.selectedTabIndex);
 
290
            selectButton(styledItem.selectedIndex);
289
291
        }
290
292
 
291
293
        onDragEnded: activatingTimer.stop()