Merge Request #48

← To merge requests From skin-check into master
Merged
noosfero-themes/angular-theme!48
Created by Michel Felipe

Skin structure - Core default theme error

This merge is a extension of merge request !43

Whether the theme angular-default is set into npm config, the skin raise a exception because the folder into themes directory is empty. Otherwise this error is not showed.

Made too some improvements and verifications of skin css selector and sass inheritance

Assignee: Evandro Junior
Milestone: None

Merged by Evandro Junior

Source branch has been removed
Commits (2)
2 participants
bug
Showing 5 changed files   Show diff stats
README.md
  Diff comments   Edit   View file @c4688bc
... ... @@ -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   Edit   View file @c4688bc
... ... @@ -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   Edit   View file @c4688bc
... ... @@ -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   Edit   View file @c4688bc
... ... @@ -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 +}
... ...