Skip to content
Code-Schnipsel Gruppen Projekte
Commit fdecd09b 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 c4ee5687
Keine zugehörigen Branchen gefunden
Keine zugehörigen Tags gefunden
Keine zugehörigen Merge Requests gefunden
Leerzeichenänderungen ausblenden
Inline Nebeneinander
bin/Controls/Slider/PromoSliderSettings.css
+ 5
− 62
Zeige Datei @ fdecd09b
.quiqqer-bricks-promoslider-settings {
position: relative;
.quiqqer-bricks-promoslider-settings-entry-form table {
border: none;
}
.quiqqer-bricks-promoslider-settings-entry {
background: #f0f0f0;
border: 1px solid #ddd;
height: 100%;
left: 0;
overflow: auto;
opacity: 0;
position: absolute;
top: -50px;
width: 100%;
.quiqqer-bricks-promoslider-settings-entry-form td {
padding-left: 0;
padding-right: 0;
}
.quiqqer-bricks-promoslider-settings-entry-header {
background: #e1e4e9;
clear: both;
float: left;
height: 30px;
width: 100%;
}
.quiqqer-bricks-promoslider-settings-entry-close {
cursor: pointer;
line-height: 30px;
position: absolute;
right: 0;
text-align: center;
top: 0;
width: 30px;
}
.quiqqer-bricks-promoslider-settings-entry-close:hover {
background: rgba(0, 0, 0, 0.1);
}
.quiqqer-bricks-promoslider-settings-entry-form {
clear: both;
float: left;
height: calc(100% - 100px);
margin-top: 10px;
overflow: auto;
padding: 0 10px 0 10px;
width: 100%;
}
.quiqqer-bricks-promoslider-settings-entry-form .field-container-field {
background: #fff;
max-width: none;
}
.quiqqer-bricks-promoslider-settings-entry-form .field-container-item {
width: 100px;
}
.quiqqer-bricks-promoslider-settings-entry-buttons {
clear: both;
float: left;
height: 50px;
padding: 10px 0;
text-align: center;
width: 100%;
}
\ No newline at end of file
bin/Controls/Slider/PromosliderSettings.js
+ 164
− 173
Zeige Datei @ fdecd09b
......@@ -3,17 +3,6 @@
* @author www.pcsg.de (Henning Leutz)
*
* Inhaltseinstellung für Promoslider
*
* @require qui/QUI
* @require qui/controls/Control
* @require qui/controls/windows/Confirm
* @require qui/controls/buttons/Button
* @require Locale
* @require Mustache
* @require controls/grid/Grid
* @require utils/Controls
* @require text!package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsEntry.html
* @require css!package/quiqqer/bricks/bin/Controls/Slider/PromoSliderSettings.css
*/
define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [
......@@ -163,12 +152,12 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [
dataType : 'string',
width : 300
}, {
header : QUILocale.get(lg, 'quiqqer.products.control.slidesettings.type'),
header : QUILocale.get(lg, 'quiqqer.bricks.promoslider.create.align'),
dataIndex: 'type',
dataType : 'string',
width : 200
}, {
header : QUILocale.get(lg, 'quiqqer.products.control.slidesettings.url'),
header : QUILocale.get(lg, 'quiqqer.bricks.promoslider.create.url'),
dataIndex: 'url',
dataType : 'string',
width : 300
......@@ -176,10 +165,6 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [
dataIndex: 'image',
dataType : 'string',
hidden : true
}, {
header : QUILocale.get(lg, 'quiqqer.products.control.slidesettings.text'),
dataIndex: 'text',
hidden : true
}]
});
......@@ -188,19 +173,19 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [
var buttons = this.$Grid.getButtons(),
Edit = buttons.filter(function (Btn) {
return Btn.getAttribute('name') == 'edit';
return Btn.getAttribute('name') === 'edit';
})[0],
Up = buttons.filter(function (Btn) {
return Btn.getAttribute('name') == 'up';
return Btn.getAttribute('name') === 'up';
})[0],
Down = buttons.filter(function (Btn) {
return Btn.getAttribute('name') == 'down';
return Btn.getAttribute('name') === 'down';
})[0],
Delete = buttons.filter(function (Btn) {
return Btn.getAttribute('name') == 'delete';
return Btn.getAttribute('name') === 'delete';
})[0];
Up.enable();
......@@ -220,7 +205,7 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [
try {
this.$data = JSON.decode(this.$Input.value);
if (typeOf(this.$data) != 'array') {
if (typeOf(this.$data) !== 'array') {
this.$data = [];
}
......@@ -273,6 +258,10 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [
insert.type = entry.type;
}
if ("url" in entry) {
insert.url = entry.url;
}
data.push(insert);
}
......@@ -283,19 +272,19 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [
var buttons = this.$Grid.getButtons(),
Edit = buttons.filter(function (Btn) {
return Btn.getAttribute('name') == 'edit';
return Btn.getAttribute('name') === 'edit';
})[0],
Up = buttons.filter(function (Btn) {
return Btn.getAttribute('name') == 'up';
return Btn.getAttribute('name') === 'up';
})[0],
Down = buttons.filter(function (Btn) {
return Btn.getAttribute('name') == 'down';
return Btn.getAttribute('name') === 'down';
})[0],
Delete = buttons.filter(function (Btn) {
return Btn.getAttribute('name') == 'delete';
return Btn.getAttribute('name') === 'delete';
})[0];
Up.disable();
......@@ -403,7 +392,7 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [
del: function (index) {
var newList = [];
if (typeOf(index) != 'array') {
if (typeOf(index) !== 'array') {
index = [index];
}
......@@ -427,7 +416,7 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [
var controls = QUI.Controls.getControlsInElement(this.getElm());
controls.each(function (Control) {
if (Control == this) {
if (Control === this) {
return;
}
......@@ -449,7 +438,8 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [
image: gridData[i].image,
title: gridData[i].title,
text : gridData[i].text,
type : gridData[i].type
type : gridData[i].type,
url : gridData[i].url
});
}
......@@ -458,61 +448,8 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [
},
/**
* 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 Form = Container.getElement('form');
var Image = Form.elements.image;
var Title = Form.elements.title;
var Description = Form.elements.description;
var Type = Form.elements.type;
var Button = QUI.Controls.getById(CloseButton.get('data-quiid'));
Button.addEvent('click', function () {
this.edit(index, {
image: Image.value,
title: Title.value,
text : Description.value,
type : Type.value
});
moofx(Container).animate({
opacity: 0,
top : -30
}, {
duration: 250,
callback: function () {
Container.destroy();
}
});
}.bind(this));
Image.value = data.image;
Title.value = data.title;
Description.value = data.text;
Type.value = data.type;
Image.fireEvent('change');
Description.fireEvent('change');
}.bind(this));
},
/**
* opens the delete dialog
......@@ -544,45 +481,107 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [
}).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('onSubmit', function () {
Dialog.Loader.show();
var Content = Dialog.getContent();
var Form = Content.getElement('form');
var Image = Form.elements.image;
var Title = Form.elements.title;
var Description = Form.elements.description;
var Type = Form.elements.type;
var Url = Form.elements.url;
self.edit(index, {
image: Image.value,
title: Title.value,
text : Description.value,
type : Type.value,
url : Url.value
});
Dialog.close();
});
Dialog.addEvent('onOpenAfterCreate', function () {
var Content = Dialog.getContent();
var Form = Content.getElement('form');
var Image = Form.elements.image;
var Title = Form.elements.title;
var Description = Form.elements.description;
var Type = Form.elements.type;
var Url = Form.elements.url;
Image.value = data.image;
Title.value = data.title;
Description.value = data.text;
Type.value = data.type;
Url.value = data.url;
Image.fireEvent('change');
Description.fireEvent('change');
});
Dialog.setAttribute('title', QUILocale.get(lg, 'quiqqer.bricks.promoslider.editialog.title'));
Dialog.open();
});
},
/**
* opens the add dialog
*
* @return {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 Image = Form.elements.image;
var Title = Form.elements.title;
var Description = Form.elements.description;
var Type = Form.elements.type;
var Url = Form.elements.url;
this.add({
self.add({
image: Image.value,
title: Title.value,
text : Description.value,
type : Type.value
type : Type.value,
url : Url.value
});
moofx(Container).animate({
opacity: 0,
top : -30
}, {
duration: 250,
callback: function () {
Container.destroy();
}
});
}.bind(this));
}.bind(this));
Dialog.close();
});
Dialog.open();
});
},
/**
......@@ -591,80 +590,72 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettings', [
* @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.create.image'),
fieldUrl : QUILocale.get(lg, 'quiqqer.products.control.create.url'),
fieldTitle : QUILocale.get(lg, 'quiqqer.products.control.create.title'),
fieldDescription: QUILocale.get(lg, 'quiqqer.products.control.create.text'),
fieldType : QUILocale.get(lg, 'quiqqer.products.control.create.align')
}),
'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')
}),
'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);
});
}
});
});
bin/Controls/Slider/PromosliderSettingsEntry.html
+ 61
− 54
Zeige Datei @ fdecd09b
<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>
<input name="url" class="field-container-field field-description"
data-qui="controls/projects/project/site/Input"
/>
</label>
<label class="field-container">
<span class="field-container-item">
{{fieldTitle}}
</span>
<input name="title" class="field-container-field field-title"/>
</label>
<label class="field-container">
<span class="field-container-item">
{{fieldDescription}}
</span>
<input name="description" class="field-container-field field-description"
data-qui="controls/editors/Input"
/>
</label>
<label class="field-container">
<span class="field-container-item">
{{fieldType}}
</span>
<select name="type" class="field-container-field field-type">
<option value="right">Text rechts platzieren</option>
<option value="left">Text links platzieren</option>
</select>
</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 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">
{{fieldTitle}}
</span>
<input name="title" class="field-container-field"/>
</label>
</td>
</tr>
<tr>
<td>
<label class="field-container">
<span class="field-container-item">
{{fieldDescription}}
</span>
<input name="description" 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">
{{fieldType}}
</span>
<select name="type" class="field-container-field field-type">
<option value="right">Text rechts platzieren</option>
<option value="left">Text links platzieren</option>
</select>
</label>
</td>
</tr>
</tbody>
</table>
</form>
<div class="quiqqer-bricks-promoslider-settings-entry-buttons">
</div>
\ No newline at end of file
bin/Controls/Slider/PromosliderSettingsOnlyContent.js
+ 12
− 23
Zeige Datei @ fdecd09b
......@@ -3,17 +3,6 @@
* @author www.pcsg.de (Henning Leutz)
*
* Wallpaper Slider mit zwei Inhaltsbereichen
*
* @require qui/QUI
* @require qui/controls/Control
* @require qui/controls/windows/Confirm
* @require qui/controls/buttons/Button
* @require Locale
* @require Mustache
* @require controls/grid/Grid
* @require utils/Controls
* @require text!package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsOnlyContentEntry.html
* @require css!package/quiqqer/bricks/bin/Controls/Slider/PromoSliderSettings.css
*/
define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsOnlyContent', [
......@@ -185,19 +174,19 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsOnlyConten
var buttons = this.$Grid.getButtons(),
Edit = buttons.filter(function (Btn) {
return Btn.getAttribute('name') == 'edit';
return Btn.getAttribute('name') === 'edit';
})[0],
Up = buttons.filter(function (Btn) {
return Btn.getAttribute('name') == 'up';
return Btn.getAttribute('name') === 'up';
})[0],
Down = buttons.filter(function (Btn) {
return Btn.getAttribute('name') == 'down';
return Btn.getAttribute('name') === 'down';
})[0],
Delete = buttons.filter(function (Btn) {
return Btn.getAttribute('name') == 'delete';
return Btn.getAttribute('name') === 'delete';
})[0];
Up.enable();
......@@ -217,7 +206,7 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsOnlyConten
try {
this.$data = JSON.decode(this.$Input.value);
if (typeOf(this.$data) != 'array') {
if (typeOf(this.$data) !== 'array') {
this.$data = [];
}
......@@ -284,19 +273,19 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsOnlyConten
var buttons = this.$Grid.getButtons(),
Edit = buttons.filter(function (Btn) {
return Btn.getAttribute('name') == 'edit';
return Btn.getAttribute('name') === 'edit';
})[0],
Up = buttons.filter(function (Btn) {
return Btn.getAttribute('name') == 'up';
return Btn.getAttribute('name') === 'up';
})[0],
Down = buttons.filter(function (Btn) {
return Btn.getAttribute('name') == 'down';
return Btn.getAttribute('name') === 'down';
})[0],
Delete = buttons.filter(function (Btn) {
return Btn.getAttribute('name') == 'delete';
return Btn.getAttribute('name') === 'delete';
})[0];
Up.disable();
......@@ -385,7 +374,7 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsOnlyConten
del: function (index) {
var newList = [];
if (typeOf(index) != 'array') {
if (typeOf(index) !== 'array') {
index = [index];
}
......@@ -409,7 +398,7 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsOnlyConten
var controls = QUI.Controls.getControlsInElement(this.getElm());
controls.each(function (Control) {
if (Control == this) {
if (Control === this) {
return;
}
......@@ -595,7 +584,7 @@ define('package/quiqqer/bricks/bin/Controls/Slider/PromosliderSettingsOnlyConten
project = this.getAttribute('project');
controls.each(function (Control) {
if (Control == this) {
if (Control === this) {
return;
}
......
locale.xml
+ 16
− 4
Zeige Datei @ fdecd09b
......@@ -684,23 +684,35 @@ M&ouml;chten Sie die Bausteine aus der Bausteinzone entfernen?</p>]]></de>
<en><![CDATA[The slide can not be restored]]></en>
</locale>
<locale name="quiqqer.products.control.create.image">
<locale name="quiqqer.bricks.promoslider.create.image">
<de><![CDATA[Bild]]></de>
<en><![CDATA[Image]]></en>
</locale>
<locale name="quiqqer.products.control.create.title">
<locale name="quiqqer.bricks.promoslider.create.url">
<de><![CDATA[URL]]></de>
<en><![CDATA[URL]]></en>
</locale>
<locale name="quiqqer.bricks.promoslider.create.title">
<de><![CDATA[Titel]]></de>
<en><![CDATA[Title]]></en>
</locale>
<locale name="quiqqer.products.control.create.text">
<locale name="quiqqer.bricks.promoslider.create.text">
<de><![CDATA[Text]]></de>
<en><![CDATA[Text]]></en>
</locale>
<locale name="quiqqer.products.control.create.align">
<locale name="quiqqer.bricks.promoslider.create.align">
<de><![CDATA[Ausrichtung]]></de>
<en><![CDATA[Align]]></en>
</locale>
<locale name="quiqqer.bricks.promoslider.adddialog.title">
<de><![CDATA[Slide erstellen]]></de>
<en><![CDATA[Add Slide]]></en>
</locale>
<locale name="quiqqer.bricks.promoslider.editialog.title">
<de><![CDATA[Slide bearbieten]]></de>
<en><![CDATA[Edit Slide]]></en>
</locale>
</groups>
<groups name="quiqqer/bricks" datatype="js,php">
<locale name="brick.control.navigation.setting.content">
......
src/QUI/Bricks/Manager.php
+ 3
− 0
Zeige Datei @ fdecd09b
......@@ -645,6 +645,9 @@ public function saveBrick($brickId, array $brickData)
), array(
'id' => (int)$brickId
));
// @todo it is a workaround
QUI\Cache\Manager::clearAll();
}
/**
......
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