← Back to branch summary

~tintou/appcenter/reduce-complexity

« back to all changes in this revision

Viewing changes to src/Widgets/CategoryItem.vala

  • Committer: RabbitBot
  • Author(s): Daniel Foré, Corentin Noël
  • Date: 2016-05-05 01:49:06 UTC
  • mfrom: (174.1.9 category-cards)
  • Revision ID: rabbitbot-20160505014906-fgdqxod2c6dqhq17
Make categories into stylized cards

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/Widgets/CategoryItem.vala
1
1
// -*- Mode: vala; indent-tabs-mode: nil; tab-width: 4 -*-
2
2
/*-
3
 
 * Copyright (c) 2014-2015 elementary LLC. (https://elementary.io)
 
3
 * Copyright (c) 2014-2016 elementary LLC. (https://elementary.io)
4
4
 *
5
5
 * This program is free software: you can redistribute it and/or modify
6
6
 * it under the terms of the GNU General Public License as published by
18
18
 * Authored by: Corentin Noël <corentin@elementary.io>
19
19
 */
20
20
 
 
21
const string CATEGORIES_STYLE_CSS = """
 
22
    .category {
 
23
        background-image: linear-gradient(to bottom,
 
24
                                  #fafafa,
 
25
                                  #f2f2f2
 
26
                                  );
 
27
        background-position: center center;
 
28
        background-repeat: no-repeat;
 
29
        border: 1px solid alpha (#000, 0.15);
 
30
        border-radius: 3px;
 
31
 
 
32
        box-shadow: inset 0 0 0 1px alpha (#fff, 0.05),
 
33
                    inset 0 1px 0 0 alpha (#fff, 0.45),
 
34
                    inset 0 -1px 0 0 alpha (#fff, 0.15),
 
35
                    0 3px 2px -1px alpha (#000, 0.15),
 
36
                    0 3px 5px alpha (#000, 0.10);
 
37
        color: #4d4d4d;
 
38
        font-size: 32px;
 
39
        font-weight: 300;
 
40
    }
 
41
    .category.audio {
 
42
        background-image: -gtk-scaled(url("resource:///org/pantheon/appcenter/backgrounds/audio.svg"), url("resource:///org/pantheon/appcenter/backgrounds/audio@2x.svg")),
 
43
                          linear-gradient(to bottom,
 
44
                                  #FC8F36,
 
45
                                  #EF6522
 
46
                                  );
 
47
        border-color: alpha (#a25812, 0.8);
 
48
        color: #fff8ef;
 
49
        icon-shadow: 0 1px 1px alpha (#6c1900, 0.5),
 
50
                     0 2px 3px alpha (#6c1900, 0.5);
 
51
        text-shadow: 0 1px 1px alpha (#6c1900, 0.5),
 
52
                     0 2px 3px alpha (#6c1900, 0.5);
 
53
    }
 
54
    .category.development {
 
55
        background-image: linear-gradient(to bottom,
 
56
                                  #816fa9,
 
57
                                  #6a5c8e
 
58
                                  );
 
59
        border-color: alpha (#352d48, 0.8);
 
60
        font-family: lobster;
 
61
        text-shadow: 0 2px 0 alpha (#000, 0.3);
 
62
        color: #fff;
 
63
    }
 
64
    .category.accessories {
 
65
        border:none;
 
66
        box-shadow: inset 0 0 0 1px alpha (#fff, 0.10),
 
67
                    inset 0 1px 0 0 alpha (#fff, 0.90),
 
68
                    inset 0 -1px 0 0 alpha (#fff, 0.30),
 
69
                    0 0 0 1px alpha (#000, 0.15),
 
70
                    0 3px 2px -1px alpha (#000, 0.15),
 
71
                    0 3px 5px alpha (#000, 0.10);
 
72
        font-size: 24px;
 
73
    }
 
74
    .category.office {
 
75
        border:none;
 
76
        box-shadow: inset 0 0 0 1px alpha (#fff, 0.10),
 
77
                    inset 0 1px 0 0 alpha (#fff, 0.90),
 
78
                    inset 0 -1px 0 0 alpha (#fff, 0.30),
 
79
                    0 0 0 1px alpha (#000, 0.15),
 
80
                    0 3px 2px -1px alpha (#000, 0.15),
 
81
                    0 3px 5px alpha (#000, 0.10);
 
82
        color: #ff750c;
 
83
    }
 
84
    .category.system {
 
85
        background-image: linear-gradient(to bottom,
 
86
                                  #69768f,
 
87
                                  #59687e
 
88
                                  );
 
89
        border-color: alpha (#454951, 0.8);
 
90
        box-shadow: inset 0 0 0 1px alpha (#fff, 0.05),
 
91
                    inset 0 1px 0 0 alpha (#fff, 0.25),
 
92
                    inset 0 -1px 0 0 alpha (#fff, 0.10),
 
93
                    0 3px 2px -1px alpha (#000, 0.15),
 
94
                    0 3px 5px alpha (#000, 0.10);
 
95
        color: white;
 
96
        text-shadow: 0 1px 1px alpha (#000, 0.3),
 
97
                     0 2px 3px alpha (#000, 0.3);
 
98
    }
 
99
    .category.video {
 
100
        background-image: -gtk-gradient(radial, center center, 0.42, center center, 0.47, from(transparent), to(alpha(#000,0.3))),
 
101
                          linear-gradient(to bottom,
 
102
                                  #dd5248,
 
103
                                  #c92b31
 
104
                                  );
 
105
        background-size: auto 150%;
 
106
        border-color: alpha (#8c201d, 0.8);
 
107
        box-shadow: inset 0 0 0 1px alpha (#fff, 0.05),
 
108
                    inset 0 1px 0 0 alpha (#fff, 0.25),
 
109
                    inset 0 -1px 0 0 alpha (#fff, 0.10),
 
110
                    0 3px 2px -1px alpha (#000, 0.15),
 
111
                    0 3px 5px alpha (#000, 0.10);
 
112
        text-shadow: 0 1px 2px alpha (#000, 0.3);
 
113
        icon-shadow: 0 1px 2px alpha (#000, 0.3);
 
114
        color: #fff;
 
115
    }
 
116
    .category.graphics {
 
117
        border:none;
 
118
        box-shadow: inset 0 0 0 1px alpha (#fff, 0.10),
 
119
                    inset 0 1px 0 0 alpha (#fff, 0.90),
 
120
                    inset 0 -1px 0 0 alpha (#fff, 0.30),
 
121
                    0 0 0 1px alpha (#000, 0.15),
 
122
                    0 3px 2px -1px alpha (#000, 0.15),
 
123
                    0 3px 5px alpha (#000, 0.10);
 
124
        color: #fe5498;
 
125
    }
 
126
    .category.graphics .label {
 
127
        border-image: -gtk-scaled(url("resource:///org/pantheon/appcenter/backgrounds/graphics.svg"),url("resource:///org/pantheon/appcenter/backgrounds/graphics@2x.svg")) 10 10 10 10 / 10px 10px 10px 10px repeat;
 
128
        padding: 12px;
 
129
    }
 
130
    .category.graphics .label:dir(rtl) {
 
131
        border-image: -gtk-scaled(url("resource:///org/pantheon/appcenter/backgrounds/graphics-rtl.svg"),url("resource:///org/pantheon/appcenter/backgrounds/graphics-rtl@2x.svg")) 10 10 10 10 / 10px 10px 10px 10px repeat;
 
132
    }
 
133
    .category.games {
 
134
        background-image: linear-gradient(to bottom,
 
135
                                  #374044,
 
136
                                  #374044
 
137
                                  );
 
138
        border-color: alpha (#1B2022, 0.8);
 
139
        box-shadow: inset 0 0 0 1px alpha (#fff, 0.02),
 
140
                    inset 0 1px 0 0 alpha (#fff, 0.23),
 
141
                    inset 0 -1px 0 0 alpha (#fff, 0.07),
 
142
                    0 3px 2px -1px alpha (#000, 0.15),
 
143
                    0 3px 5px alpha (#000, 0.10);
 
144
        text-shadow: 0 1px 2px alpha (#000, 0.3);
 
145
        icon-shadow: 0 1px 2px alpha (#000, 0.3);
 
146
        color: #fff;
 
147
        font-size: 26px;
 
148
        font-weight: 700;
 
149
    }
 
150
    .category.education {
 
151
        background-image: linear-gradient(to bottom,
 
152
                                  #2F674D,
 
153
                                  #305A46
 
154
                                  );
 
155
        border-color: alpha (#213D30, 0.8);
 
156
        box-shadow: inset 0 0 0 1px alpha (#fff, 0.05),
 
157
                    inset 0 1px 0 0 alpha (#fff, 0.25),
 
158
                    inset 0 -1px 0 0 alpha (#fff, 0.10),
 
159
                    0 3px 2px -1px alpha (#000, 0.15),
 
160
                    0 3px 5px alpha (#000, 0.10);
 
161
        text-shadow: 0 1px 2px alpha (#000, 0.3);
 
162
        icon-shadow: 0 1px 2px alpha (#000, 0.3);
 
163
        font-family: Operating Instructions;
 
164
        font-size: 40px;
 
165
        color: #fff;
 
166
    }
 
167
    .category.internet {
 
168
        background-image: linear-gradient(to bottom,
 
169
                                  #48BCEA,
 
170
                                  #3DA4E8
 
171
                                  );
 
172
        border-color: alpha (#2980D1, 0.8);
 
173
        box-shadow: inset 0 0 0 1px alpha (#fff, 0.05),
 
174
                    inset 0 1px 0 0 alpha (#fff, 0.25),
 
175
                    inset 0 -1px 0 0 alpha (#fff, 0.10),
 
176
                    0 3px 2px -1px alpha (#000, 0.15),
 
177
                    0 3px 5px alpha (#000, 0.10);
 
178
        text-shadow: 0 1px 1px alpha (#000, 0.3),
 
179
                     0 2px 3px alpha (#000, 0.3);
 
180
        color: #fff;
 
181
    }
 
182
    .category.science {
 
183
        background-image: url("resource:///org/pantheon/appcenter/backgrounds/science.svg"),
 
184
                          linear-gradient(to bottom,
 
185
                                  #374044,
 
186
                                  #374044
 
187
                                  );
 
188
        border-color: alpha (#1B2022, 0.8);
 
189
        box-shadow: inset 0 0 0 1px alpha (#fff, 0.02),
 
190
                    inset 0 1px 0 0 alpha (#fff, 0.23),
 
191
                    inset 0 -1px 0 0 alpha (#fff, 0.07),
 
192
                    0 3px 2px -1px alpha (#000, 0.15),
 
193
                    0 3px 5px alpha (#000, 0.10);
 
194
        text-shadow: 0 1px 2px alpha (#000, 0.3);
 
195
        icon-shadow: 0 1px 2px alpha (#000, 0.3);
 
196
        font-family: Limelight;
 
197
        font-size: 24px;
 
198
        color: #fff;
 
199
    }
 
200
    .category.accessibility {
 
201
        background-image: linear-gradient(to bottom,
 
202
                                  #3CA3E8,
 
203
                                  #368AE6
 
204
                                  );
 
205
        border-color: alpha (#2980D1, 0.8);
 
206
        color: #fff8ef;
 
207
        font-size: 24px;
 
208
        font-weight: 600;
 
209
        icon-shadow: 0 1px 0 alpha (#000, 0.3);
 
210
        text-shadow: 0 1px 0 alpha (#000, 0.3);
 
211
    }
 
212
""";
 
213
 
21
214
public class AppCenter.Widgets.CategoryItem : Gtk.FlowBoxChild {
22
215
    public AppStream.Category app_category;
23
216
    private Gtk.Grid grid;
24
217
    private Gtk.Image display_image;
25
218
    private Gtk.Label name_label;
26
 
    private Gtk.Label desc_label;
 
219
    private Gtk.Grid themed_grid;
27
220
 
28
221
    public CategoryItem (AppStream.Category app_category) {
29
222
        this.app_category = app_category;
30
 
        name_label.label = GLib.Markup.escape_text (app_category.name ?? "");
31
 
        desc_label.label = GLib.Markup.escape_text (app_category.summary ?? "");
32
 
        display_image.icon_name = app_category.icon;
 
223
        name_label.label = app_category.name;
 
224
        tooltip_text = app_category.summary ?? "";
 
225
        if (app_category.icon != null) {
 
226
            display_image.icon_name = app_category.icon;
 
227
            ((Gtk.Misc) name_label).xalign = 0;
 
228
            name_label.halign = Gtk.Align.START;
 
229
        } else {
 
230
            display_image.destroy ();
 
231
            name_label.justify = Gtk.Justification.CENTER;
 
232
        }
 
233
 
33
234
        show_all ();
34
235
    }
35
236
 
 
237
    static construct {
 
238
        var provider = new Gtk.CssProvider ();
 
239
        try {
 
240
            provider.load_from_data (CATEGORIES_STYLE_CSS, CATEGORIES_STYLE_CSS.length);
 
241
            Gtk.StyleContext.add_provider_for_screen (Gdk.Screen.get_default (), provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
 
242
        } catch (Error e) {
 
243
            critical (e.message);
 
244
        }
 
245
    }
 
246
 
36
247
    construct {
37
 
        get_style_context ().add_class (Gtk.STYLE_CLASS_FLAT);
38
 
 
39
248
        grid = new Gtk.Grid ();
40
 
        grid.margin = 6;
41
 
        grid.column_spacing = 12;
 
249
        grid.orientation = Gtk.Orientation.HORIZONTAL;
 
250
        grid.column_spacing = 6;
 
251
        grid.halign = Gtk.Align.CENTER;
42
252
        grid.valign = Gtk.Align.CENTER;
 
253
        grid.margin_top = 32;
 
254
        grid.margin_end = 16;
 
255
        grid.margin_bottom = 32;
 
256
        grid.margin_start = 16;
43
257
 
44
258
        display_image = new Gtk.Image ();
45
259
        display_image.icon_size = Gtk.IconSize.DIALOG;
46
 
        grid.attach (display_image, 0, 0, 1, 2);
 
260
        display_image.valign = Gtk.Align.CENTER;
 
261
        display_image.halign = Gtk.Align.END;
 
262
        grid.add (display_image);
47
263
 
48
264
        name_label = new Gtk.Label (null);
49
 
        name_label.get_style_context ().add_class ("h3");
50
 
        name_label.use_markup = true;
51
 
        ((Gtk.Misc) name_label).xalign = 0;
52
 
        name_label.hexpand = true;
53
 
        grid.attach (name_label, 1, 0, 1, 1);
54
 
 
55
 
        desc_label = new Gtk.Label (null);
56
 
        ((Gtk.Misc) desc_label).xalign = 0;
57
 
        desc_label.wrap = true;
58
 
        desc_label.hexpand = true;
59
 
        grid.attach (desc_label, 1, 1, 1, 1);
60
 
 
61
 
        child = grid;
 
265
        name_label.wrap = true;
 
266
        grid.add (name_label);
 
267
 
 
268
        var expanded_grid = new Gtk.Grid ();
 
269
        expanded_grid.expand = true;
 
270
        expanded_grid.margin = 12;
 
271
 
 
272
        themed_grid = new Gtk.Grid ();
 
273
        themed_grid.get_style_context ().add_class ("category");
 
274
        themed_grid.attach (grid, 0, 0, 1, 1);
 
275
        themed_grid.attach (expanded_grid, 0, 0, 1, 1);
 
276
        themed_grid.margin = 12;
 
277
 
 
278
        child = themed_grid;
 
279
    }
 
280
 
 
281
    public void add_category_class (string theme_name) {
 
282
        themed_grid.get_style_context ().add_class (theme_name);
62
283
    }
63
284
}