From 88b75e5c67b20e54512fa851949658cc2d5a4f2f Mon Sep 17 00:00:00 2001
From: Henning Leutz <leutz@pcsg.de>
Date: Fri, 29 Sep 2017 11:22:47 +0200
Subject: [PATCH] fix: wallpaper slider komplett umgebaut -> UX verbessert und
Einstellungen und Popup verlegt
---
.../Slider/PromosliderSettingsOnlyContent.js | 270 +++++++++---------
.../PromosliderSettingsOnlyContentEntry.html | 92 +++---
2 files changed, 182 insertions(+), 180 deletions(-)
diff --git a/bin/Controls/Slider/PromosliderSettingsOnlyContent.js b/bin/Controls/Slider/PromosliderSettingsOnlyContent.js
index 8d1fcf1..430b472 100644
--- a/bin/Controls/Slider/PromosliderSettingsOnlyContent.js
+++ b/bin/Controls/Slider/PromosliderSettingsOnlyContent.js
@@ -409,56 +409,8 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsOnlyConten
},
/**
- * Open edit dialog
- *
- * @retrun {Promise}
+ * Dialogs
*/
- $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
@@ -490,39 +442,88 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsOnlyConten
}).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}
*/
$openAddDialog: function () {
- return this.$createDialog().then(function (Container) {
- var CloseButton = Container.getElement(
- '.quiqqer-bricks-promoslider-settings-entry-buttons button'
- );
+ var self = this;
- 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 Form = Container.getElement('form');
+ 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;
- this.add(Left.value, Right.value, Image.value, Url.value);
+ self.add(Left.value, Right.value, Image.value, Url.value);
- moofx(Container).animate({
- opacity: 0,
- top : -30
- }, {
- duration: 250,
- callback: function () {
- Container.destroy();
- }
- });
- }.bind(this));
- }.bind(this));
+ Dialog.close();
+ });
+
+ Dialog.open();
+ });
},
/**
@@ -531,79 +532,74 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsOnlyConten
* @return {Promise}
*/
$createDialog: function () {
- return new Promise(function (resolve) {
- 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
- });
+ var self = this;
- Close.addEvent('click', function () {
- moofx(Container).animate({
- opacity: 0,
- top : -30
- }, {
- duration: 250,
- callback: function () {
- Container.destroy();
+ return new Promise(function (resolve) {
+ var Dialog = new QUIConfirm({
+ title : QUILocale.get(lg, 'quiqqer.bricks.promoslider.adddialog.title'),
+ icon : 'fa fa-edit',
+ maxWidth : 800,
+ maxHeight: 600,
+ autoclose: false,
+ 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) {
- Control.setProject(project);
- }
- }.bind(this));
-
- moofx(Container).animate({
- opacity: 1,
- top : 0
- }, {
- duration: 250,
- callback: function () {
- resolve(Container);
- }
- });
- }.bind(this));
- }.bind(this));
+ resolve(Dialog);
+ });
}
});
});
\ No newline at end of file
diff --git a/bin/Controls/Slider/PromosliderSettingsOnlyContentEntry.html b/bin/Controls/Slider/PromosliderSettingsOnlyContentEntry.html
index d833941..912d226 100644
--- a/bin/Controls/Slider/PromosliderSettingsOnlyContentEntry.html
+++ b/bin/Controls/Slider/PromosliderSettingsOnlyContentEntry.html
@@ -1,47 +1,53 @@
-<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"
class="quiqqer-bricks-promoslider-settings-entry-form"
>
- <label class="field-container">
- <span class="field-container-item">
- {{fieldImage}}
- </span>
- <span class="field-container-field">
- <input name="image" class="field-image media-image"/>
- </span>
- </label>
-
- <label class="field-container">
- <span class="field-container-item">
- {{fieldUrl}}
- </span>
- <span class="field-container-field">
- <input name="url" data-qui="controls/projects/project/site/Input"/>
- </span>
- </label>
-
- <label class="field-container">
- <span class="field-container-item">
- {{fieldLeft}}
- </span>
- <input name="left" class="field-container-field field-description"
- data-qui="controls/editors/Input"
- />
- </label>
-
- <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>
+ <table class="data-table data-table-flexbox">
+ <tbody>
+ <tr>
+ <td>
+ <label class="field-container">
+ <span class="field-container-item">
+ {{fieldImage}}
+ </span>
+ <input name="image" class="field-container-field field-image media-image"/>
+ </label>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <label class="field-container">
+ <span class="field-container-item">
+ {{fieldUrl}}
+ </span>
+ <input name="url" class="field-container-field"
+ data-qui="controls/projects/project/site/Input"/>
+ </label>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <label class="field-container">
+ <span class="field-container-item">
+ {{fieldLeft}}
+ </span>
+ <input name="left" class="field-container-field field-description"
+ data-qui="controls/editors/Input"
+ />
+ </label>
+ </td>
+ </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>
-
-<div class="quiqqer-bricks-promoslider-settings-entry-buttons"></div>
\ No newline at end of file
--
GitLab