Skip to content
Code-Schnipsel Gruppen Projekte
Commit 88b75e5c erstellt von Henning Leutz's avatar Henning Leutz :martial_arts_uniform:
Dateien durchsuchen

fix: wallpaper slider komplett umgebaut -> UX verbessert und Einstellungen und Popup verlegt

Übergeordneter 3733e658
No related branches found
No related tags found
Keine zugehörigen Merge Requests gefunden
Leerzeichenänderungen ausblenden
Inline Nebeneinander
bin/Controls/Slider/PromosliderSettingsOnlyContent.js
+ 133
− 137
Zeige Datei @ 88b75e5c
...@@ -409,56 +409,8 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsOnlyConten ...@@ -409,56 +409,8 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsOnlyConten
}, },
/** /**
* Open edit dialog * Dialogs
*
* @retrun {Promise}
*/ */
$openEditDialog: function () {
var data = this.$Grid.getSelectedData();
var index = this.$Grid.getSelectedIndices();
if (!data.length) {
return;
}
data = data[0];
index = index[0];
return this.$createDialog().then(function (Container) {
var CloseButton = Container.getElement(
'.quiqqer-bricks-promoslider-settings-entry-buttons button'
);
var Button = QUI.Controls.getById(CloseButton.get('data-quiid'));
var Form = Container.getElement('form');
var Left = Form.elements.left;
var Right = Form.elements.right;
var Image = Form.elements.image;
var Url = Form.elements.url;
Button.addEvent('click', function () {
this.edit(index, Left.value, Right.value, Image.value, Url.value);
moofx(Container).animate({
opacity: 0,
top : -30
}, {
duration: 250,
callback: function () {
Container.destroy();
}
});
}.bind(this));
Left.value = data.left;
Right.value = data.right;
Image.value = data.image;
Url.value = data.url;
Image.fireEvent('change');
}.bind(this));
},
/** /**
* opens the delete dialog * opens the delete dialog
...@@ -490,39 +442,88 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsOnlyConten ...@@ -490,39 +442,88 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsOnlyConten
}).open(); }).open();
}, },
/**
* Open edit dialog
*
* @retrun {Promise}
*/
$openEditDialog: function () {
var self = this,
data = this.$Grid.getSelectedData(),
index = this.$Grid.getSelectedIndices();
if (!data.length) {
return Promise.resolve();
}
data = data[0];
index = index[0];
return this.$createDialog().then(function (Dialog) {
Dialog.addEvent('onOpenAfterCreate', function () {
var Content = Dialog.getContent();
var Form = Content.getElement('form');
var Left = Form.elements.left;
var Right = Form.elements.right;
var Image = Form.elements.image;
var Url = Form.elements.url;
Left.value = data.left;
Right.value = data.right;
Image.value = data.image;
Url.value = data.url;
Image.fireEvent('change');
});
Dialog.addEvent('onSubmit', function () {
Dialog.Loader.show();
var Content = Dialog.getContent();
var Form = Content.getElement('form');
var Left = Form.elements.left;
var Right = Form.elements.right;
var Image = Form.elements.image;
var Url = Form.elements.url;
self.edit(index, Left.value, Right.value, Image.value, Url.value);
Dialog.close();
});
Dialog.setAttribute('title', QUILocale.get(lg, 'quiqqer.bricks.promoslider.editialog.title'));
Dialog.open();
});
},
/** /**
* *
* @returns {Promise} * @returns {Promise}
*/ */
$openAddDialog: function () { $openAddDialog: function () {
return this.$createDialog().then(function (Container) { var self = this;
var CloseButton = Container.getElement(
'.quiqqer-bricks-promoslider-settings-entry-buttons button'
);
var Button = QUI.Controls.getById(CloseButton.get('data-quiid')); return this.$createDialog().then(function (Dialog) {
Dialog.addEvent('onSubmit', function () {
Dialog.Loader.show();
Button.addEvent('click', function () { var Content = Dialog.getContent();
var Form = Container.getElement('form'); var Form = Content.getElement('form');
var Left = Form.elements.left; var Left = Form.elements.left;
var Right = Form.elements.right; var Right = Form.elements.right;
var Image = Form.elements.image; var Image = Form.elements.image;
var Url = Form.elements.url; var Url = Form.elements.url;
this.add(Left.value, Right.value, Image.value, Url.value); self.add(Left.value, Right.value, Image.value, Url.value);
moofx(Container).animate({ Dialog.close();
opacity: 0, });
top : -30
}, { Dialog.open();
duration: 250, });
callback: function () {
Container.destroy();
}
});
}.bind(this));
}.bind(this));
}, },
/** /**
...@@ -531,79 +532,74 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsOnlyConten ...@@ -531,79 +532,74 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsOnlyConten
* @return {Promise} * @return {Promise}
*/ */
$createDialog: function () { $createDialog: function () {
return new Promise(function (resolve) { var self = this;
var Container = new Element('div', {
html : Mustache.render(templateEntry, {
fieldImage: QUILocale.get(lg, 'quiqqer.products.control.promoslider.image'),
fieldUrl : QUILocale.get(lg, 'quiqqer.products.control.promoslider.url'),
fieldLeft : QUILocale.get(lg, 'quiqqer.products.control.promoslider.left'),
fieldRight: QUILocale.get(lg, 'quiqqer.products.control.promoslider.right')
}),
'class': 'quiqqer-bricks-promoslider-settings-entry'
}).inject(this.getElm());
var Close = Container.getElement(
'.quiqqer-bricks-promoslider-settings-entry-close'
);
var Buttons = Container.getElement(
'.quiqqer-bricks-promoslider-settings-entry-buttons'
);
var Text = Container.getElement('.field-description');
Text.getParent().setStyles({
height: 100
});
Close.addEvent('click', function () { return new Promise(function (resolve) {
moofx(Container).animate({ var Dialog = new QUIConfirm({
opacity: 0, title : QUILocale.get(lg, 'quiqqer.bricks.promoslider.adddialog.title'),
top : -30 icon : 'fa fa-edit',
}, { maxWidth : 800,
duration: 250, maxHeight: 600,
callback: function () { autoclose: false,
Container.destroy(); events : {
onOpen: function (Win) {
Win.Loader.show();
Win.getContent().set('html', '');
var Container = new Element('div', {
html : Mustache.render(templateEntry, {
fieldImage : QUILocale.get(lg, 'quiqqer.bricks.promoslider.create.image'),
fieldUrl : QUILocale.get(lg, 'quiqqer.bricks.promoslider.create.url'),
fieldTitle : QUILocale.get(lg, 'quiqqer.bricks.promoslider.create.title'),
fieldDescription: QUILocale.get(lg, 'quiqqer.bricks.promoslider.create.text'),
fieldType : QUILocale.get(lg, 'quiqqer.bricks.promoslider.create.align'),
fieldLeft : QUILocale.get(lg, 'quiqqer.products.control.promoslider.left'),
fieldRight : QUILocale.get(lg, 'quiqqer.products.control.promoslider.right')
}),
'class': 'quiqqer-bricks-promoslider-settings-entry'
}).inject(Win.getContent());
var Text = Container.getElement('.field-description');
Text.getParent().setStyles({
height: 100
});
QUI.parse(Container).then(function () {
return ControlsUtils.parse(Container);
}).then(function () {
var controls = QUI.Controls.getControlsInElement(Container),
project = self.getAttribute('project');
controls.each(function (Control) {
if (Control === self) {
return;
}
if ("setProject" in Control) {
Control.setProject(project);
}
});
Win.fireEvent('openAfterCreate', [Win]);
moofx(Container).animate({
opacity: 1,
top : 0
}, {
duration: 250,
callback: function () {
resolve(Container);
Win.Loader.hide();
}
});
});
} }
});
});
new QUIButton({
text : QUILocale.get('quiqqer/system', 'accept'),
styles: {
'float': 'none'
} }
}).inject(Buttons); });
QUI.parse(Container).then(function () {
return ControlsUtils.parse(Container);
}).then(function () {
var controls = QUI.Controls.getControlsInElement(Container),
project = this.getAttribute('project');
controls.each(function (Control) {
if (Control === this) {
return;
}
if ("setProject" in Control) { resolve(Dialog);
Control.setProject(project); });
}
}.bind(this));
moofx(Container).animate({
opacity: 1,
top : 0
}, {
duration: 250,
callback: function () {
resolve(Container);
}
});
}.bind(this));
}.bind(this));
} }
}); });
}); });
\ No newline at end of file
bin/Controls/Slider/PromosliderSettingsOnlyContentEntry.html
+ 49
− 43
Zeige Datei @ 88b75e5c
<div class="quiqqer-bricks-promoslider-settings-entry-header">
<div class="quiqqer-bricks-promoslider-settings-entry-close">
<span class="fa fa-remove"></span>
</div>
</div>
<form name="quiqqer-bricks-promoslider-settings-entry" <form name="quiqqer-bricks-promoslider-settings-entry"
class="quiqqer-bricks-promoslider-settings-entry-form" class="quiqqer-bricks-promoslider-settings-entry-form"
> >
<label class="field-container"> <table class="data-table data-table-flexbox">
<span class="field-container-item"> <tbody>
{{fieldImage}} <tr>
</span> <td>
<span class="field-container-field"> <label class="field-container">
<input name="image" class="field-image media-image"/> <span class="field-container-item">
</span> {{fieldImage}}
</label> </span>
<input name="image" class="field-container-field field-image media-image"/>
<label class="field-container"> </label>
<span class="field-container-item"> </td>
{{fieldUrl}} </tr>
</span> <tr>
<span class="field-container-field"> <td>
<input name="url" data-qui="controls/projects/project/site/Input"/> <label class="field-container">
</span> <span class="field-container-item">
</label> {{fieldUrl}}
</span>
<label class="field-container"> <input name="url" class="field-container-field"
<span class="field-container-item"> data-qui="controls/projects/project/site/Input"/>
{{fieldLeft}} </label>
</span> </td>
<input name="left" class="field-container-field field-description" </tr>
data-qui="controls/editors/Input" <tr>
/> <td>
</label> <label class="field-container">
<span class="field-container-item">
<label class="field-container"> {{fieldLeft}}
<span class="field-container-item"> </span>
{{fieldRight}} <input name="left" class="field-container-field field-description"
</span> data-qui="controls/editors/Input"
<input name="right" class="field-container-field field-description" />
data-qui="controls/editors/Input" </label>
/> </td>
</label> </tr>
<tr>
<td>
<label class="field-container">
<span class="field-container-item">
{{fieldRight}}
</span>
<input name="right" class="field-container-field field-description"
data-qui="controls/editors/Input"
/>
</label>
</td>
</tr>
</tbody>
</table>
</form> </form>
<div class="quiqqer-bricks-promoslider-settings-entry-buttons"></div>
\ No newline at end of file
0% oder .
You are about to add 0 people to the discussion. Proceed with caution.
Bearbeitung dieser Nachricht zuerst beenden!
Bitte registrieren oder zum Kommentieren

PCSG & QUIQQER support and DEV System - GitLab