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

refactor: feat: panel 1200px responsive

Übergeordneter 3d30a472
Keine zugehörigen Branchen gefunden
Keine zugehörigen Tags gefunden
1 Merge Request!26refactor: feat: panel 1200px responsive
Leerzeichenänderungen ausblenden
Inline Nebeneinander
qui/controls/desktop/Panel.css
+ 23
− 0
Zeige Datei @ 64ed2e7d
......@@ -296,3 +296,26 @@
.qui-panel-categories .qui-button .image-container {
font-size: 20px;
}
/* response mode
================================================================= */
@media screen and (max-width: 1200px) {
.qui-panel-categories {
width: 50px;
}
.qui-panel-width-categories .qui-panel-content {
width: calc(100% - 50px);
}
.qui-panel-categories .qui-toolbar-container,
.qui-panel-categories .qui-button {
width: 50px;
}
.qui-panel-categories .qui-button .qui-button-text {
display: none;
}
}
qui/controls/desktop/Panel.js
+ 83
− 56
Zeige Datei @ 64ed2e7d
......@@ -86,23 +86,23 @@ define('qui/controls/desktop/Panel', [
this.Loader = new Loader();
this.$Elm = null;
this.$Header = null;
this.$Title = null;
this.$Footer = null;
this.$Elm = null;
this.$Header = null;
this.$Title = null;
this.$Footer = null;
this.$Content = null;
this.$Buttons = null;
this.$Categories = null;
this.$Breadcrumb = null;
this.$Buttons = null;
this.$Categories = null;
this.$Breadcrumb = null;
this.$ContextMenu = null;
this.$CloseButton = null;
this.$ButtonBar = null;
this.$CategoryBar = null;
this.$ButtonBar = null;
this.$CategoryBar = null;
this.$BreadcrumbBar = null;
this.$ActiveCat = null;
this.$Dropable = null;
this.$ActiveCat = null;
this.$Dropable = null;
this.addEvents({
onDestroy : this.$onDestroy,
......@@ -166,18 +166,18 @@ define('qui/controls/desktop/Panel', [
},
html: '<div class="qui-panel-header box"></div>' +
'<div class="qui-panel-buttons box"></div>' +
'<div class="qui-panel-categories box"></div>' +
'<div class="qui-panel-content box"></div>' +
'<div class="qui-panel-footer box"></div>'
'<div class="qui-panel-buttons box"></div>' +
'<div class="qui-panel-categories box"></div>' +
'<div class="qui-panel-content box"></div>' +
'<div class="qui-panel-footer box"></div>'
});
this.Loader.inject(this.$Elm);
this.$Header = this.$Elm.getElement('.qui-panel-header');
this.$Footer = this.$Elm.getElement('.qui-panel-footer');
this.$Content = this.$Elm.getElement('.qui-panel-content');
this.$Buttons = this.$Elm.getElement('.qui-panel-buttons');
this.$Header = this.$Elm.getElement('.qui-panel-header');
this.$Footer = this.$Elm.getElement('.qui-panel-footer');
this.$Content = this.$Elm.getElement('.qui-panel-content');
this.$Buttons = this.$Elm.getElement('.qui-panel-buttons');
this.$Categories = this.$Elm.getElement('.qui-panel-categories');
if (this.getAttribute('breadcrumb')) {
......@@ -257,12 +257,12 @@ define('qui/controls/desktop/Panel', [
}
if (this.getAttribute('icon')) {
var path = this.getAttribute('icon');
const path = this.getAttribute('icon');
if (Utils.isFontAwesomeClass(path)) {
var css = this.$Icon.className;
var FA_RX = new RegExp('\\bfa-\\S+', 'g');
var ICON_RX = new RegExp('\\bicon-\\S+', 'g');
let css = this.$Icon.className;
const FA_RX = new RegExp('\\bfa-\\S+', 'g');
const ICON_RX = new RegExp('\\bicon-\\S+', 'g');
css = css.replace(ICON_RX, '');
css = css.replace(FA_RX, '');
......@@ -287,7 +287,7 @@ define('qui/controls/desktop/Panel', [
* @return {Object} this (qui/controls/desktop/Panel)
*/
resize: function () {
var self = this;
const self = this;
this.fireEvent('resizeBegin', [this]);
......@@ -325,22 +325,22 @@ define('qui/controls/desktop/Panel', [
this.setAttribute('height', this.getAttribute('styles').height);
}
var content_height = this.getAttribute('height'),
let content_height = this.getAttribute('height'),
overflow = 'auto',
buttonsSize = this.$Buttons.getSize();
// height calc
if (content_height.toString().match('%')) {
var Parent = this.$Elm.getParent() || document.body;
const Parent = this.$Elm.getParent() || document.body;
content_height = (content_height).toInt();
content_height = Parent.getSize().y * (content_height / 100);
}
content_height = content_height -
buttonsSize.y - 2 -
this.$Footer.getSize().y - 1 -
this.$Header.getSize().y;
buttonsSize.y - 2 -
this.$Footer.getSize().y - 1 -
this.$Header.getSize().y;
if (this.$Breadcrumb) {
content_height = content_height - this.$Breadcrumb.getSize().y;
......@@ -403,7 +403,7 @@ define('qui/controls/desktop/Panel', [
* @return {Object} this (qui/controls/desktop/Panel)
*/
open: function (callback) {
var self = this;
const self = this;
this.fireEvent('openBegin', [this]);
......@@ -444,7 +444,7 @@ define('qui/controls/desktop/Panel', [
* @return {Object} this (qui/controls/desktop/Panel)
*/
minimize: function (callback) {
var self = this;
const self = this;
this.fireEvent('minimizeBegin', [this]);
......@@ -698,7 +698,7 @@ define('qui/controls/desktop/Panel', [
Btn = new Button(Btn);
}
var self = this;
const self = this;
Btn.addEvents({
......@@ -707,7 +707,10 @@ define('qui/controls/desktop/Panel', [
return;
}
self.fireEvent('categoryLeave', [self, self.$ActiveCat]);
self.fireEvent('categoryLeave', [
self,
self.$ActiveCat
]);
Btn.setActive();
},
......@@ -722,7 +725,10 @@ define('qui/controls/desktop/Panel', [
}
self.$ActiveCat = Btn;
self.fireEvent('categoryEnter', [self, Btn]);
self.fireEvent('categoryEnter', [
self,
Btn
]);
}
});
......@@ -784,7 +790,7 @@ define('qui/controls/desktop/Panel', [
* @return Promise
*/
minimizeCategory: function () {
var CategoryBar = this.getCategoryBar();
const CategoryBar = this.getCategoryBar();
CategoryBar.setAttribute('width', 50);
CategoryBar.resize();
......@@ -826,7 +832,7 @@ define('qui/controls/desktop/Panel', [
this.$Categories.removeClass('qui-panel-categories-minimize');
var CategoryBar = this.getCategoryBar();
const CategoryBar = this.getCategoryBar();
CategoryBar.setAttribute('width', 190);
CategoryBar.resize();
......@@ -905,10 +911,10 @@ define('qui/controls/desktop/Panel', [
* @return {Object} qui/controls/panels/Sheet
*/
createSheet: function (options) {
var self = this,
Sheet = new PanelSheet(options);
const self = this,
Sheet = new PanelSheet(options);
var resize = function () {
const resize = function () {
Sheet.resize();
};
......@@ -933,7 +939,7 @@ define('qui/controls/desktop/Panel', [
return;
}
var self = this;
const self = this;
this.$Collaps = new Element('div', {
'class': 'qui-panel-collapse fa-chevron-down fa'
......@@ -976,7 +982,7 @@ define('qui/controls/desktop/Panel', [
return;
}
var self = this;
const self = this;
this.$getDragable(function () {
if (self.getAttribute('dragable')) {
......@@ -1028,10 +1034,10 @@ define('qui/controls/desktop/Panel', [
this.$_dragDropExec = true;
var self = this;
const self = this;
require(['qui/classes/utils/DragDrop'], function (DragDrop) {
var DragDropParent = null;
let DragDropParent = null;
self.$Dropable = new DragDrop(self.$Header, {
dropables: '.qui-panel-drop',
......@@ -1042,7 +1048,11 @@ define('qui/controls/desktop/Panel', [
},
events : {
onStart: function (Dragable, Element, event) {
self.fireEvent('dragDropStart', [self, Element, event]);
self.fireEvent('dragDropStart', [
self,
Element,
event
]);
},
onComplete: function () {
......@@ -1050,15 +1060,21 @@ define('qui/controls/desktop/Panel', [
},
onDrag: function (Dragable, Element, event) {
self.fireEvent('drag', [self, event]);
self.fireEvent('drag', [
self,
event
]);
if (DragDropParent) {
DragDropParent.fireEvent('dragDropDrag', [self, event]);
DragDropParent.fireEvent('dragDropDrag', [
self,
event
]);
}
},
onEnter: function (Dragable, Element, Dropable) {
var quiid = Dropable.get('data-quiid');
let quiid = Dropable.get('data-quiid');
if (!quiid) {
return;
......@@ -1067,13 +1083,19 @@ define('qui/controls/desktop/Panel', [
DragDropParent = QUI.Controls.getById(quiid);
if (DragDropParent) {
DragDropParent.fireEvent('dragDropEnter', [self, Element]);
DragDropParent.fireEvent('dragDropEnter', [
self,
Element
]);
}
},
onLeave: function (Dragable, Element) {
if (DragDropParent) {
DragDropParent.fireEvent('dragDropLeave', [self, Element]);
DragDropParent.fireEvent('dragDropLeave', [
self,
Element
]);
DragDropParent = null;
}
},
......@@ -1084,7 +1106,12 @@ define('qui/controls/desktop/Panel', [
}
if (DragDropParent) {
DragDropParent.fireEvent('dragDropDrop', [self, Element, Dropable, event]);
DragDropParent.fireEvent('dragDropDrop', [
self,
Element,
Dropable,
event
]);
}
}
}
......@@ -1100,7 +1127,7 @@ define('qui/controls/desktop/Panel', [
* @method qui/controls/desktop/Panel#$onDestroy
*/
$onDestroy: function () {
var destroy = [
const destroy = [
this.$Header,
this.$Title,
this.$Footer,
......@@ -1113,7 +1140,7 @@ define('qui/controls/desktop/Panel', [
this.$ContextMenu
];
for (var i = 0, len = destroy.length; i < len; i++) {
for (let i = 0, len = destroy.length; i < len; i++) {
if (destroy[i] && "destroy" in destroy[i]) {
destroy[i].destroy();
}
......@@ -1126,8 +1153,8 @@ define('qui/controls/desktop/Panel', [
* @return {Promise}
*/
showSavedIconAnimation: function () {
var self = this,
oldIcon = this.getAttribute('icon');
const self = this,
oldIcon = this.getAttribute('icon');
this.setAttribute('icon', 'fa fa-spinner fa-spin');
this.$refresh();
......@@ -1152,8 +1179,8 @@ define('qui/controls/desktop/Panel', [
* @return {Promise}
*/
showErrorIconAnimation: function () {
var self = this,
oldIcon = this.getAttribute('icon');
const self = this,
oldIcon = this.getAttribute('icon');
this.setAttribute('icon', 'fa fa-spinner fa-spin');
this.$refresh();
......
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