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
parent
420d247590
commit
a66b314e7b
@ -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 !)
|
||||
|
||||
@ -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
|
||||
]
|
||||
|
||||
@ -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%;
|
||||
|
||||
@ -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:/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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user