Download as
Browse Code »

Commit e5ab24c7d52e0362edee5ce25b7ca50ecd5c4124

Authored by Michel Felipe
2 parents f75c68d0 66c3e417
Exists in master and in 9 other branches cosmetic_changes_people_and_communities_block, forgot_password, layout_support, profile-blocks-sass, profile_description_block_component, recent-activities, staging, translations, users_profile_page

Merge branch 'skin-check' into 'master' 

Skin structure - Folder organization + Validation

See merge request !43
Showing 5 changed files with 117 additions and 64 deletions   Show diff stats
@@ -53,18 +53,31 @@ See some important folders bellow: @@ -53,18 +53,31 @@ See some important folders bellow:
53 53
54 ## Change skin 54 ## Change skin
55 55
56 -- Create a any scss file into your theme folder structure 56 +- Create an any scss file into: `app/layout/skins/`
  57 + > **Suggestion:** Create a `sass` file partial. Something like: **`_mycustom.scss`**.
  58 +
57 - Extend your skin css class from `%skin-base` scss placeholder selector. Something like this: 59 - Extend your skin css class from `%skin-base` scss placeholder selector. Something like this:
  60 + > **Suggestion:** Use the prefix **`skin-`** to the css class
58 61
59 ```sass 62 ```sass
60 -.skin-custom { 63 +.skin-mycustom {
61 @extend %skin-base 64 @extend %skin-base
62 } 65 }
63 ``` 66 ```
64 - Configure application to use the new theme, e.g.: 67 - Configure application to use the new theme, e.g.:
65 -`npm config set angular-theme:skin custom-skin` 68 +`npm config set angular-theme:skin skin-mycustom`
  69 +
  70 +**N.B.**
  71 +
  72 +1-The full name of the scss class should be used as the parameter for the command `npm config set angular-theme:`, like in _skin-mycustom_. DO NOT use the file name of the skin as the parameter.
  73 +
  74 +2-The skin's file should be the named as the scss class without the word `skin`, preceded by an underline. Otherwise it will raise an error during `npm install`.
  75 +
  76 +Example: _mycustom.
  77 +
66 78
67 -- Start the application with `npm start` scripts ou make a build 79 +- Start the application with `npm start` scripts or make a build
  80 + > **PS:** If the configured skin is invalid, an error message is showed in the terminal.
68 81
69 ## Development environment 82 ## Development environment
70 83
@@ -9,6 +9,7 @@ @@ -9,6 +9,7 @@
9 var argv = require('minimist')(process.argv.slice(2)); 9 var argv = require('minimist')(process.argv.slice(2));
10 var gutil = require('gulp-util'); 10 var gutil = require('gulp-util');
11 var path = require('path'); 11 var path = require('path');
  12 +var fs = require('fs');
12 13
13 /** 14 /**
14 * The main paths of your project handle these with care 15 * The main paths of your project handle these with care
@@ -23,12 +24,54 @@ exports.paths = { @@ -23,12 +24,54 @@ exports.paths = {
23 themes: 'themes', 24 themes: 'themes',
24 languages: 'languages' 25 languages: 'languages'
25 }; 26 };
  27 +
  28 +/**
  29 +* Check if theme folder exists on "themes" directory
  30 +*
  31 +* @param path The string relative path of the theme
  32 +*/
  33 +exports.themeExists = function (path) {
  34 + try {
  35 + fs.statSync(path);
  36 + } catch (e) {
  37 + throw new Error('The theme "'+exports.paths.theme+ ' on path "'+path+'" was not found');
  38 + }
  39 +};
  40 +
  41 +/**
  42 +* Check if skin file exists on "{theme}/app/layout/skins" directory
  43 +*
  44 +* @param skin The skin name passed by arg to gulp task
  45 +*/
  46 +exports.skinExists = function (skin) {
  47 + var skinFile = skin+'.scss';
  48 + if(/skin-/.test(skin)){
  49 + skinFile = skin.replace('skin-','_')+'.scss';
  50 + }
  51 +
  52 + var skinPath = path.join(exports.paths.themes, exports.paths.theme, '/app/layout/skins/', skinFile);
  53 +
  54 + try {
  55 + fs.statSync(skinPath);
  56 + }catch(e) {
  57 + throw new Error('The skin "'+skin+'" was not found in "'+skinPath+'"');
  58 + }
  59 +};
  60 +
26 exports.configTheme = function(theme) { 61 exports.configTheme = function(theme) {
  62 +
27 exports.paths.theme = theme || "angular-default"; 63 exports.paths.theme = theme || "angular-default";
28 - exports.paths.allSources = [exports.paths.src, path.join(exports.paths.themes, exports.paths.theme)]; 64 + var themePath = path.join(exports.paths.themes, exports.paths.theme);
  65 +
  66 + exports.paths.allSources = [exports.paths.src, themePath];
  67 +
  68 +
  69 + exports.themeExists(themePath);
29 exports.paths.dist = path.join("dist", exports.paths.theme); 70 exports.paths.dist = path.join("dist", exports.paths.theme);
30 71
31 if(argv.skin) { 72 if(argv.skin) {
  73 + exports.skinExists(argv.skin);
  74 +
32 exports.paths.skin = argv.skin; 75 exports.paths.skin = argv.skin;
33 } 76 }
34 } 77 }
themes/angular-participa-consulta/app/layout/skins/_yellow.scss 0 → 100644
  Diff comments   View file @e5ab24c
@@ -0,0 +1,56 @@ @@ -0,0 +1,56 @@
  1 +.skin-yellow {
  2 + @extend %skin-base;
  3 +
  4 + .notifications-list .item-footer {
  5 + background: #DAE1C4;
  6 + color: #4F9CAC;
  7 + }
  8 +
  9 + .navbar-nav .open > a,
  10 + .navbar-nav .open > a:hover,
  11 + .navbar-nav .open > a:focus {
  12 + background-color: $selected-color;
  13 + color: #000;
  14 + }
  15 +
  16 + .nav .open > a,
  17 + .nav .open > a:hover,
  18 + .nav .open > a:focus {
  19 + border: none;
  20 + }
  21 +
  22 + .dropdown-menu {
  23 + li > a:hover {
  24 + color: #555;
  25 + background-color: #F7F7F7;
  26 + }
  27 +
  28 + .active > a,
  29 + .active > a:hover,
  30 + .active > a:focus {
  31 + color: #000;
  32 + background-color: #CCC;
  33 + }
  34 + }
  35 +
  36 + .nav .caret {
  37 + border-bottom-color: #fff !important;
  38 + border-top-color: #fff !important;
  39 + }
  40 +
  41 + .nav .open .caret {
  42 + border-bottom-color: #000 !important;
  43 + border-top-color: #000 !important;
  44 + }
  45 +
  46 + .navbar-inverse .navbar-toggle {
  47 + border-color: #D49F18;
  48 + }
  49 +
  50 + .container-fluid .navbar-header .navbar-toggle {
  51 + &:hover, &:focus {
  52 + background-color: #f5b025;
  53 + }
  54 + }
  55 +
  56 +}
themes/angular-participa-consulta/app/navbar.scss
  Diff comments   View file @e5ab24c
1 -.skin-yellow {  
2 - .navbar-inverse .navbar-toggle {  
3 - border-color: #D49F18;  
4 - }  
5 -  
6 - .container-fluid .navbar-header .navbar-toggle {  
7 - &:hover, &:focus {  
8 - background-color: #f5b025;  
9 - }  
10 - }  
11 -}  
12 -  
13 .navbar { 1 .navbar {
14 min-height: 123px; 2 min-height: 123px;
15 background-color: #f9c404; 3 background-color: #f9c404;
themes/angular-participa-consulta/app/participa-consulta.scss
  Diff comments   View file @e5ab24c
@@ -21,53 +21,6 @@ $selected-color: #f6c445; @@ -21,53 +21,6 @@ $selected-color: #f6c445;
21 src: url('../assets/fonts/participa-consulta/Ubuntu-RI.ttf'); 21 src: url('../assets/fonts/participa-consulta/Ubuntu-RI.ttf');
22 } 22 }
23 23
24 -.skin-yellow {  
25 - @extend %skin-base;  
26 -  
27 - .notifications-list .item-footer {  
28 - background: #DAE1C4;  
29 - color: #4F9CAC;  
30 - }  
31 -  
32 - .navbar-nav .open > a,  
33 - .navbar-nav .open > a:hover,  
34 - .navbar-nav .open > a:focus {  
35 - background-color: $selected-color;  
36 - color: #000;  
37 - }  
38 -  
39 - .nav .open > a,  
40 - .nav .open > a:hover,  
41 - .nav .open > a:focus {  
42 - border: none;  
43 - }  
44 -  
45 - .dropdown-menu {  
46 - li > a:hover {  
47 - color: #555;  
48 - background-color: #F7F7F7;  
49 - }  
50 -  
51 - .active > a,  
52 - .active > a:hover,  
53 - .active > a:focus {  
54 - color: #000;  
55 - background-color: #CCC;  
56 - }  
57 - }  
58 -  
59 - .nav .caret {  
60 - border-bottom-color: #fff !important;  
61 - border-top-color: #fff !important;  
62 - }  
63 -  
64 - .nav .open .caret {  
65 - border-bottom-color: #000 !important;  
66 - border-top-color: #000 !important;  
67 - }  
68 -  
69 -}  
70 -  
71 .profile-header, .profile-footer{ 24 .profile-header, .profile-footer{
72 text-align: center; 25 text-align: center;
73 } 26 }