1
0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-02-19 13:54:25 +01:00

[feature] background picture of profile banner customization

This commit is contained in:
Sylvain 2016-05-18 16:15:54 +02:00
parent 420d247590
commit a66b314e7b
8 changed files with 102 additions and 6 deletions

View File

@ -1,7 +1,7 @@
'use strict'
Application.Controllers.controller "SettingsController", ["$scope", 'Setting', 'growl', 'settingsPromise', 'cgvFile', 'cguFile', 'logoFile', 'logoBlackFile', 'faviconFile', 'CSRF', '_t'
($scope, Setting, growl, settingsPromise, cgvFile, cguFile, logoFile, logoBlackFile, faviconFile, CSRF, _t) ->
Application.Controllers.controller "SettingsController", ["$scope", 'Setting', 'growl', 'settingsPromise', 'cgvFile', 'cguFile', 'logoFile', 'logoBlackFile', 'faviconFile', 'profileImageFile', 'CSRF', '_t'
($scope, Setting, growl, settingsPromise, cgvFile, cguFile, logoFile, logoBlackFile, faviconFile, profileImageFile, CSRF, _t) ->
@ -19,6 +19,7 @@ Application.Controllers.controller "SettingsController", ["$scope", 'Setting', '
logo: "/api/custom_assets"
logoBlack: "/api/custom_assets"
favicon: "/api/custom_assets"
profileImage: "/api/custom_assets"
## Form actions on the above URL
$scope.methods =
@ -27,6 +28,7 @@ Application.Controllers.controller "SettingsController", ["$scope", 'Setting', '
logo: "post"
logoBlack: "post"
favicon: "post"
profileImage: "post"
## Are we uploading the files currently (if so, display the loader)
$scope.loader =
@ -55,6 +57,7 @@ Application.Controllers.controller "SettingsController", ["$scope", 'Setting', '
$scope.customLogo = logoFile.custom_asset
$scope.customLogoBlack = logoBlackFile.custom_asset
$scope.customFavicon = faviconFile.custom_asset
$scope.profileImage = profileImageFile.custom_asset
$scope.enableMove =
name: 'booking_move_enable'
@ -136,17 +139,21 @@ Application.Controllers.controller "SettingsController", ["$scope", 'Setting', '
$scope.actionUrl.cgv += '/cgv-file' unless $scope.actionUrl.cgv.indexOf('/cgv-file') > 0
$scope.loader.cgv = false
else if content.custom_asset.name is 'logo-file'
$scope.logoFile = content.custom_asset
$scope.customLogo = content.custom_asset
$scope.methods.logo = 'put'
$scope.actionUrl.logo += '/logo-file' unless $scope.actionUrl.logo.indexOf('/logo-file') > 0
else if content.custom_asset.name is 'logo-black-file'
$scope.logoBlackFile = content.custom_asset
$scope.customLogoBlack = content.custom_asset
$scope.methods.logoBlack = 'put'
$scope.actionUrl.logoBlack += '/logo-black-file' unless $scope.actionUrl.logoBlack.indexOf('/logo-black-file') > 0
else if content.custom_asset.name is 'favicon-file'
$scope.faviconFile = content.custom_asset
$scope.customFavicon = content.custom_asset
$scope.methods.favicon = 'put'
$scope.actionUrl.favicon += '/favicon-file' unless $scope.actionUrl.favicon.indexOf('/favicon-file') > 0
else if content.custom_asset.name is 'profile-image-file'
$scope.profileImage = content.custom_asset
$scope.methods.profileImage = 'put'
$scope.actionUrl.profileImage += '/profile-image-file' unless $scope.actionUrl.profileImage.indexOf('/profile-image-file') > 0
@ -188,6 +195,9 @@ Application.Controllers.controller "SettingsController", ["$scope", 'Setting', '
if faviconFile.custom_asset
$scope.methods.favicon = 'put'
$scope.actionUrl.favicon += '/favicon-file'
if profileImageFile.custom_asset
$scope.methods.profileImage = 'put'
$scope.actionUrl.profileImage += '/profile-image-file'
# init the controller (call at the end !)

View File

@ -846,6 +846,9 @@ angular.module('application.router', ['ui.router']).
faviconFile: ['CustomAsset', (CustomAsset) ->
CustomAsset.get({name: 'favicon-file'}).$promise
]
profileImageFile: ['CustomAsset', (CustomAsset) ->
CustomAsset.get({name: 'profile-image-file'}).$promise
]
translations: [ 'Translations', (Translations) ->
Translations.query('app.admin.settings').$promise
]

View File

@ -468,6 +468,49 @@ body.container{
}
}
.custom-profile-image-container {
max-width: 100%;
height: 100%;
.custom-profile-image {
height: 240px;
width: 100%;
position: relative;
background-size: cover;
background-repeat: no-repeat;
border: 1px dashed #c4c4c4;
border-radius: 0.7em;
padding: 1.6em;
margin-left: 1em;
img {
display: block;
width: auto;
max-height: 185px;
max-width: 100%;
margin:auto;
}
&:hover .tools-box {
opacity: 1;
}
.tools-box {
opacity: 0;
position: absolute;
bottom: 10px;
left: 0;
right: 0;
text-align: center;
}
}
.bg-dark {
background-color: #000;
opacity: 0.9;
}
}
.flash-message {
position: absolute;
top: 1%;

View File

@ -297,6 +297,34 @@
</form>
</div>
</div>
<div class="row m-t">
<div class="col-md-4">
<form class="custom-profile-image-container" method="post" action="{{actionUrl.profileImage}}" novalidate name="profileImageForm" ng-upload="submited(content)" upload-options-enable-rails-csrf="true" unsaved-warning-form>
<input type="hidden" name="custom_asset[name]" value="profile-image-file">
<input name="_method" type="hidden" ng-value="methods.profileImage">
<h3 class="m-l" translate>{{ 'background_picture_of_the_profile_banner' }}</h3>
<div class="custom-profile-image" style="background-image: url({{profileImage}});">
<img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:FontAwesome/icon-xs" bs-holder ng-show="!profileImage" class="img-responsive">
<img base-sixty-four-image="profileImage" ng-show="profileImage && profileImage.base64">
<img ng-src="{{profileImage.custom_asset_file_attributes.attachment_url}}" alt="{{profileImage.custom_asset_file_attributes.attachment}}" ng-show="profileImage && profileImage.custom_asset_file_attributes" />
<div class="tools-box">
<div class="btn-group">
<div class="btn btn-default btn-file">
<i class="fa fa-edit"></i> {{ 'change_the_profile_banner' | translate }}
<input type="file"
accept="image/png,image/x-png"
name="custom_asset[custom_asset_file_attributes][attachment]"
ng-model="profileImage"
base-sixty-four-input
required />
</div>
</div>
</div>
</div>
<button name="button" type="submit" class="btn btn-warning m-t m-l" ng-disabled="profileImageForm.$invalid" translate>{{ 'save' }}</button>
</form>
</div>
</div>
</div>
</div>
</uib-tab>

View File

@ -7,4 +7,12 @@ class CustomAsset < ActiveRecord::Base
asset = CustomAsset.find_by(name: name)
asset.custom_asset_file.attachment_url if asset and asset.custom_asset_file
end
after_update :update_stylesheet if :viewable_changed?
def update_stylesheet
if %w(profile-image-file).include? self.name
Stylesheet.first.rebuild!
end
end
end

View File

@ -75,7 +75,7 @@ class Stylesheet < ActiveRecord::Base
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 { 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('#{CustomAsset.get_url('profile-image-file')}') no-repeat; }
.profile-top .social-links a:hover { background-color: #{Stylesheet.secondary} !important; border-color: #{Stylesheet.secondary} !important; }"
end

View File

@ -439,6 +439,8 @@ en:
primary: "Primary"
secondary_colour: "Secondary colour:"
secondary: "Secondary"
background_picture_of_the_profile_banner: "Background picture of the profile banner"
change_the_profile_banner: "Change the profile banner"
home_page: "Home page"
news_of_the_home_page: "News of the home page:"
type_your_news_here: "Type your news here"

View File

@ -439,6 +439,8 @@ fr:
primary: "Primaire"
secondary_colour: "Couleur secondaire :"
secondary: "Secondaire"
background_picture_of_the_profile_banner: "Image de fond du bandeau de profil"
change_the_profile_banner: "Changer le bandeau de profil"
home_page: "Page d'accueil"
news_of_the_home_page: "Brève de la page d'accueil :"
type_your_news_here: "Saisir votre brève ici"