Merge branch 'skin-check' into 'master'

Skin structure - Core default theme error

Merge branch 'skin-check' into 'master'
Skin structure - Core default theme error
Evandro Junior
2 parents 3bc8e5e6 c4688bc6
Showing 5 changed files with 94 additions and 68 deletions Show diff stats
README.md
gulp/conf.js
themes/angular-participa-consulta/README.md
themes/angular-participa-consulta/app/layout/scss/skins/_yellow.scss
themes/angular-participa-consulta/app/layout/skins/_yellow.scss
@@ -69,9 +69,9 @@ See some important folders bellow:
 **N.B.**
-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.
+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.
-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`.
+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`.
 Example: _mycustom.
@@ -44,18 +44,34 @@ exports.themeExists = function (path) {
 * @param skin The skin name passed by arg to gulp task
 */
 exports.skinExists = function (skin) {
-  var skinFile = skin+'.scss';
-  if(/skin-/.test(skin)){
-     skinFile = skin.replace('skin-','_')+'.scss';
-  }
-  var skinPath = path.join(exports.paths.themes, exports.paths.theme, '/app/layout/skins/', skinFile);
+    var skinPath, prefixPath = '';
+    var skinFile = skin+'.scss';
+    if (/skin-/.test(skin)) {
+       skinFile = skin.replace('skin-','_')+'.scss';
+    }
+
+    if (/-default$/.test(exports.paths.theme)) {
+      prefixPath = exports.paths.src;
+    }else {
+      prefixPath = path.join(exports.paths.themes, exports.paths.theme);
+    }
+
+    skinPath = path.join(prefixPath, '/app/layout/scss/skins/', skinFile);
+
+    try {
+      fs.statSync(skinPath);
+    } catch(e) {
+      throw new Error('The skin file "'+skinPath+'" was not found');
+    }
+
+    var content = fs.readFileSync(skinPath, {encoding: 'utf8'});
+    if(content.search(skin) == -1) {
+      throw new Error('The skin css selector ".'+skin+'" was not found in "'+skinPath+'" file');
+    }else if (content.search('@extend %skin-base') == -1) {
+      throw new Error('The skin css selector ".'+skin+'" needs inherit from %skin-base sass placeholder');
+    }
-  try {
-    fs.statSync(skinPath);
-  }catch(e) {
-    throw new Error('The skin "'+skin+'" was not found in "'+skinPath+'"');
-  }
 };
 exports.configTheme = function(theme) {
@@ -0,0 +1,10 @@
+# Angular Participa Consulta Theme
+
+
+## Getting started
+
+Run these commands to set the proper theme and skin
+
+`npm config set angular-theme:theme angular-participa-consulta`
+
+`npm config set angular-theme:skin skin-yellow`
@@ -0,0 +1,56 @@
+.skin-yellow {
+  @extend %skin-base;
+
+  .notifications-list .item-footer {
+    background: #DAE1C4;
+    color: #4F9CAC;
+  }
+
+  .navbar-nav .open > a,
+  .navbar-nav .open > a:hover,
+  .navbar-nav .open > a:focus {
+    background-color: $selected-color;
+    color: #000;
+  }
+
+  .nav .open > a,
+  .nav .open > a:hover,
+  .nav .open > a:focus {
+    border: none;
+  }
+
+  .dropdown-menu {
+     li > a:hover {
+      color: #555;
+      background-color: #F7F7F7;
+    }
+
+    .active > a,
+    .active > a:hover,
+    .active > a:focus {
+      color: #000;
+      background-color: #CCC;
+    }
+  }
+
+  .nav .caret {
+    border-bottom-color: #fff !important;
+    border-top-color: #fff !important;
+  }
+
+  .nav .open .caret {
+    border-bottom-color: #000 !important;
+    border-top-color: #000 !important;
+  }
+
+  .navbar-inverse .navbar-toggle {
+    border-color: #D49F18;
+  }
+
+  .container-fluid .navbar-header .navbar-toggle {
+    &:hover, &:focus {
+      background-color: #f5b025;
+    }
+  }
+
+}
@@ -1,56 +0,0 @@
-.skin-yellow {
-  @extend %skin-base;
-
-  .notifications-list .item-footer {
-    background: #DAE1C4;
-    color: #4F9CAC;
-  }
-
-  .navbar-nav .open > a,
-  .navbar-nav .open > a:hover,
-  .navbar-nav .open > a:focus {
-    background-color: $selected-color;
-    color: #000;
-  }
-
-  .nav .open > a,
-  .nav .open > a:hover,
-  .nav .open > a:focus {
-    border: none;
-  }
-
-  .dropdown-menu {
-     li > a:hover {
-      color: #555;
-      background-color: #F7F7F7;
-    }
-
-    .active > a,
-    .active > a:hover,
-    .active > a:focus {
-      color: #000;
-      background-color: #CCC;
-    }
-  }
-
-  .nav .caret {
-    border-bottom-color: #fff !important;
-    border-top-color: #fff !important;
-  }
-
-  .nav .open .caret {
-    border-bottom-color: #000 !important;
-    border-top-color: #000 !important;
-  }
-
-  .navbar-inverse .navbar-toggle {
-    border-color: #D49F18;
-  }
-
-  .container-fluid .navbar-header .navbar-toggle {
-    &:hover, &:focus {
-      background-color: #f5b025;
-    }
-  }
-
-}
	@@ -69,9 +69,9 @@ See some important folders bellow:		@@ -69,9 +69,9 @@ See some important folders bellow:
69		69
70	N.B.	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	Example: _mycustom.	76	Example: _mycustom.
77		77
	@@ -44,18 +44,34 @@ exports.themeExists = function (path) {		@@ -44,18 +44,34 @@ exports.themeExists = function (path) {
44	* @param skin The skin name passed by arg to gulp task	44	* @param skin The skin name passed by arg to gulp task
45	*/	45	*/
46	exports.skinExists = function (skin) {	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	exports.configTheme = function(theme) {	77	exports.configTheme = function(theme) {
@@ -0,0 +1,10 @@		@@ -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`
@@ -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	+}
	@@ -1,56 +0,0 @@	@@ -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	-}