mirror of
https://github.com/LaCasemate/fab-manager.git
synced 2024-12-01 12:24:28 +01:00
reorganize profile header zone
This commit is contained in:
Sylvain
parent
93edd6eaa8
commit
0061c3dca6
@ -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()
|
||||
|
||||
|
||||
]
|
||||
|
||||
@ -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()
|
||||
|
||||
]
|
||||
|
||||
18
app/assets/javascripts/directives/socialLink.coffee.erb
Normal file
18
app/assets/javascripts/directives/socialLink.coffee.erb
Normal file
@ -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)'
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
6
app/assets/javascripts/services/socialNetworks.coffee
Normal file
6
app/assets/javascripts/services/socialNetworks.coffee
Normal file
@ -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']
|
||||
]
|
||||
@ -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; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -431,7 +431,7 @@
|
||||
<div ng-click="social.vimeo = !social.vimeo" ng-hide="social.vimeo || user.profile.vimeo"><i class="fa fa-vimeo fa-2x"></i></div>
|
||||
<div ng-click="social.dailymotion = !social.dailymotion" ng-hide="social.dailymotion || user.profile.dailymotion"><img src="<%= asset_path('social/dailymotion.png') %>" alt="d" class="fa-img contrast-250 fa-2x"/></div>
|
||||
<div ng-click="social.github = !social.github" ng-hide="social.github || user.profile.github"><i class="fa fa-github fa-2x"></i></div>
|
||||
<div ng-click="social.echosciences = !social.echosciences" ng-hide="social.echosciences || user.profile.echosciences"><img src="<%= asset_path('social/echosciences.png') %>" alt="d" class="fa-img contrast-250 fa-2x"/></div>
|
||||
<div ng-click="social.echosciences = !social.echosciences" ng-hide="social.echosciences || user.profile.echosciences"><img src="<%= asset_path('social/echosciences.png') %>" alt="E" class="fa-img contrast-250 fa-2x"/></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
4
app/assets/templates/shared/_social_link.html
Normal file
4
app/assets/templates/shared/_social_link.html
Normal file
@ -0,0 +1,4 @@
|
||||
<a ng-show="user.profile[network]" ng-href="{{user.profile[network]}}" target="_blank">
|
||||
<img ng-src="{{image}}" alt="{{altText}}" class="fa-img" ng-show="image"/>
|
||||
<i class="fa fa-{{network.replace('_', '-')}}" ng-hide="image"></i>
|
||||
</a>
|
||||
@ -1,31 +1,40 @@
|
||||
<div class="row no-gutter wrapper">
|
||||
|
||||
<div class="col-lg-12">
|
||||
<section class="profile-top text-white widget panel b-a m">
|
||||
<div class="profile-top-head">
|
||||
<div class="text-xl font-ebold upper">{{user.name}}</div>
|
||||
<small class="font-bold">{{user.username}}</small> • <small class="upper">{{user.is_allow_contact ? 'Profil public' : 'Profil public'}}</small>
|
||||
</div>
|
||||
<div class="row profile-top-corpus">
|
||||
<div class="thumb-lg avatar thumb-140-wrapper img col-md-2">
|
||||
<section class="profile-top text-white widget panel b-a m row">
|
||||
<div class="col-lg-2 profile-top-pictos">
|
||||
<div class="thumb-lg avatar thumb-140-wrapper img m-b-md">
|
||||
<fab-user-avatar ng-model="user.profile.user_avatar" avatar-class="thumb-140"></fab-user-avatar>
|
||||
</div>
|
||||
<div class="m-l-lg col-md-8 text-italic">
|
||||
<div class="social-links" ng-if="social.networks.length <= 4">
|
||||
<ng-repeat ng-repeat="network in social.networks" >
|
||||
<social-link network="{{network}}" user="user"></social-link>
|
||||
</ng-repeat>
|
||||
</div>
|
||||
<div class="social-links" ng-if="social.networks.length > 4">
|
||||
<ng-repeat ng-repeat="network in social.networks.slice(0,3)">
|
||||
<social-link network="{{network}}" user="user"></social-link>
|
||||
</ng-repeat>
|
||||
<a href="#" ng-click="social.showAllLinks = !social.showAllLinks">
|
||||
<i class="fa fa-plus" ng-show="!social.showAllLinks"></i>
|
||||
<i class="fa fa-minus" ng-show="social.showAllLinks"></i>
|
||||
</a>
|
||||
<ng-repeat ng-repeat="network in social.networks.slice(3)" ng-show="social.showAllLinks">
|
||||
<social-link network="{{network}}" user="user"></social-link>
|
||||
</ng-repeat>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-7 profile-top-infos">
|
||||
<div class="text-xl font-ebold upper">{{user.username}}</div>
|
||||
<small class="font-bold">{{user.name}}</small> • <small class="upper">{{user.is_allow_contact ? 'Profil public' : 'Profil privé'}}</small>
|
||||
<div class="text-italic">
|
||||
<span class="font-bold" translate>{{ 'interests' }}</span>
|
||||
<div class="m-b">{{user.profile.interest}}</div>
|
||||
<span class="font-bold" translate>{{ 'CAD_softwares_mastered' }}</span>
|
||||
<div>{{user.profile.software_mastered}}</div>
|
||||
</div>
|
||||
<div class="col-md-2 profile-top-social">
|
||||
<div class="upper text-sm m-t-xl m-b">Mes liens :</div>
|
||||
<div class="social-links">
|
||||
<span><i class="fa fa-facebook"></i></span>
|
||||
<span><i class="fa fa-twitter"></i></span>
|
||||
<span><i class="fa fa-google-plus"></i></span>
|
||||
<span><i class="fa fa-plus"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 profile-top-badge"></div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user