Added skin folder structure + skin and theme validation

Michel Felipe · Evandro Junior · Michel Felipe · Evandro Junior · Evandro Junior
1 parent f75c68d0
Showing 5 changed files with 105 additions and 62 deletions Show diff stats
README.md
gulp/conf.js
themes/angular-participa-consulta/app/layout/skins/_yellow.scss
themes/angular-participa-consulta/app/navbar.scss
themes/angular-participa-consulta/app/participa-consulta.scss
@@ -53,8 +53,10 @@ See some important folders bellow:
  
 ## Change skin
  
-- Create a any scss file into your theme folder structure
+- Create a any scss file into: `app/layout/skins/`
+  > **Suggestion:** Create a `sass` file partial. Something like: **`_mycustom.scss`**.
 - Extend your skin css class from `%skin-base` scss placeholder selector. Something like this:
+  > **Suggestion:** Use the prefix **`skin-`** to the css class
  
 ```sass
 .skin-custom {
@@ -62,9 +64,10 @@ See some important folders bellow:
 }
 ```
 - Configure application to use the new theme, e.g.:
-`npm config set angular-theme:skin custom-skin`
+`npm config set angular-theme:skin skin-myscustom`
  
 - Start the application with `npm start` scripts ou make a build
+  > **PS:** If the configured skin is invalid, a error message is showed in the terminal.
  
 ## Development environment
  
@@ -9,6 +9,7 @@
 var argv = require('minimist')(process.argv.slice(2));
 var gutil = require('gulp-util');
 var path = require('path');
+var fs = require('fs');
  
 /**
  *  The main paths of your project handle these with care
@@ -23,12 +24,54 @@ exports.paths = {
   themes: 'themes',
   languages: 'languages'
 };
+
+/**
+* Check if theme folder exists on "themes" directory
+*
+* @param path The string relative path of the theme
+*/
+exports.themeExists = function (path) {
+  try {
+    fs.statSync(path);
+  } catch (e) {
+    throw new Error('The theme "'+exports.paths.theme+ ' on path "'+path+'" was not found');
+  }
+};
+
+/**
+* Check if skin file exists on "{theme}/app/layout/skins" directory
+*
+* @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);
+
+  try {
+    fs.statSync(skinPath);
+  }catch(e) {
+    throw new Error('The skin "'+skin+'" on path "'+skinPath+'" was not found');
+  }
+};
+
 exports.configTheme = function(theme) {
+
   exports.paths.theme = theme || "angular-default";
-  exports.paths.allSources = [exports.paths.src, path.join(exports.paths.themes, exports.paths.theme)];
+  var themePath = path.join(exports.paths.themes, exports.paths.theme);
+
+  exports.paths.allSources = [exports.paths.src, themePath];
+
+
+  exports.themeExists(themePath);
   exports.paths.dist = path.join("dist", exports.paths.theme);
  
   if(argv.skin) {
+    exports.skinExists(argv.skin);
+
     exports.paths.skin = argv.skin;
   }
 }
@@ -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;
+    }
+  }
+
+}
-.skin-yellow {
-  .navbar-inverse .navbar-toggle {
-    border-color: #D49F18;
-  }
-
-  .container-fluid .navbar-header .navbar-toggle {
-    &:hover, &:focus {
-      background-color: #f5b025;
-    }
-  }
-}
-
 .navbar {
   min-height: 123px;
   background-color: #f9c404;
@@ -21,53 +21,6 @@ $selected-color: #f6c445;
   src: url('../assets/fonts/participa-consulta/Ubuntu-RI.ttf');
 }
  
-.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;
-  }
-
-}
-
 .profile-header, .profile-footer{
   text-align: center;
 }
...	...	@@ -53,8 +53,10 @@ 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 a any scss file into: `app/layout/skins/`
	57	+ > Suggestion: Create a `sass` file partial. Something like: `_mycustom.scss`.
57	58	- Extend your skin css class from `%skin-base` scss placeholder selector. Something like this:
	59	+ > Suggestion: Use the prefix `skin-` to the css class
58	60
59	61	```sass
60	62	.skin-custom {
...	...	@@ -62,9 +64,10 @@ See some important folders bellow:
62	64	}
63	65	```
64	66	- Configure application to use the new theme, e.g.:
65		-`npm config set angular-theme:skin custom-skin`
	67	+`npm config set angular-theme:skin skin-myscustom`
2		Link here Evandro Junior @evandrojr 2016-06-27 21:10:57 UTC (Edited 2016-06-28 13:06:24 UTC ) is "skin-myscustom" misspelled? Write Preview is "_skin-myscustom_" misspelled? Choose File ... File name... Cancel Link here Michel Felipe @mfdeveloper 2016-06-28 13:15:50 UTC Done :) Write Preview Done :) Choose File ... File name... Cancel
66	68
67	69	- Start the application with `npm start` scripts ou make a build
	70	+ > PS: If the configured skin is invalid, a error message is showed in the terminal.
1		Link here Evandro Junior @evandrojr 2016-06-27 21:14:40 UTC Fix language to: an error message Write Preview Fix language to: an error message Choose File ... File name... Cancel
68	71
69	72	## Development environment
70	73
...	...
...	...	@@ -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+'" on path "'+skinPath+'" was not found');
1		Link here Evandro Junior @evandrojr 2016-06-27 21:36:23 UTC IMHO this sounds better: throw new Error('The skin "'+skin+'" was not found in "'+skinPath+'"'); Write Preview IMHO this sounds better: throw new Error('The skin "'+skin+'" was not found in "'+skinPath+'"'); Choose File ... File name... Cancel
	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	}
...	...
...	...	@@ -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		-.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;
...	...
...	...	@@ -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	}
...	...