External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-04-06 18:49:21 -02:30
Code Issues Packages Projects Releases Wiki Activity

Added thumbnail display for custom logo upload

Browse Source
This commit is contained in:
Ken Hoes
2017-02-03 13:15:07 -05:00
parent a9621d579d
commit 44e436ca93
2 changed files with 20 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
awx/ui/client/src/configuration/configuration.block.less
View File

@@ -85,6 +85,14 @@ input#filePickerText {
background-color: #fff; background-color: #fff;
} }
.Form-filePicker--selectedFile {
margin: 12px 0;
}
.Form-filePicker--thumbnail {
height: 40px;
}
// Messagebar for system auditor role notifications // Messagebar for system auditor role notifications
.Section-messageBar { .Section-messageBar {
width: 120%; width: 120%;

23
awx/ui/client/src/shared/directives.js
View File

@@ -128,11 +128,11 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'JobsHelper'])
// Accepts image and returns base64 information with basic validation // Accepts image and returns base64 information with basic validation
// Can eventually expand to handle all uploads with different endpoints and handlers // Can eventually expand to handle all uploads with different endpoints and handlers
// //
.directive('imageUpload', ['ConfigurationUtils', 'i18n', .directive('imageUpload', ['ConfigurationUtils', 'i18n', '$rootScope',
function(ConfigurationUtils, i18n) { function(ConfigurationUtils, i18n, $rootScope) {
var browseText = i18n._('BROWSE'), var browseText = i18n._('BROWSE'),
placeholderText = i18n._('Choose file'), placeholderText = i18n._('Choose file'),
uploadedText = i18n._('Custom logo has been uploaded'), uploadedText = i18n._('Current Image: '),
removeText = i18n._('REMOVE'); removeText = i18n._('REMOVE');
return { return {
@@ -146,14 +146,12 @@ function(ConfigurationUtils, i18n) {
<input type="text" class="form-control Form-filePicker--textBox" id="filePickerText" placeholder="${placeholderText}" readonly> <input type="text" class="form-control Form-filePicker--textBox" id="filePickerText" placeholder="${placeholderText}" readonly>
<input type="file" name="file" class="Form-filePicker" id="filePicker" onchange="angular.element(this).scope().fileChange(this.files)"/> <input type="file" name="file" class="Form-filePicker" id="filePicker" onchange="angular.element(this).scope().fileChange(this.files)"/>
</div> </div>
<!-- Update when API supports file name saving
<div ng-if="imagePresent" class="Form-filePicker--selectedFile"> <div ng-if="imagePresent" class="Form-filePicker--selectedFile">
${uploadedText} ${uploadedText}
</div>--> <img data-ng-src="{{imageData}}" alt="Current logo" class="Form-filePicker--thumbnail">
<!-- Thumbnail feature </div>
<div class="thumbnail">
<img src="{{image}}" alt="Current logo">
</div> -->
<div class="error" id="filePickerError"></div>`, <div class="error" id="filePickerError"></div>`,
link: function(scope) { link: function(scope) {
@@ -162,11 +160,14 @@ function(ConfigurationUtils, i18n) {
var filePickerError = angular.element(document.getElementById('filePickerError')); var filePickerError = angular.element(document.getElementById('filePickerError'));
var filePickerButton = angular.element(document.getElementById('filePickerButton')); var filePickerButton = angular.element(document.getElementById('filePickerButton'));
scope.imagePresent = global.$AnsibleConfig.custom_logo; scope.imagePresent = global.$AnsibleConfig.custom_logo || false;
scope.imageData = $rootScope.custom_logo;
scope.$on('loginUpdated', function() { scope.$on('loginUpdated', function() {
scope.imagePresent = global.$AnsibleConfig.custom_logo; scope.imagePresent = global.$AnsibleConfig.custom_logo;
scope.imageData = $rootScope.custom_logo;
}); });
scope.update = function(e) { scope.update = function(e) {
if(scope.$parent[fieldKey]) { if(scope.$parent[fieldKey]) {
e.preventDefault(); e.preventDefault();