snapweb

Merge lp:~stephen-stewart/snapweb/post-css-bem-lint into lp:~snappy-dev/snapweb/trunk

  1. post-css-bem-lint
  2. Merge into trunk
Proposed by Stephen Stewart on 2015-05-08
Status: Merged
Approved by: John Lenton on 2015-05-14
Approved revision: 144
Merged at revision: 141
Proposed branch: lp:~stephen-stewart/snapweb/post-css-bem-lint
Merge into: lp:~snappy-dev/snapweb/trunk
Diff against target: 460 lines (+74/-49)
15 files modified
gulpfile.js (+14/-3)
package.json (+3/-1)
www/src/css/alert.css (+2/-0)
www/src/css/banner.css (+4/-3)
www/src/css/installer.css (+7/-5)
www/src/css/layout.css (+2/-0)
www/src/css/snap.css (+3/-1)
www/src/css/snaplist.css (+20/-18)
www/src/js/models/snap.js (+5/-4)
www/src/js/templates/_installer.hbs (+2/-2)
www/src/js/templates/layout-banner.hbs (+4/-4)
www/src/js/views/layout-banner.js (+1/-1)
www/src/js/views/snap-menu.js (+1/-1)
www/src/js/views/snaplist.js (+2/-2)
www/tests/snapLayoutViewSpec.js (+4/-4)
To merge this branch: bzr merge lp:~stephen-stewart/snapweb/post-css-bem-lint
Reviewer Review Type Date Requested Status
John Lenton 2015-05-08 Approve on 2015-05-14
Review via email: mp+258696@code.launchpad.net

Commit Message

postcss bem linter

To post a comment you must log in.
lp:~stephen-stewart/snapweb/post-css-bem-lint updated on 2015-05-12
144. By Stephen Stewart on 2015-05-12

update class names in tests

John Lenton (chipaca) :
review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
1=== modified file 'gulpfile.js'
2--- gulpfile.js 2015-05-07 10:34:34 +0000
3+++ gulpfile.js 2015-05-12 11:34:29 +0000
4@@ -1,5 +1,7 @@
5 var aliasify = require('aliasify');
6-var autoprefixer = require('gulp-autoprefixer');
7+var postcss = require('gulp-postcss');
8+var autoprefixer = require('autoprefixer-core');
9+var bemlinter = require('postcss-bem-linter');
10 var browserify = require('browserify');
11 var buffer = require('vinyl-buffer');
12 var concat = require('gulp-concat');
13@@ -71,10 +73,19 @@
14 // Styles
15
16 gulp.task('styles', ['styles:clean'], function() {
17- return gulp.src(['node_modules/normalize.css/normalize.css', 'www/src/css/**/*.css'])
18+ var processors = [
19+ autoprefixer({browsers: ['last 1 version']}),
20+ bemlinter('bem')
21+ ];
22+ return gulp.src([
23+ 'node_modules/normalize.css/normalize.css',
24+ 'www/src/css/**/*.css'
25+ ])
26+ .pipe(sourcemaps.init())
27+ .pipe(postcss(processors))
28 .pipe(csso())
29- .pipe(autoprefixer())
30 .pipe(concat('webdm.css'))
31+ .pipe(sourcemaps.write('./'))
32 .pipe(gulp.dest('www/public/css'));
33 });
34
35
36=== modified file 'package.json'
37--- package.json 2015-05-07 09:10:27 +0000
38+++ package.json 2015-05-12 11:34:29 +0000
39@@ -7,18 +7,19 @@
40 },
41 "dependencies": {
42 "aliasify": "~1.7.2",
43+ "autoprefixer-core": "^5.1.11",
44 "backbone": "~1.1.2",
45 "backbone.marionette": "~2.4.1",
46 "backbone.radio": "^0.9.0",
47 "browserify": "~9.0.3",
48 "del": "~1.1.1",
49 "gulp": "~3.8.11",
50- "gulp-autoprefixer": "~2.1.0",
51 "gulp-concat": "~2.5.2",
52 "gulp-csso": "~1.0.0",
53 "gulp-imagemin": "~2.2.1",
54 "gulp-jscs": "~1.4.0",
55 "gulp-jshint": "~1.9.4",
56+ "gulp-postcss": "^5.1.6",
57 "gulp-sourcemaps": "~1.5.0",
58 "gulp-uglify": "~1.1.0",
59 "gulp-util": "~3.0.4",
60@@ -35,6 +36,7 @@
61 "karma-phantomjs-launcher": "~0.1.4",
62 "lodash": "~3.3.1",
63 "normalize.css": "^3.0.3",
64+ "postcss-bem-linter": "git://github.com/necolas/postcss-bem-linter",
65 "vinyl-buffer": "~1.0.0",
66 "vinyl-source-stream": "~1.1.0",
67 "watchify": "~3.1.2"
68
69=== modified file 'www/src/css/alert.css'
70--- www/src/css/alert.css 2015-05-07 15:38:47 +0000
71+++ www/src/css/alert.css 2015-05-12 11:34:29 +0000
72@@ -1,3 +1,5 @@
73+/** @define b-alert; weak */
74+
75 .b-alert {
76 position: relative;
77 width: 600px;
78
79=== modified file 'www/src/css/banner.css'
80--- www/src/css/banner.css 2015-05-04 18:24:04 +0000
81+++ www/src/css/banner.css 2015-05-12 11:34:29 +0000
82@@ -1,3 +1,5 @@
83+/** @define b-banner; weak */
84+
85 .b-banner {
86 display:flex;
87 align-items:center;
88@@ -73,11 +75,11 @@
89 border-right:1px solid #333;
90 }
91
92-.b-banner__nav-item--active {
93+.b-banner__nav-item_active {
94 position:relative;
95 }
96
97-.b-banner__nav-item--active::before {
98+.b-banner__nav-item_active::before {
99 position:absolute;
100 content:'';
101 background:#dd4814;
102@@ -117,4 +119,3 @@
103 .b-banner__secondary-nav .b-banner__nav-item:hover {
104 background-color:#dd4814;
105 }
106-
107
108=== modified file 'www/src/css/installer.css'
109--- www/src/css/installer.css 2015-05-08 13:11:16 +0000
110+++ www/src/css/installer.css 2015-05-12 11:34:29 +0000
111@@ -1,10 +1,12 @@
112+/** @define b-installer; weak */
113+
114 .b-installer {
115 position:relative;
116 width:260px;
117 font-size:15px;
118 }
119
120-.b-installer.b-installer--small {
121+.b-installer_small {
122 font-size:13px;
123 width:160px;
124 }
125@@ -26,13 +28,13 @@
126 white-space: nowrap;
127 }
128
129-.b-installer--uninstall .b-installer__button {
130+.b-installer_do_uninstall .b-installer__button {
131 background-color:#ccc;
132 color:#fff;
133 font-weight:300;
134 }
135
136-.b-installer--disabled .b-installer__button {
137+.b-installer_disabled .b-installer__button {
138 font-weight: inherit;
139 background-color: inherit;
140 color:#333;
141@@ -40,7 +42,7 @@
142 text-transform:none;
143 }
144
145-.b-installer--thinking .b-installer__button {
146+.b-installer_thinking .b-installer__button {
147 background-color:transparent;
148 cursor:progress;
149 color:#dd4814;
150@@ -76,6 +78,6 @@
151 transition: right 0.1s;
152 }
153
154-.b-installer--thinking.b-installer--install .b-installer__progress {
155+.b-installer_thinking .b-installer__progress {
156 display:block;
157 }
158
159=== modified file 'www/src/css/layout.css'
160--- www/src/css/layout.css 2015-05-07 15:38:47 +0000
161+++ www/src/css/layout.css 2015-05-12 11:34:29 +0000
162@@ -1,3 +1,5 @@
163+/** @define b-layout; weak */
164+
165 .b-layout {
166 display: flex;
167 min-height: 100vh;
168
169=== modified file 'www/src/css/snap.css'
170--- www/src/css/snap.css 2015-05-05 15:16:24 +0000
171+++ www/src/css/snap.css 2015-05-12 11:34:29 +0000
172@@ -1,3 +1,5 @@
173+/** @define b-snap; weak */
174+
175 .b-snap {
176 }
177
178@@ -53,7 +55,7 @@
179 padding:15px 0;
180 }
181
182-.b-snap__nav-item--active::before {
183+.b-snap__nav-item_active::before {
184 position:absolute;
185 content:'';
186 background:#dd4814;
187
188=== modified file 'www/src/css/snaplist.css'
189--- www/src/css/snaplist.css 2015-05-08 13:11:16 +0000
190+++ www/src/css/snaplist.css 2015-05-12 11:34:29 +0000
191@@ -1,3 +1,5 @@
192+/** @define b-snaplist; weak */
193+
194 .b-snaplist {
195 }
196
197@@ -7,38 +9,38 @@
198
199 /** grid style **/
200
201-.b-snaplist--grid {
202+.b-snaplist_grid {
203 display:flex;
204 flex-wrap: wrap;
205 }
206
207-.b-snaplist--grid .b-snaplist__item {
208+.b-snaplist_grid .b-snaplist__item {
209 flex: 0 1 20%;
210 padding:10px;
211 }
212
213-.b-snaplist--grid .b-snaplist__icon {
214+.b-snaplist_grid .b-snaplist__icon {
215 }
216
217-.b-snaplist--grid .b-snaplist__icon img {
218+.b-snaplist_grid .b-snaplist__icon img {
219 border-radius:15%;
220 width:100%;
221 }
222
223-.b-snaplist--grid .b-snaplist__name {
224+.b-snaplist_grid .b-snaplist__name {
225 text-align: center;
226 white-space: nowrap;
227 overflow: hidden;
228 text-overflow: ellipsis;
229 }
230
231-.b-snaplist--grid .b-snaplist__name ~ * {
232+.b-snaplist_grid .b-snaplist__name ~ * {
233 display:none;
234 }
235
236 /** row style **/
237
238-.b-snaplist--row .b-snaplist__item {
239+.b-snaplist_row .b-snaplist__item {
240 width:100%;
241 display:flex;
242 align-items:center;
243@@ -48,24 +50,24 @@
244 background-color:#fff;
245 }
246
247-.b-snaplist--row .b-snaplist__item:last-child {
248+.b-snaplist_row .b-snaplist__item:last-child {
249 margin-bottom:0;
250 }
251
252-.b-snaplist--row .b-snaplist__icon {
253+.b-snaplist_row .b-snaplist__icon {
254 flex:0 0 40px;
255 }
256
257-.b-snaplist--row .b-snaplist__icon img {
258+.b-snaplist_row .b-snaplist__icon img {
259 display:block;
260 width: 40px;
261 height: 40px;
262 }
263
264-.b-snaplist--row .b-snaplist__name,
265-.b-snaplist--row .b-snaplist__version,
266-.b-snaplist--row .b-snaplist__type,
267-.b-snaplist--row .b-snaplist__origin {
268+.b-snaplist_row .b-snaplist__name,
269+.b-snaplist_row .b-snaplist__version,
270+.b-snaplist_row .b-snaplist__type,
271+.b-snaplist_row .b-snaplist__origin {
272 flex:1 1;
273 margin:0 1em;
274 white-space: nowrap;
275@@ -74,18 +76,18 @@
276 text-overflow: ellipsis;
277 }
278
279-.b-snaplist--row .b-snaplist__version {
280+.b-snaplist_row .b-snaplist__version {
281 min-width:100px;
282 }
283
284-.b-snaplist--row .b-snaplist__type {
285+.b-snaplist_row .b-snaplist__type {
286 text-align:center;
287 }
288
289-.b-snaplist--row .b-snaplist__actions {
290+.b-snaplist_row .b-snaplist__actions {
291 }
292
293-.b-snaplist--row .b-installer__message {
294+.b-snaplist_row .b-installer__message {
295 /** XXX hmm **/
296 display:none;
297 }
298
299=== modified file 'www/src/js/models/snap.js'
300--- www/src/js/models/snap.js 2015-05-08 14:53:07 +0000
301+++ www/src/js/models/snap.js 2015-05-12 11:34:29 +0000
302@@ -67,24 +67,25 @@
303 this.setInstallHTMLClass(model);
304 },
305
306+ // XXX move to install behaviour
307 setInstallHTMLClass: function(model) {
308 var state = model.get('status');
309 var installHTMLClass = '';
310
311 if (state === CONF.INSTALL_STATE.UNINSTALLED) {
312- installHTMLClass = 'b-installer--install';
313+ installHTMLClass = 'b-installer_do_install';
314 }
315
316 if (state === CONF.INSTALL_STATE.INSTALLED) {
317- installHTMLClass = 'b-installer--uninstall';
318+ installHTMLClass = 'b-installer_do_uninstall';
319 }
320
321 if (state === CONF.INSTALL_STATE.INSTALLING) {
322- installHTMLClass = 'b-installer--install b-installer--thinking';
323+ installHTMLClass = 'b-installer_do_install b-installer_thinking';
324 }
325
326 if (state === CONF.INSTALL_STATE.UNINSTALLING) {
327- installHTMLClass = 'b-installer--uninstall b-installer--thinking';
328+ installHTMLClass = 'b-installer_do_uninstall b-installer_thinking';
329 }
330
331 return model.set('installHTMLClass', installHTMLClass);
332
333=== modified file 'www/src/js/templates/_installer.hbs'
334--- www/src/js/templates/_installer.hbs 2015-05-08 13:11:16 +0000
335+++ www/src/js/templates/_installer.hbs 2015-05-12 11:34:29 +0000
336@@ -1,5 +1,5 @@
337 {{#if isInstallable}}
338-<div class="b-installer b-installer--small {{ installHTMLClass }}">
339+<div class="b-installer b-installer_small {{ installHTMLClass }}">
340 {{#if installActionString}}
341 <div class="b-installer__button">{{ installActionString }}</div>
342 <div class="b-installer__progress" title="download progress">
343@@ -9,7 +9,7 @@
344 <div class="b-installer__message"></div>
345 </div>
346 {{else}}
347-<div class="b-installer b-installer--small b-installer--disabled {{ installHTMLClass }}">
348+<div class="b-installer b-installer_small b-installer_disabled {{ installHTMLClass }}">
349 <div class="b-installer__button">
350 {{#if isInstalled}}
351 Installed
352
353=== modified file 'www/src/js/templates/layout-banner.hbs'
354--- www/src/js/templates/layout-banner.hbs 2015-05-04 18:24:04 +0000
355+++ www/src/js/templates/layout-banner.hbs 2015-05-12 11:34:29 +0000
356@@ -1,5 +1,5 @@
357 <div class="b-banner__brand">
358- <div class="b-banner__nav-item{{#if isHomeActive }} b-banner__nav-item--active{{/if}}">
359+ <div class="b-banner__nav-item{{#if isHomeActive }} b-banner__nav-item_active{{/if}}">
360 <a href="/">
361 <img src="/public/images/cof.svg" height="30" width="30">
362 <span>{{ name }} {{ subname }}</span>
363@@ -7,7 +7,7 @@
364 </div>
365 </div>
366 <div class="b-banner__primary-nav">
367- <div class="b-banner__nav-item{{#if isStoreActive }} b-banner__nav-item--active{{/if}}">
368+ <div class="b-banner__nav-item{{#if isStoreActive }} b-banner__nav-item_active{{/if}}">
369 <a href="/store">
370 Snappy store
371 </a>
372@@ -17,13 +17,13 @@
373 <div class="b-banner__search">
374 <form class="b-banner__form" action="/search" method="GET">
375 <input class="b-banner__input" type="search" name="q" placeholder="Search for snaps" value="{{ query }}">
376- <div class="b-banner__nav-item{{#if isSearchActive }} b-banner__nav-item--active{{/if}}">
377+ <div class="b-banner__nav-item{{#if isSearchActive }} b-banner__nav-item_active{{/if}}">
378 <button type="submit" class="b-banner__submit"></button>
379 </div>
380 </form>
381 </div>
382 <div class="b-banner__secondary-nav">
383- <div class="b-banner__nav-item{{#if isSystemActive }} b-banner__nav-item--active{{/if}}">
384+ <div class="b-banner__nav-item{{#if isSystemActive }} b-banner__nav-item_active{{/if}}">
385 <a href="/system-settings">
386 <img src="/public/images/settings.svg" height="30" width="30">
387 </a>
388
389=== modified file 'www/src/js/views/layout-banner.js'
390--- www/src/js/views/layout-banner.js 2015-04-30 14:33:49 +0000
391+++ www/src/js/views/layout-banner.js 2015-05-12 11:34:29 +0000
392@@ -16,7 +16,7 @@
393 'click @ui.submit': 'submit',
394 'click': function(e) {
395 var CLASS = 'b-banner__nav-item';
396- var ACTIVE_CLASS = 'b-banner__nav-item--active';
397+ var ACTIVE_CLASS = 'b-banner__nav-item_active';
398 var navItem = e.target.closest('.' + CLASS);
399 if (navItem) {
400 this.$('.' + ACTIVE_CLASS).toggleClass(ACTIVE_CLASS, false);
401
402=== modified file 'www/src/js/views/snap-menu.js'
403--- www/src/js/views/snap-menu.js 2015-05-05 14:40:14 +0000
404+++ www/src/js/views/snap-menu.js 2015-05-12 11:34:29 +0000
405@@ -29,7 +29,7 @@
406 setActiveNav: function(link) {
407 link = link || 'details';
408 var toActiveSelector = '[href=' + link + ']';
409- var activeClass = 'b-snap__nav-item--active';
410+ var activeClass = 'b-snap__nav-item_active';
411 var activeSelector = '.' + activeClass;
412 this.$(activeSelector).removeClass(activeClass);
413 this.$(toActiveSelector).addClass(activeClass);
414
415=== modified file 'www/src/js/views/snaplist.js'
416--- www/src/js/views/snaplist.js 2015-04-28 21:33:43 +0000
417+++ www/src/js/views/snaplist.js 2015-05-12 11:34:29 +0000
418@@ -12,9 +12,9 @@
419 var style = this.options.style || 'row';
420
421 if (style === 'row') {
422- return 'b-snaplist b-snaplist--row';
423+ return 'b-snaplist b-snaplist_row';
424 } else if (style === 'grid') {
425- return 'b-snaplist b-snaplist--grid';
426+ return 'b-snaplist b-snaplist_grid';
427 }
428 },
429
430
431=== modified file 'www/tests/snapLayoutViewSpec.js'
432--- www/tests/snapLayoutViewSpec.js 2015-05-05 20:29:57 +0000
433+++ www/tests/snapLayoutViewSpec.js 2015-05-12 11:34:29 +0000
434@@ -31,22 +31,22 @@
435
436 it('should be thinking when installing', function() {
437 this.model.set('status', CONF.INSTALL_STATE.INSTALLING);
438- expect(this.uiInstaller.hasClass('b-installer--thinking')).toBeTruthy();
439+ expect(this.uiInstaller.hasClass('b-installer_thinking')).toBeTruthy();
440 });
441
442 it('should be thinking when uninstalling', function() {
443 this.model.set('status', CONF.INSTALL_STATE.UNINSTALLING);
444- expect(this.uiInstaller.hasClass('b-installer--thinking')).toBeTruthy();
445+ expect(this.uiInstaller.hasClass('b-installer_thinking')).toBeTruthy();
446 });
447
448 it('should not be thinking when installed', function() {
449 this.model.set('status', CONF.INSTALL_STATE.INSTALLED);
450- expect(this.uiInstaller.hasClass('b-installer--thinking')).toBeFalsy();
451+ expect(this.uiInstaller.hasClass('b-installer_thinking')).toBeFalsy();
452 });
453
454 it('should not be thinking when uninstalled', function() {
455 this.model.set('status', CONF.INSTALL_STATE.UNINSTALLED);
456- expect(this.uiInstaller.hasClass('b-installer--thinking')).toBeFalsy();
457+ expect(this.uiInstaller.hasClass('b-installer_thinking')).toBeFalsy();
458 });
459
460 it('should deactivate install button if model has unrecognised status', function() {

Subscribers

People subscribed via source and target branches