Added tabs and two columns main layout into profile-info component

Michel Felipe de Oliveira Ferreira - SUPDE/DESDR/DE502
1 parent b7dae429
Showing 7 changed files with 154 additions and 14 deletions Show diff stats
gulp/styles.js
src/app/index.scss
src/app/layout/scss/_bootstrap-overrides.scss
src/app/layout/scss/_mixins.scss
src/app/profile/info/profile-info.html
src/languages/en.json
src/languages/pt.json
@@ -27,7 +27,8 @@ var buildStyles = function() {
  
   var injectFiles = gulp.src([
     path.join(conf.paths.src, '/app/**/*.scss'),
-    path.join('!' + conf.paths.src, '/app/index.scss')
+    path.join('!' + conf.paths.src, '/app/index.scss'),
+    path.join('!' + conf.paths.src, '/app/layout/scss/*.scss')
   ], { read: false });
  
   var injectOptions = {
@@ -16,6 +16,20 @@ $panel-default-text: rgb(44, 62, 80);
 $link-color: #007EBB;
 $body-bg: #f5f8fa;
 $page-header-border-color: #eee;
+
+//global bg color
+$main-bg-color: #e7ebee;
+
+//primary colors
+$primary-color: #03a9f4;
+$primary-color-dark: #0288d1;
+
+//GRID - media queries breakpoints
+$break-xxs-min: 420px;
+$break-xs-min: 768px;
+
+$break-xxs-max: ($break-xxs-min - 1);
+$break-xs-max: ($break-xs-min - 1);
 @import "../../bower_components/bootswatch/flatly/_variables.scss";
  
 /**
@@ -52,3 +66,5 @@ h1, h2, h3, h4, h5 {
 // endinjector
  
 @import "../../bower_components/bootswatch/flatly/_bootswatch.scss";
+@import "layout/scss/mixins";
+@import "layout/scss/bootstrap-overrides";
@@ -0,0 +1,94 @@
+/* MAINBOX */
+.main-box {
+		border: 1px solid #e7ebee;
+    box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
+    margin-bottom: 16px;
+    /* overflow: hidden; */
+    @include border-radius($border-radius-base);
+
+	@media (max-width: $break-xs-max) {
+		margin-bottom: 10px;
+	}
+
+	h2 {
+	    font-size: 1.3em;
+	    line-height: 29px;
+	    margin: 0;
+	    padding: 0;
+
+		@media (max-width: $break-xxs-max) {
+			margin-bottom: 5px;
+		}
+	}
+	&.no-header {
+		padding-top: 20px;
+	}
+	.main-box-header {
+	    min-height: 50px;
+	    padding: 10px 20px;
+
+		&.with-border {
+			border-bottom: 1px solid #ecf0f1;
+		}
+	}
+	.main-box-body {
+		padding: 0 20px 20px 20px;
+	}
+}
+
+/* TABS */
+.nav-tabs {
+	background: #f9f9f9;
+	border-color: transparent;
+	margin-bottom: 15px;
+	@include border-radius(3px 3px 0 0);
+
+	> li > a {
+		@include border-radius(0);
+		font-size: 1.125em;
+		font-weight: 300;
+		outline: none;
+		color: #555;
+		margin-right: 3px;
+	}
+	> li > a:hover,
+	> li > a:focus {
+		border-color: transparent;
+		@include border-radius(3px 3px 0 0);
+		color: #555;
+		border-bottom: 0;
+		background: rgba(219, 221, 223, 0.46);
+	}
+	> li.active > a,
+	> li.active > a:hover,
+	> li.active > a:focus {
+		@include border-radius(3px 3px 0 0);
+		border-left: 0;
+		border-top: 2px solid #03a9f4;
+		border-right: 0;
+		background: #fff;
+	}
+}
+.nav .open > a,
+.nav .open > a:hover,
+.nav .open > a:focus {
+	border-color: $main-bg-color;
+}
+.nav .caret {
+	border-bottom-color: $primary-color;
+	border-top-color: $primary-color;
+}
+.main-box .tabs-header {
+	min-height: 50px;
+	padding: 10px 20px;
+}
+.main-box .tab-content-body {
+	padding: 0 20px 20px 20px;
+	margin-bottom: 0;
+}
+.main-box .tab-content {
+	padding: 0 10px;
+}
+.tabs-wrapper.tabs-no-header .tab-content {
+	padding: 0 20px 20px;
+}
@@ -0,0 +1,5 @@
+// MIXINS
+@mixin border-radius($radius) {
+	border-radius: $radius;
+	background-clip: padding-box; /* stops bg color from leaking outside the border: */
+}
-<h3>{{vm.profile.name}}</h3>
-
 <div class="profile-wall">
-  <h4>{{"profile.wall" | translate}}</h4>
-  <noosfero-activities [activities]="vm.activities"></noosfero-activities>
+
+  <div class="col-lg-3 col-md-4 col-sm-4">
+    <div class="main-box clearfix">
+      <header class="main-box-header clearfix">
+        <h2>{{vm.profile.name}}</h2>
+      </header>
+      <div class="main-box-body clearfix">
+        <noosfero-profile-image [profile]="vm.profile" class="img-responsive center-block"></noosfero-profile-image>
+        <div class="profile-since">
+          {{"profile.member_since" | translate}}: {{vm.profile.created_at}}
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-lg-9 col-md-8 col-sm-8">
+    <div class="main-box clearfix">
+      <uib-tabset active="active">
+        <uib-tab index="0" heading="{{ 'activities.title' | translate }}">
+          <noosfero-activities [activities]="vm.activities"></noosfero-activities>
+        </uib-tab>
+        <uib-tab index="0" heading="{{ 'profile.about' | translate }}">
+          <!-- Profile data here -->
+        </uib-tab>
+      </uib-tabset>
+    </div>
+  </div>
 </div>
-{  
+{
   "noosfero.name" : "Noosfero",
   "blocks.profile_image.control_panel": "Control Panel",
   "navbar.profile": "Profile",
@@ -9,7 +9,9 @@
   "language.en": "English",
   "language.pt": "Portuguese",
   "language.selector": "Language",
-  "profile.wall": "Profile Wall",
+  "profile.member_since": "Member since",
+  "profile.about": "About me",
+  "activities.title": "Activities",
   "activities.create_article.description": "has published on",
   "activities.add_member_in_community.description": "has joined the community",
   "activities.new_friendship.description": "has made {friends, plural, one{one new friend} other{# new friends}}:",
@@ -22,7 +24,5 @@
   "notification.error.default.title": "Oops...",
   "notification.profile.not_found": "Page not found",
   "notification.http_error.401.message": "Unauthorized",
-  "notification.http_error.500.message": "Server error",
-  "comment.post": "Post",
-  "comment.reply": "reply"
+  "notification.http_error.500.message": "Server error"
 }
-{  
+{
   "noosfero.name" : "Noosfero",
   "blocks.profile_image.control_panel": "Painel de Controle",
   "navbar.profile": "Perfil",
@@ -10,6 +10,9 @@
   "language.pt": "Português",
   "language.selector": "Idioma",
   "profile.wall": "Mural do Perfil",
+  "profile.member_since": "Membro desde",
+  "profile.about": "Meus dados",
+  "activities.title": "Atividades",
   "activities.create_article.description": "publicou em",
   "activities.add_member_in_community.description": "entrou na comunidade",
   "activities.new_friendship.description": "fez {friends, plural, one{um novo amigo} other{# novos amigos}}:",
@@ -22,7 +25,5 @@
   "notification.error.default.title": "Oops...",
   "notification.profile.not_found": "Página não encontrada",
   "notification.http_error.401.message": "Não autorizado",
-  "notification.http_error.500.message": "Erro no servidor",
-  "comment.post": "Postar",
-  "comment.reply": "responder"
+  "notification.http_error.500.message": "Erro no servidor"
 }
...	...	@@ -27,7 +27,8 @@ var buildStyles = function() {
27	27
28	28	var injectFiles = gulp.src([
29	29	path.join(conf.paths.src, '/app/*/.scss'),
30		- path.join('!' + conf.paths.src, '/app/index.scss')
	30	+ path.join('!' + conf.paths.src, '/app/index.scss'),
	31	+ path.join('!' + conf.paths.src, '/app/layout/scss/*.scss')
31	32	], { read: false });
32	33
33	34	var injectOptions = {
...	...
...	...	@@ -16,6 +16,20 @@ $panel-default-text: rgb(44, 62, 80);
16	16	$link-color: #007EBB;
17	17	$body-bg: #f5f8fa;
18	18	$page-header-border-color: #eee;
	19	+
	20	+//global bg color
	21	+$main-bg-color: #e7ebee;
	22	+
	23	+//primary colors
	24	+$primary-color: #03a9f4;
	25	+$primary-color-dark: #0288d1;
	26	+
	27	+//GRID - media queries breakpoints
	28	+$break-xxs-min: 420px;
	29	+$break-xs-min: 768px;
	30	+
	31	+$break-xxs-max: ($break-xxs-min - 1);
	32	+$break-xs-max: ($break-xs-min - 1);
19	33	@import "../../bower_components/bootswatch/flatly/_variables.scss";
20	34
21	35	/**
...	...	@@ -52,3 +66,5 @@ h1, h2, h3, h4, h5 {
52	66	// endinjector
53	67
54	68	@import "../../bower_components/bootswatch/flatly/_bootswatch.scss";
	69	+@import "layout/scss/mixins";
	70	+@import "layout/scss/bootstrap-overrides";
...	...
...	...	@@ -0,0 +1,94 @@
	1	+/* MAINBOX */
	2	+.main-box {
	3	+ border: 1px solid #e7ebee;
	4	+ box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
	5	+ margin-bottom: 16px;
	6	+ /* overflow: hidden; */
	7	+ @include border-radius($border-radius-base);
	8	+
	9	+ @media (max-width: $break-xs-max) {
	10	+ margin-bottom: 10px;
	11	+ }
	12	+
	13	+ h2 {
	14	+ font-size: 1.3em;
	15	+ line-height: 29px;
	16	+ margin: 0;
	17	+ padding: 0;
	18	+
	19	+ @media (max-width: $break-xxs-max) {
	20	+ margin-bottom: 5px;
	21	+ }
	22	+ }
	23	+ &.no-header {
	24	+ padding-top: 20px;
	25	+ }
	26	+ .main-box-header {
	27	+ min-height: 50px;
	28	+ padding: 10px 20px;
	29	+
	30	+ &.with-border {
	31	+ border-bottom: 1px solid #ecf0f1;
	32	+ }
	33	+ }
	34	+ .main-box-body {
	35	+ padding: 0 20px 20px 20px;
	36	+ }
	37	+}
	38	+
	39	+/* TABS */
	40	+.nav-tabs {
	41	+ background: #f9f9f9;
	42	+ border-color: transparent;
	43	+ margin-bottom: 15px;
	44	+ @include border-radius(3px 3px 0 0);
	45	+
	46	+ > li > a {
	47	+ @include border-radius(0);
	48	+ font-size: 1.125em;
	49	+ font-weight: 300;
	50	+ outline: none;
	51	+ color: #555;
	52	+ margin-right: 3px;
	53	+ }
	54	+ > li > a:hover,
	55	+ > li > a:focus {
	56	+ border-color: transparent;
	57	+ @include border-radius(3px 3px 0 0);
	58	+ color: #555;
	59	+ border-bottom: 0;
	60	+ background: rgba(219, 221, 223, 0.46);
	61	+ }
	62	+ > li.active > a,
	63	+ > li.active > a:hover,
	64	+ > li.active > a:focus {
	65	+ @include border-radius(3px 3px 0 0);
	66	+ border-left: 0;
	67	+ border-top: 2px solid #03a9f4;
	68	+ border-right: 0;
	69	+ background: #fff;
	70	+ }
	71	+}
	72	+.nav .open > a,
	73	+.nav .open > a:hover,
	74	+.nav .open > a:focus {
	75	+ border-color: $main-bg-color;
	76	+}
	77	+.nav .caret {
	78	+ border-bottom-color: $primary-color;
	79	+ border-top-color: $primary-color;
	80	+}
	81	+.main-box .tabs-header {
	82	+ min-height: 50px;
	83	+ padding: 10px 20px;
	84	+}
	85	+.main-box .tab-content-body {
	86	+ padding: 0 20px 20px 20px;
	87	+ margin-bottom: 0;
	88	+}
	89	+.main-box .tab-content {
	90	+ padding: 0 10px;
	91	+}
	92	+.tabs-wrapper.tabs-no-header .tab-content {
	93	+ padding: 0 20px 20px;
	94	+}
...	...
...	...	@@ -0,0 +1,5 @@
	1	+// MIXINS
	2	+@mixin border-radius($radius) {
	3	+ border-radius: $radius;
	4	+ background-clip: padding-box; /* stops bg color from leaking outside the border: */
	5	+}
...	...
1		-<h3>{{vm.profile.name}}</h3>
2		-
3	1	<div class="profile-wall">
4		- <h4>{{"profile.wall" \| translate}}</h4>
5		- <noosfero-activities [activities]="vm.activities"></noosfero-activities>
	2	+
	3	+ <div class="col-lg-3 col-md-4 col-sm-4">
	4	+ <div class="main-box clearfix">
	5	+ <header class="main-box-header clearfix">
	6	+ <h2>{{vm.profile.name}}</h2>
	7	+ </header>
	8	+ <div class="main-box-body clearfix">
	9	+ <noosfero-profile-image [profile]="vm.profile" class="img-responsive center-block"></noosfero-profile-image>
	10	+ <div class="profile-since">
	11	+ {{"profile.member_since" \| translate}}: {{vm.profile.created_at}}
	12	+ </div>
	13	+ </div>
	14	+ </div>
	15	+ </div>
	16	+
	17	+ <div class="col-lg-9 col-md-8 col-sm-8">
	18	+ <div class="main-box clearfix">
	19	+ <uib-tabset active="active">
	20	+ <uib-tab index="0" heading="{{ 'activities.title' \| translate }}">
	21	+ <noosfero-activities [activities]="vm.activities"></noosfero-activities>
	22	+ </uib-tab>
	23	+ <uib-tab index="0" heading="{{ 'profile.about' \| translate }}">
	24	+ <!-- Profile data here -->
	25	+ </uib-tab>
	26	+ </uib-tabset>
	27	+ </div>
	28	+ </div>
6	29	</div>
...	...
1		-{
	1	+{
2	2	"noosfero.name" : "Noosfero",
3	3	"blocks.profile_image.control_panel": "Control Panel",
4	4	"navbar.profile": "Profile",
...	...	@@ -9,7 +9,9 @@
9	9	"language.en": "English",
10	10	"language.pt": "Portuguese",
11	11	"language.selector": "Language",
12		- "profile.wall": "Profile Wall",
	12	+ "profile.member_since": "Member since",
	13	+ "profile.about": "About me",
	14	+ "activities.title": "Activities",
13	15	"activities.create_article.description": "has published on",
14	16	"activities.add_member_in_community.description": "has joined the community",
15	17	"activities.new_friendship.description": "has made {friends, plural, one{one new friend} other{# new friends}}:",
...	...	@@ -22,7 +24,5 @@
22	24	"notification.error.default.title": "Oops...",
23	25	"notification.profile.not_found": "Page not found",
24	26	"notification.http_error.401.message": "Unauthorized",
25		- "notification.http_error.500.message": "Server error",
26		- "comment.post": "Post",
27		- "comment.reply": "reply"
	27	+ "notification.http_error.500.message": "Server error"
28	28	}
...	...
1		-{
	1	+{
2	2	"noosfero.name" : "Noosfero",
3	3	"blocks.profile_image.control_panel": "Painel de Controle",
4	4	"navbar.profile": "Perfil",
...	...	@@ -10,6 +10,9 @@
10	10	"language.pt": "Português",
11	11	"language.selector": "Idioma",
12	12	"profile.wall": "Mural do Perfil",
	13	+ "profile.member_since": "Membro desde",
	14	+ "profile.about": "Meus dados",
	15	+ "activities.title": "Atividades",
13	16	"activities.create_article.description": "publicou em",
14	17	"activities.add_member_in_community.description": "entrou na comunidade",
15	18	"activities.new_friendship.description": "fez {friends, plural, one{um novo amigo} other{# novos amigos}}:",
...	...	@@ -22,7 +25,5 @@
22	25	"notification.error.default.title": "Oops...",
23	26	"notification.profile.not_found": "Página não encontrada",
24	27	"notification.http_error.401.message": "Não autorizado",
25		- "notification.http_error.500.message": "Erro no servidor",
26		- "comment.post": "Postar",
27		- "comment.reply": "responder"
	28	+ "notification.http_error.500.message": "Erro no servidor"
28	29	}
...	...