External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-15 03:40:42 -03: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
Show Stats 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;
}
.Form-filePicker--selectedFile {
margin: 12px 0;
}
.Form-filePicker--thumbnail {
height: 40px;
}
// Messagebar for system auditor role notifications
.Section-messageBar {
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
// Can eventually expand to handle all uploads with different endpoints and handlers
//
.directive('imageUpload', ['ConfigurationUtils', 'i18n',
function(ConfigurationUtils, i18n) {
.directive('imageUpload', ['ConfigurationUtils', 'i18n', '$rootScope',
function(ConfigurationUtils, i18n, $rootScope) {
var browseText = i18n._('BROWSE'),
placeholderText = i18n._('Choose file'),
uploadedText = i18n._('Custom logo has been uploaded'),
uploadedText = i18n._('Current Image: '),
removeText = i18n._('REMOVE');
return {
@ -146,14 +146,12 @@ function(ConfigurationUtils, i18n) {
<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)"/>
</div>
<!-- Update when API supports file name saving
<div ng-if="imagePresent" class="Form-filePicker--selectedFile">
${uploadedText}
</div>-->
<!-- Thumbnail feature
<div class="thumbnail">
<img src="{{image}}" alt="Current logo">
</div> -->
${uploadedText}
<img data-ng-src="{{imageData}}" alt="Current logo" class="Form-filePicker--thumbnail">
</div>
<div class="error" id="filePickerError"></div>`,
link: function(scope) {
@ -162,11 +160,14 @@ function(ConfigurationUtils, i18n) {
var filePickerError = angular.element(document.getElementById('filePickerError'));
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.imagePresent = global.$AnsibleConfig.custom_logo;
scope.imageData = $rootScope.custom_logo;
});
scope.update = function(e) {
if(scope.$parent[fieldKey]) {
e.preventDefault();