L-electron-Rare/moodle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MDL-44487 Atto: Restrict size of image preview in popup.

Browse Source 
Instead of only restricting the width, we set a max-width and max-height in css.
We also make the dialog a bit wider so it looks better in clean.
This commit is contained in:
Damyon Wiese
2014-03-26 10:01:49 +08:00
parent 6246779510
commit da00661d1f
5 changed files with 39 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/editor/atto/plugins/image/styles.css
+4
View File
@@ -0,0 +1,4 @@
.atto_image_preview {
max-width: 150px;
max-height: 150px;
}
lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-debug.js
Vendored
+11 -6
View File
@@ -133,7 +133,7 @@ var COMPONENTNAME = 'atto_image',
'<label class="sameline" for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label>' +
'<select class="{{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">' +
'{{#each alignments}}' +
'<option value="{{value}}">{{get_string str ../component}}</option>' +
'<option value="{{value}}:{{name}};">{{get_string str ../component}}</option>' +
'{{/each}}' +
'</select>' +
'<br/>' +
@@ -141,7 +141,7 @@ var COMPONENTNAME = 'atto_image',
// Add the image preview.
'<label for="{{elementid}}_{{CSS.IMAGEPREVIEW}}">{{get_string "preview" component}}</label>' +
'<div class="mdl-align">' +
'<img src="#" width="200" class="{{CSS.IMAGEPREVIEW}}" id="{{elementid}}_{{CSS.IMAGEPREVIEW}}" alt="" style="display: none;"/>' +
'<img src="#" class="{{CSS.IMAGEPREVIEW}}" id="{{elementid}}_{{CSS.IMAGEPREVIEW}}" alt="" style="display: none;"/>' +
'<br/>' +
// Add the submit button and close the form.
@@ -210,6 +210,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
var dialogue = this.getDialogue({
headerContent: M.util.get_string('createimage', COMPONENTNAME),
width: '480px',
focusAfterHide: true
});
@@ -296,7 +297,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
}
if (properties.align) {
properties.align.apply(img);
form.one('.' + CSS.INPUTALIGNMENT).set('value', properties.align);
}
if (properties.display) {
img.setStyle('display', properties.display);
@@ -341,7 +342,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
// Get the current selection.
images = this.get('host').getSelectedNodes(),
i, width, height, style;
i, width, height, style, css;
if (images) {
images = images.filter('img');
@@ -362,8 +363,9 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
properties.height = height;
}
for (i in ALIGNMENTS) {
if (ALIGNMENTS[i].name === style) {
properties.align = ALIGNMENTS[i];
css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
if (style.replace(' ', '').indexOf(css) !== -1) {
properties.align = css;
break;
}
}
@@ -406,6 +408,9 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
input = self._form.one('.' + CSS.IMAGEPREVIEW);
input.set('src', this.src);
input.setStyle('display', 'inline');
// Centre the dialogue once the preview image has loaded.
self.getDialogue().centerDialogue();
};
image.src = input.get('value');
}
lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button-min.js
Vendored
+2 -2
View File
File diff suppressed because one or more lines are too long
lib/editor/atto/plugins/image/yui/build/moodle-atto_image-button/moodle-atto_image-button.js
Vendored
+11 -6
View File
@@ -133,7 +133,7 @@ var COMPONENTNAME = 'atto_image',
'<label class="sameline" for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label>' +
'<select class="{{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">' +
'{{#each alignments}}' +
'<option value="{{value}}">{{get_string str ../component}}</option>' +
'<option value="{{value}}:{{name}};">{{get_string str ../component}}</option>' +
'{{/each}}' +
'</select>' +
'<br/>' +
@@ -141,7 +141,7 @@ var COMPONENTNAME = 'atto_image',
// Add the image preview.
'<label for="{{elementid}}_{{CSS.IMAGEPREVIEW}}">{{get_string "preview" component}}</label>' +
'<div class="mdl-align">' +
'<img src="#" width="200" class="{{CSS.IMAGEPREVIEW}}" id="{{elementid}}_{{CSS.IMAGEPREVIEW}}" alt="" style="display: none;"/>' +
'<img src="#" class="{{CSS.IMAGEPREVIEW}}" id="{{elementid}}_{{CSS.IMAGEPREVIEW}}" alt="" style="display: none;"/>' +
'<br/>' +
// Add the submit button and close the form.
@@ -210,6 +210,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
var dialogue = this.getDialogue({
headerContent: M.util.get_string('createimage', COMPONENTNAME),
width: '480px',
focusAfterHide: true
});
@@ -296,7 +297,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
}
if (properties.align) {
properties.align.apply(img);
form.one('.' + CSS.INPUTALIGNMENT).set('value', properties.align);
}
if (properties.display) {
img.setStyle('display', properties.display);
@@ -341,7 +342,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
// Get the current selection.
images = this.get('host').getSelectedNodes(),
i, width, height, style;
i, width, height, style, css;
if (images) {
images = images.filter('img');
@@ -362,8 +363,9 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
properties.height = height;
}
for (i in ALIGNMENTS) {
if (ALIGNMENTS[i].name === style) {
properties.align = ALIGNMENTS[i];
css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
if (style.replace(' ', '').indexOf(css) !== -1) {
properties.align = css;
break;
}
}
@@ -406,6 +408,9 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
input = self._form.one('.' + CSS.IMAGEPREVIEW);
input.set('src', this.src);
input.setStyle('display', 'inline');
// Centre the dialogue once the preview image has loaded.
self.getDialogue().centerDialogue();
};
image.src = input.get('value');
}
lib/editor/atto/plugins/image/yui/src/button/js/button.js
Vendored
+11 -6
View File
@@ -131,7 +131,7 @@ var COMPONENTNAME = 'atto_image',
'<label class="sameline" for="{{elementid}}_{{CSS.INPUTALIGNMENT}}">{{get_string "alignment" component}}</label>' +
'<select class="{{CSS.INPUTALIGNMENT}}" id="{{elementid}}_{{CSS.INPUTALIGNMENT}}">' +
'{{#each alignments}}' +
'<option value="{{value}}">{{get_string str ../component}}</option>' +
'<option value="{{value}}:{{name}};">{{get_string str ../component}}</option>' +
'{{/each}}' +
'</select>' +
'<br/>' +
@@ -139,7 +139,7 @@ var COMPONENTNAME = 'atto_image',
// Add the image preview.
'<label for="{{elementid}}_{{CSS.IMAGEPREVIEW}}">{{get_string "preview" component}}</label>' +
'<div class="mdl-align">' +
'<img src="#" width="200" class="{{CSS.IMAGEPREVIEW}}" id="{{elementid}}_{{CSS.IMAGEPREVIEW}}" alt="" style="display: none;"/>' +
'<img src="#" class="{{CSS.IMAGEPREVIEW}}" id="{{elementid}}_{{CSS.IMAGEPREVIEW}}" alt="" style="display: none;"/>' +
'<br/>' +
// Add the submit button and close the form.
@@ -208,6 +208,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
var dialogue = this.getDialogue({
headerContent: M.util.get_string('createimage', COMPONENTNAME),
width: '480px',
focusAfterHide: true
});
@@ -294,7 +295,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
}
if (properties.align) {
properties.align.apply(img);
form.one('.' + CSS.INPUTALIGNMENT).set('value', properties.align);
}
if (properties.display) {
img.setStyle('display', properties.display);
@@ -339,7 +340,7 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
// Get the current selection.
images = this.get('host').getSelectedNodes(),
i, width, height, style;
i, width, height, style, css;
if (images) {
images = images.filter('img');
@@ -360,8 +361,9 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
properties.height = height;
}
for (i in ALIGNMENTS) {
if (ALIGNMENTS[i].name === style) {
properties.align = ALIGNMENTS[i];
css = ALIGNMENTS[i].value + ':' + ALIGNMENTS[i].name + ';';
if (style.replace(' ', '').indexOf(css) !== -1) {
properties.align = css;
break;
}
}
@@ -404,6 +406,9 @@ Y.namespace('M.atto_image').Button = Y.Base.create('button', Y.M.editor_atto.Edi
input = self._form.one('.' + CSS.IMAGEPREVIEW);
input.set('src', this.src);
input.setStyle('display', 'inline');
// Centre the dialogue once the preview image has loaded.
self.getDialogue().centerDialogue();
};
image.src = input.get('value');
}