From a66b314e7bc1ed24232403577cf6b44ff1e0fb97 Mon Sep 17 00:00:00 2001 From: Sylvain Date: Wed, 18 May 2016 16:15:54 +0200 Subject: [PATCH] [feature] background picture of profile banner customization --- .../controllers/admin/settings.coffee | 20 ++++++--- app/assets/javascripts/router.coffee.erb | 3 ++ app/assets/stylesheets/app.layout.scss | 43 +++++++++++++++++++ .../templates/admin/settings/index.html | 28 ++++++++++++ app/models/custom_asset.rb | 8 ++++ app/models/stylesheet.rb | 2 +- config/locales/app.admin.en.yml | 2 + config/locales/app.admin.fr.yml | 2 + 8 files changed, 102 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/controllers/admin/settings.coffee b/app/assets/javascripts/controllers/admin/settings.coffee index ff84c7170..f46a279d6 100644 --- a/app/assets/javascripts/controllers/admin/settings.coffee +++ b/app/assets/javascripts/controllers/admin/settings.coffee @@ -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 !) diff --git a/app/assets/javascripts/router.coffee.erb b/app/assets/javascripts/router.coffee.erb index 7019a93f6..bfb29664f 100644 --- a/app/assets/javascripts/router.coffee.erb +++ b/app/assets/javascripts/router.coffee.erb @@ -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 ] diff --git a/app/assets/stylesheets/app.layout.scss b/app/assets/stylesheets/app.layout.scss index cf0f4dbcd..6d950eabb 100644 --- a/app/assets/stylesheets/app.layout.scss +++ b/app/assets/stylesheets/app.layout.scss @@ -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%; diff --git a/app/assets/templates/admin/settings/index.html b/app/assets/templates/admin/settings/index.html index 2fa5158c7..821060501 100644 --- a/app/assets/templates/admin/settings/index.html +++ b/app/assets/templates/admin/settings/index.html @@ -297,6 +297,34 @@ +
+
+
+ + +

{{ 'background_picture_of_the_profile_banner' }}

+
+ + + {{profileImage.custom_asset_file_attributes.attachment}} +
+
+
+ {{ 'change_the_profile_banner' | translate }} + +
+
+
+
+ +
+
+
diff --git a/app/models/custom_asset.rb b/app/models/custom_asset.rb index ec6f71be0..cb47e9bd3 100644 --- a/app/models/custom_asset.rb +++ b/app/models/custom_asset.rb @@ -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 diff --git a/app/models/stylesheet.rb b/app/models/stylesheet.rb index 413a1c259..0d989e448 100644 --- a/app/models/stylesheet.rb +++ b/app/models/stylesheet.rb @@ -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 diff --git a/config/locales/app.admin.en.yml b/config/locales/app.admin.en.yml index f0964ee7a..6320a3d4f 100644 --- a/config/locales/app.admin.en.yml +++ b/config/locales/app.admin.en.yml @@ -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" diff --git a/config/locales/app.admin.fr.yml b/config/locales/app.admin.fr.yml index 6cbe34d37..ed7e74af6 100644 --- a/config/locales/app.admin.fr.yml +++ b/config/locales/app.admin.fr.yml @@ -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"