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
README.md
  Diff comments   View file @e5ab24c
... ... @@ -53,18 +53,31 @@ See some important folders bellow:
53 53  
54 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 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 62 ```sass
60   -.skin-custom {
  63 +.skin-mycustom {
61 64 @extend %skin-base
62 65 }
63 66 ```
64 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 82 ## Development environment
70 83  
... ...
gulp/conf.js
  Diff comments   View file @e5ab24c
... ... @@ -9,6 +9,7 @@
9 9 var argv = require('minimist')(process.argv.slice(2));
10 10 var gutil = require('gulp-util');
11 11 var path = require('path');
  12 +var fs = require('fs');
12 13  
13 14 /**
14 15 * The main paths of your project handle these with care
... ... @@ -23,12 +24,54 @@ exports.paths = {
23 24 themes: 'themes',
24 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 61 exports.configTheme = function(theme) {
  62 +
27 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 70 exports.paths.dist = path.join("dist", exports.paths.theme);
30 71  
31 72 if(argv.skin) {
  73 + exports.skinExists(argv.skin);
  74 +
32 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 @@
  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 1 .navbar {
14 2 min-height: 123px;
15 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 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 24 .profile-header, .profile-footer{
72 25 text-align: center;
73 26 }
... ...