Download as
Browse Code »

Commit 2f22ab31437a2593c08a8a0f01d59583133a2008

Authored by Evandro Junior
2 parents 3bc8e5e6 c4688bc6
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 - Core default theme error
Showing 5 changed files with 94 additions and 68 deletions   Show diff stats
README.md
  Diff comments   View file @2f22ab3
... ... @@ -69,9 +69,9 @@ See some important folders bellow:
69 69  
70 70 **N.B.**
71 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.
  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 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`.
  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 75  
76 76 Example: _mycustom.
77 77  
... ...
gulp/conf.js
  Diff comments   View file @2f22ab3
... ... @@ -44,18 +44,34 @@ exports.themeExists = function (path) {
44 44 * @param skin The skin name passed by arg to gulp task
45 45 */
46 46 exports.skinExists = function (skin) {
47   - var skinFile = skin+'.scss';
48   - if(/skin-/.test(skin)){
49   - skinFile = skin.replace('skin-','_')+'.scss';
50   - }
51 47  
52   - var skinPath = path.join(exports.paths.themes, exports.paths.theme, '/app/layout/skins/', skinFile);
  48 + var skinPath, prefixPath = '';
  49 + var skinFile = skin+'.scss';
  50 + if (/skin-/.test(skin)) {
  51 + skinFile = skin.replace('skin-','_')+'.scss';
  52 + }
  53 +
  54 + if (/-default$/.test(exports.paths.theme)) {
  55 + prefixPath = exports.paths.src;
  56 + }else {
  57 + prefixPath = path.join(exports.paths.themes, exports.paths.theme);
  58 + }
  59 +
  60 + skinPath = path.join(prefixPath, '/app/layout/scss/skins/', skinFile);
  61 +
  62 + try {
  63 + fs.statSync(skinPath);
  64 + } catch(e) {
  65 + throw new Error('The skin file "'+skinPath+'" was not found');
  66 + }
  67 +
  68 + var content = fs.readFileSync(skinPath, {encoding: 'utf8'});
  69 + if(content.search(skin) == -1) {
  70 + throw new Error('The skin css selector ".'+skin+'" was not found in "'+skinPath+'" file');
  71 + }else if (content.search('@extend %skin-base') == -1) {
  72 + throw new Error('The skin css selector ".'+skin+'" needs inherit from %skin-base sass placeholder');
  73 + }
53 74  
54   - try {
55   - fs.statSync(skinPath);
56   - }catch(e) {
57   - throw new Error('The skin "'+skin+'" was not found in "'+skinPath+'"');
58   - }
59 75 };
60 76  
61 77 exports.configTheme = function(theme) {
... ...
themes/angular-participa-consulta/README.md 0 → 100644
  Diff comments   View file @2f22ab3
... ... @@ -0,0 +1,10 @@
  1 +# Angular Participa Consulta Theme
  2 +
  3 +
  4 +## Getting started
  5 +
  6 +Run these commands to set the proper theme and skin
  7 +
  8 +`npm config set angular-theme:theme angular-participa-consulta`
  9 +
  10 +`npm config set angular-theme:skin skin-yellow`
... ...
themes/angular-participa-consulta/app/layout/scss/skins/_yellow.scss 0 → 100644
  Diff comments   View file @2f22ab3
... ... @@ -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/layout/skins/_yellow.scss
View file @3bc8e5e
... ... @@ -1,56 +0,0 @@
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   -}