From 0061c3dca6dbbe391f5236df05816cb5165a8d52 Mon Sep 17 00:00:00 2001 From: Sylvain Date: Tue, 17 May 2016 16:41:32 +0200 Subject: [PATCH] reorganize profile header zone --- .../javascripts/controllers/dashboard.coffee | 33 ++++++++++- .../javascripts/controllers/members.coffee | 32 ++++++++++- .../directives/socialLink.coffee.erb | 18 ++++++ .../services/socialNetworks.coffee | 6 ++ app/assets/stylesheets/app.layout.scss | 57 ++++++++++--------- .../templates/shared/_member_form.html.erb | 2 +- app/assets/templates/shared/_social_link.html | 4 ++ .../templates/shared/publicProfile.html.erb | 43 ++++++++------ app/models/stylesheet.rb | 5 +- 9 files changed, 151 insertions(+), 49 deletions(-) create mode 100644 app/assets/javascripts/directives/socialLink.coffee.erb create mode 100644 app/assets/javascripts/services/socialNetworks.coffee create mode 100644 app/assets/templates/shared/_social_link.html diff --git a/app/assets/javascripts/controllers/dashboard.coffee b/app/assets/javascripts/controllers/dashboard.coffee index 2e878fa46..55571faa7 100644 --- a/app/assets/javascripts/controllers/dashboard.coffee +++ b/app/assets/javascripts/controllers/dashboard.coffee @@ -1,7 +1,38 @@ 'use strict' -Application.Controllers.controller "DashboardController", ["$scope", 'memberPromise', ($scope, memberPromise) -> +Application.Controllers.controller "DashboardController", ["$scope", 'memberPromise', 'SocialNetworks', ($scope, memberPromise, SocialNetworks) -> ## Current user's profile $scope.user = memberPromise + + ## List of social networks associated with this user and toggle 'show all' state + $scope.social = + showAllLinks: false + networks: SocialNetworks + + + ### PRIVATE SCOPE ### + + ## + # Kind of constructor: these actions will be realized first when the controller is loaded + ## + initialize = -> + $scope.social.networks = filterNetworks() + + ## + # Filter social network or website that are associated with the profile of the user provided in promise + # and return the filtered networks + # @return {Array} + ## + filterNetworks = -> + networks = []; + for network in SocialNetworks + if $scope.user.profile[network] && $scope.user.profile[network].length > 0 + networks.push(network); + networks + + ## !!! MUST BE CALLED AT THE END of the controller + initialize() + + ] diff --git a/app/assets/javascripts/controllers/members.coffee b/app/assets/javascripts/controllers/members.coffee index c1b25bf7a..7c7e4bf98 100644 --- a/app/assets/javascripts/controllers/members.coffee +++ b/app/assets/javascripts/controllers/members.coffee @@ -211,8 +211,38 @@ Application.Controllers.controller "EditProfileController", ["$scope", "$rootSco ## # Controller used on the public user's profile page (seeing another user's profile) ## -Application.Controllers.controller "ShowProfileController", ["$scope", 'memberPromise', ($scope, memberPromise) -> +Application.Controllers.controller "ShowProfileController", ["$scope", 'memberPromise', 'SocialNetworks', ($scope, memberPromise, SocialNetworks) -> ## Selected user's informations $scope.user = memberPromise + + ## List of social networks associated with this user and toggle 'show all' state + $scope.social = + showAllLinks: false + networks: SocialNetworks + + + ### PRIVATE SCOPE ### + + ## + # Kind of constructor: these actions will be realized first when the controller is loaded + ## + initialize = -> + $scope.social.networks = filterNetworks() + + ## + # Filter social network or website that are associated with the profile of the user provided in promise + # and return the filtered networks + # @return {Array} + ## + filterNetworks = -> + networks = []; + for network in SocialNetworks + if $scope.user.profile[network] && $scope.user.profile[network].length > 0 + networks.push(network); + networks + + ## !!! MUST BE CALLED AT THE END of the controller + initialize() + ] diff --git a/app/assets/javascripts/directives/socialLink.coffee.erb b/app/assets/javascripts/directives/socialLink.coffee.erb new file mode 100644 index 000000000..55ee01445 --- /dev/null +++ b/app/assets/javascripts/directives/socialLink.coffee.erb @@ -0,0 +1,18 @@ +Application.Directives.directive 'socialLink', [ -> + { + restrict: 'E' + scope: + network: '@?' + user: '=' + templateUrl: '<%= asset_path "shared/_social_link.html" %>' + link: (scope, element, attributes) -> + if scope.network == 'dailymotion' + scope.image = "<%= asset_path('social/dailymotion.png') %>" + scope.altText = 'd' + else if scope.network == 'echosciences' + scope.image = "<%= asset_path('social/echosciences.png') %>" + scope.altText = 'E)' + } +] + + diff --git a/app/assets/javascripts/services/socialNetworks.coffee b/app/assets/javascripts/services/socialNetworks.coffee new file mode 100644 index 000000000..ca8d90b4b --- /dev/null +++ b/app/assets/javascripts/services/socialNetworks.coffee @@ -0,0 +1,6 @@ +'use strict' + +# list the social networks supported in the user's profiles +Application.Services.factory 'SocialNetworks', [ -> + ['facebook', 'twitter', 'google_plus', 'viadeo', 'linkedin', 'instagram', 'youtube', 'vimeo', 'dailymotion', 'github', 'echosciences', 'website'] +] diff --git a/app/assets/stylesheets/app.layout.scss b/app/assets/stylesheets/app.layout.scss index 9fd540210..6bac56336 100644 --- a/app/assets/stylesheets/app.layout.scss +++ b/app/assets/stylesheets/app.layout.scss @@ -476,6 +476,7 @@ body.container{ left: 33%; } +// profile edition -- add a social network buttons .social-icons { & > div { cursor: pointer; @@ -487,51 +488,53 @@ body.container{ border: 1px solid transparent; &:hover { - background-color: $yellow; border: 1px solid $border-color; } } } +// public profile view .profile-top { background-size: cover !important; - .profile-top-head { + .profile-top-infos { margin: 0 15px 0 15px; padding: 30px 0 30px 0; - border-bottom: 1px solid $border-color; } - .profile-top-corpus { - padding-top: 15px; + .profile-top-pictos { + padding: 15px 0 15px 0; margin: 0 !important; - height: 190px; - overflow-y: visible; + text-align: center; - .avatar img { - border: 9px solid #fff; - background-color: #fff; - box-shadow: 1px 2px 2px 0 #1f1f1f; - margin-top: 10px; + + .avatar { + display: inline-block; + img { + border: 9px solid #fff; + background-color: #fff; + box-shadow: 1px 2px 2px 0 #1f1f1f; + } } - .profile-top-social { - border-left: 1px solid $border-color; - height: 100%; - top: -15px; + .social-links { + max-width: 133px; + display: inline-block; + text-align: left; - .social-links { - span { - border: 1px solid #fff; - width: 30px; - height: 30px; - border-radius: 50%; - display: inline-block; - text-align: center; - background-color: #fff; + a { + border: 1px solid #fff; + width: 30px; + height: 30px; + border-radius: 50%; + display: inline-block; + text-align: center; + background-color: #fff; + cursor: pointer; + color: $input-color; + margin-bottom: 5px; - i { vertical-align: middle; } - } + i { vertical-align: middle; } } } } diff --git a/app/assets/templates/shared/_member_form.html.erb b/app/assets/templates/shared/_member_form.html.erb index 084bb2a76..57239b4e6 100644 --- a/app/assets/templates/shared/_member_form.html.erb +++ b/app/assets/templates/shared/_member_form.html.erb @@ -431,7 +431,7 @@
d
-
d
+
E
diff --git a/app/assets/templates/shared/_social_link.html b/app/assets/templates/shared/_social_link.html new file mode 100644 index 000000000..efbd5f10c --- /dev/null +++ b/app/assets/templates/shared/_social_link.html @@ -0,0 +1,4 @@ + + {{altText}} + + \ No newline at end of file diff --git a/app/assets/templates/shared/publicProfile.html.erb b/app/assets/templates/shared/publicProfile.html.erb index a6a8f86fb..49235180e 100644 --- a/app/assets/templates/shared/publicProfile.html.erb +++ b/app/assets/templates/shared/publicProfile.html.erb @@ -1,31 +1,40 @@
-
-
-
{{user.name}}
- {{user.username}} • {{user.is_allow_contact ? 'Profil public' : 'Profil public'}} -
-
-
+
+
+
-
+ + +
+
+
{{user.username}}
+ {{user.name}} • {{user.is_allow_contact ? 'Profil public' : 'Profil privé'}} +
{{ 'interests' }}
{{user.profile.interest}}
{{ 'CAD_softwares_mastered' }}
{{user.profile.software_mastered}}
-
-
Mes liens :
- -
+
diff --git a/app/models/stylesheet.rb b/app/models/stylesheet.rb index 69fe385e2..413a1c259 100644 --- a/app/models/stylesheet.rb +++ b/app/models/stylesheet.rb @@ -74,8 +74,9 @@ class Stylesheet < ActiveRecord::Base .pricing-panel .cta-button .btn:hover, .pricing-panel .cta-button .custom-invoice .modal-body .elements li:hover, .custom-invoice .modal-body .elements .pricing-panel .cta-button li:hover { background-color: #{Stylesheet.secondary} !important; } a.label:hover, .form-control.form-control-ui-select .select2-choices a.select2-search-choice:hover, a.label:focus, .form-control.form-control-ui-select .select2-choices a.select2-search-choice:focus { color: #{Stylesheet.primary}; } .about-picture { background: linear-gradient( rgba(255,255,255,0.12), rgba(255,255,255,0.13) ), linear-gradient( #{Stylesheet.primary_with_alpha(0.78)}, #{Stylesheet.primary_with_alpha(0.82)} ), url('/about-fablab.jpg') no-repeat; } + .social-icons > div:hover { background-color: #{Stylesheet.secondary}; } .profile-top { background: linear-gradient( rgba(255,255,255,0.12), rgba(255,255,255,0.13) ), linear-gradient(#{Stylesheet.primary_with_alpha(0.78)}, #{Stylesheet.primary_with_alpha(0.82)} ), url('/about-fablab.jpg') no-repeat; } - .profile-top-corpus { border-bottom: 45px solid #{Stylesheet.primary_with_alpha(0.5)}; } - .profile-top-social .social-links span { color: #{Stylesheet.primary} }" + .profile-top .social-links a:hover { background-color: #{Stylesheet.secondary} !important; border-color: #{Stylesheet.secondary} !important; }" + end end