From c2abd5b3c556a651216f070ba6696c23f33d383c Mon Sep 17 00:00:00 2001 From: Michel Felipe Date: Thu, 24 Mar 2016 18:52:09 -0300 Subject: [PATCH] Completed initial two columns profile-info. Needs create a unit test for new profile-data component --- src/app/index.scss | 10 +++++++++- src/app/layout/scss/_bootstrap-overrides.scss | 38 -------------------------------------- src/app/layout/scss/_layout.scss | 1 - src/app/layout/scss/_tables.scss | 103 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ src/app/profile/data/profile-data.component.ts | 15 +++++++++++++++ src/app/profile/data/profile-data.html | 45 +++++++++++++++++++++++++++++++++++++++++++++ src/app/profile/info/profile-info.component.spec.ts | 4 +++- src/app/profile/info/profile-info.component.ts | 10 +++++++--- src/app/profile/info/profile-info.html | 5 +++-- src/app/profile/profile.scss | 5 +++++ src/app/shared/pipes/translate-profile.filter.ts | 14 ++++++++++++++ src/languages/en.json | 7 ++++++- src/languages/pt.json | 8 ++++++-- 13 files changed, 216 insertions(+), 49 deletions(-) create mode 100644 src/app/layout/scss/_tables.scss create mode 100644 src/app/profile/data/profile-data.component.ts create mode 100644 src/app/profile/data/profile-data.html create mode 100644 src/app/shared/pipes/translate-profile.filter.ts diff --git a/src/app/index.scss b/src/app/index.scss index af07f5c..685f48e 100644 --- a/src/app/index.scss +++ b/src/app/index.scss @@ -24,12 +24,19 @@ $main-bg-color: #e7ebee; $primary-color: #03a9f4; $primary-color-dark: #0288d1; +//OTHER COLORS +$default-bg-hover-color: #f8f8f8; +$red-color: #e84e40; +$red-color-dark: #dd191d; + //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"; /** @@ -68,4 +75,5 @@ h1, h2, h3, h4, h5 { @import "../../bower_components/bootswatch/flatly/_bootswatch.scss"; @import "layout/scss/mixins"; @import "layout/scss/bootstrap-overrides"; -@import "layout/scss/layout" +@import "layout/scss/layout"; +@import "layout/scss/tables"; diff --git a/src/app/layout/scss/_bootstrap-overrides.scss b/src/app/layout/scss/_bootstrap-overrides.scss index a522883..07881b1 100644 --- a/src/app/layout/scss/_bootstrap-overrides.scss +++ b/src/app/layout/scss/_bootstrap-overrides.scss @@ -1,41 +1,3 @@ -/* 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; diff --git a/src/app/layout/scss/_layout.scss b/src/app/layout/scss/_layout.scss index ed1684d..f8abff4 100644 --- a/src/app/layout/scss/_layout.scss +++ b/src/app/layout/scss/_layout.scss @@ -33,6 +33,5 @@ } .main-box-body { padding: 0 20px 20px 20px; - text-align: center; } } diff --git a/src/app/layout/scss/_tables.scss b/src/app/layout/scss/_tables.scss new file mode 100644 index 0000000..196caaa --- /dev/null +++ b/src/app/layout/scss/_tables.scss @@ -0,0 +1,103 @@ +/* TABLES */ +.table-hover > tbody > tr:hover > td, +.table-hover > tbody > tr:hover > th { + background-color: $default-bg-hover-color; +} +.table { + thead > tr { + > th { + border-bottom: 2px solid $main-bg-color; + text-transform: uppercase; + font-size: 0.875em; + + > a span { + color: $text-color; + } + } + } + tbody > tr { + > td { + font-size: 0.875em; + vertical-align: middle; + border-top: 1px solid $main-bg-color; + padding: 12px 8px; + + &:first-child { + font-size: 1.125em; + font-weight: bold; + } + } + td { + .call-type { + display: block; + font-size: 0.75em; + text-align: center; + } + .first-line { + line-height: 1.5; + font-weight: 400; + font-size: 1.125em; + + span { + font-size: 0.875em; + color: #969696; + font-weight: 300; + } + } + .second-line { + font-size: 0.875em; + line-height: 1.2; + } + } + &.table-line-fb > td { + background-color: #9daccb; + color: #262525; + } + &.table-line-twitter > td { + background-color: #9fccff; + color: #262525; + } + &.table-line-plus > td { + background-color: #eea59c; + color: #262525; + } + } + + a { + &.table-link { + margin: 0 5px; + font-size: 1.125em; + + &:hover { + text-decoration: none; + color: #2980b9; + } + &.danger { + color: $red-color; + + &:hover { + color: $red-color-dark; + } + } + } + } + + &.table-condensed { + tbody > tr { + > td { + padding: 8px 5px; + } + } + } +} + +.table-striped { + tbody > tr { + > td { + width: 50%; + background: none; + border: none; + border-bottom: 1px solid #ebebeb; + } + } +} diff --git a/src/app/profile/data/profile-data.component.ts b/src/app/profile/data/profile-data.component.ts new file mode 100644 index 0000000..031f816 --- /dev/null +++ b/src/app/profile/data/profile-data.component.ts @@ -0,0 +1,15 @@ +import {StateConfig, Component, Inject, Input, provide} from 'ng-forward'; +import {ProfileService} from "../../../lib/ng-noosfero-api/http/profile.service"; +import {TranslateProfile} from "../../shared/pipes/translate-profile.filter"; + +@Component({ + selector: 'profile-data', + templateUrl: "app/profile/data/profile-data.html", + pipes: [TranslateProfile] +}) +export class ProfileDataComponent { + + @Input() + profile: noosfero.Profile; + +} diff --git a/src/app/profile/data/profile-data.html b/src/app/profile/data/profile-data.html new file mode 100644 index 0000000..70f8e4c --- /dev/null +++ b/src/app/profile/data/profile-data.html @@ -0,0 +1,45 @@ + +
+
+

{{"profile.basic_info" | translate}}

+
+
+
+ + + + + + + +
+ {{"profile.type" | translate}} + + {{ctrl.profile | translateProfile}} +
+
+
+
+ + +
+
+

{{"profile.others_info" | translate}}

+
+
+
+ + + + + + + +
+ {{ field }} + + {{ value }} +
+
+
+
diff --git a/src/app/profile/info/profile-info.component.spec.ts b/src/app/profile/info/profile-info.component.spec.ts index d22c405..675ca2a 100644 --- a/src/app/profile/info/profile-info.component.spec.ts +++ b/src/app/profile/info/profile-info.component.spec.ts @@ -8,6 +8,7 @@ describe("Components", () => { let $q: ng.IQService; let profileServiceMock: any; let $stateParams: any; + let amDateFormatMock: any; beforeEach(inject((_$rootScope_: ng.IRootScopeService, _$q_: ng.IQService) => { $rootScope = _$rootScope_; @@ -17,6 +18,7 @@ describe("Components", () => { beforeEach(() => { $stateParams = jasmine.createSpyObj("$stateParams", ["profile"]); profileServiceMock = jasmine.createSpyObj("profileServiceMock", ["getCurrentProfile", "getActivities"]); + amDateFormatMock = jasmine.createSpyObj("amDateFormatMock", ["transform"]); let getCurrentProfileResponse = $q.defer(); getCurrentProfileResponse.resolve({ id: 1 }); @@ -29,7 +31,7 @@ describe("Components", () => { }); it("get the profile activities", done => { - let component: ProfileInfoComponent = new ProfileInfoComponent(profileServiceMock); + let component: ProfileInfoComponent = new ProfileInfoComponent(profileServiceMock, amDateFormatMock); $rootScope.$apply(); expect(profileServiceMock.getCurrentProfile).toHaveBeenCalled(); expect(profileServiceMock.getActivities).toHaveBeenCalled(); diff --git a/src/app/profile/info/profile-info.component.ts b/src/app/profile/info/profile-info.component.ts index 2d8cbe0..64acaa7 100644 --- a/src/app/profile/info/profile-info.component.ts +++ b/src/app/profile/info/profile-info.component.ts @@ -1,10 +1,14 @@ import {StateConfig, Component, Inject, provide} from 'ng-forward'; import {ProfileService} from "../../../lib/ng-noosfero-api/http/profile.service"; +import {ProfileDataComponent} from "../data/profile-data.component"; +import {TranslateProfile} from "../../shared/pipes/translate-profile.filter"; @Component({ selector: 'profile', templateUrl: "app/profile/info/profile-info.html", - providers: [provide('profileService', { useClass: ProfileService })] + providers: [provide('profileService', { useClass: ProfileService })], + directives: [ProfileDataComponent], + pipes: [TranslateProfile] }) @Inject(ProfileService) @Inject("amDateFormatFilter") @@ -14,10 +18,10 @@ export class ProfileInfoComponent { profile: noosfero.Profile; constructor(private profileService: ProfileService, private amDateFormatFilter: any) { - this.activate(); + this.init(); } - activate() { + init() { this.profileService.getCurrentProfile().then((profile: noosfero.Profile) => { this.profile = profile; return this.profileService.getActivities(this.profile.id); diff --git a/src/app/profile/info/profile-info.html b/src/app/profile/info/profile-info.html index 75880d3..db417de 100644 --- a/src/app/profile/info/profile-info.html +++ b/src/app/profile/info/profile-info.html @@ -5,8 +5,9 @@

{{vm.profile.name}}

-
+
+ {{vm.profile | translateProfile}}
{{"profile.member_since" | translate}}: {{vm.profile.created_at | amDateFormat:'MMMM YYYY'}}
@@ -21,7 +22,7 @@ - +
diff --git a/src/app/profile/profile.scss b/src/app/profile/profile.scss index 746c83f..a1f822e 100644 --- a/src/app/profile/profile.scss +++ b/src/app/profile/profile.scss @@ -5,3 +5,8 @@ padding: 0 2%; } } + +#profile-left { + text-align: center; + margin-top: 15px; +} diff --git a/src/app/shared/pipes/translate-profile.filter.ts b/src/app/shared/pipes/translate-profile.filter.ts new file mode 100644 index 0000000..51a1a42 --- /dev/null +++ b/src/app/shared/pipes/translate-profile.filter.ts @@ -0,0 +1,14 @@ +import {Pipe, Inject} from "ng-forward"; + +@Pipe("translateProfile") +@Inject("translateFilter") +export class TranslateProfile { + + constructor(private translateFilter: any) { } + + transform(profile: noosfero.Profile, options: any) { + + return this.translateFilter("profile." + profile.type.toLowerCase() + ".title"); + } + +} diff --git a/src/languages/en.json b/src/languages/en.json index b282f6e..18b7a6b 100644 --- a/src/languages/en.json +++ b/src/languages/en.json @@ -10,7 +10,12 @@ "language.pt": "Portuguese", "language.selector": "Language", "profile.member_since": "Member since", - "profile.about": "About me", + "profile.type": "Tipo", + "profile.about": "About", + "profile.basic_info": "Basic Information", + "profile.others_info": "Others", + "profile.community.title": "Community", + "profile.person.title": "Person", "activities.title": "Activities", "activities.create_article.description": "has published on", "activities.add_member_in_community.description": "has joined the community", diff --git a/src/languages/pt.json b/src/languages/pt.json index 4b7a0b2..7af5a58 100644 --- a/src/languages/pt.json +++ b/src/languages/pt.json @@ -9,9 +9,13 @@ "language.en": "Inglês", "language.pt": "Português", "language.selector": "Idioma", - "profile.wall": "Mural do Perfil", "profile.member_since": "Membro desde", - "profile.about": "Meus dados", + "profile.type": "Tipo", + "profile.about": "Sobre", + "profile.basic_info": "Dados básicos", + "profile.others_info": "Outras informações", + "profile.community.title": "Comunidade", + "profile.person.title": "Pessoa", "activities.title": "Atividades", "activities.create_article.description": "publicou em", "activities.add_member_in_community.description": "entrou na comunidade", -- libgit2 0.21.2