diff --git a/bricks/bricks.js b/bricks/bricks.js
index 94a5a37..a67677b 100644
--- a/bricks/bricks.js
+++ b/bricks/bricks.js
@@ -559,6 +559,12 @@ bricks.App = class extends bricks.Layout {
this.screen_orient = window.screen.orientation.type;
this.bind('orient_changed', this.screen_orient);
});
+ this.mwins = [];
+ this.wins_panel = null;
+ }
+
+ show_windows_panel(){
+ this.wins_panel = new bricks.WindowsPanel({})
}
get_color(){
return getComputedStyle(this.dom_element).color;
diff --git a/bricks/css/bricks.css b/bricks/css/bricks.css
index aef0215..66aa4d5 100755
--- a/bricks/css/bricks.css
+++ b/bricks/css/bricks.css
@@ -463,3 +463,32 @@ hr {
line-height: 30px;
}
+.left {
+ justify-content: flex-start;
+}
+
+/* 居右 */
+.right {
+ justify-content: flex-end;
+}
+
+/* 居中 */
+.hcenter {
+ justify-content: center;
+}
+
+/* 居上 */
+.top {
+ align-self: flex-start;
+}
+
+/* 居下 */
+.bottom {
+ align-self: flex-end;
+}
+
+/* 居中 */
+.vcenter {
+ align-self: center;
+}
+
diff --git a/bricks/imgs/9cycles.svg b/bricks/imgs/9cycles.svg
new file mode 100644
index 0000000..f8e6bab
--- /dev/null
+++ b/bricks/imgs/9cycles.svg
@@ -0,0 +1 @@
+
diff --git a/bricks/imgs/app-dock.svg b/bricks/imgs/app-dock.svg
new file mode 100644
index 0000000..f4e6d7b
--- /dev/null
+++ b/bricks/imgs/app-dock.svg
@@ -0,0 +1,11 @@
+
diff --git a/bricks/imgs/apps-dock.svg b/bricks/imgs/apps-dock.svg
new file mode 100644
index 0000000..d6209d7
--- /dev/null
+++ b/bricks/imgs/apps-dock.svg
@@ -0,0 +1 @@
+
diff --git a/bricks/imgs/startup.svg b/bricks/imgs/startup.svg
new file mode 100644
index 0000000..cc09a77
--- /dev/null
+++ b/bricks/imgs/startup.svg
@@ -0,0 +1 @@
+
diff --git a/bricks/popup.js b/bricks/popup.js
index 71c2471..1ee8a61 100644
--- a/bricks/popup.js
+++ b/bricks/popup.js
@@ -369,6 +369,68 @@ bricks.get_popupwindow_default_options = function(){
modal:true
}
}
+bricks.WindowsPanel = class extends bricks.Popup {
+ constructor(opts){
+ opts.width = "80%";
+ opts.auto_open = false;
+ opts.auto_dismiss = true;
+ opts.auto_destroy = true;
+ opts.height = "80%";
+ super(opts);
+ this.content = new bricks.Cols({
+ width: "100%",
+ height: "100%",
+ record_view: {
+ widgettype: "VBox",
+ options: {
+ css: "app-icon"
+ },
+ subwidgets: [
+ {
+ widgettype: "Text",
+ options: {
+ otext: "${title}",
+ i18n: true,
+ wrap: true
+ }
+ },
+ {
+ widgettype: "Svg",
+ options: {
+ rate: 2,
+ url: "${url}"
+ }
+ }
+ ]
+ }
+ });
+ this.content.bind('record_click', this.del_window.bind(this));
+ var data = {
+ total: bricks.app.mwins.length,
+ rows:[]
+ };
+ for (var i=0; i< bricks.app.mwins.length; i++){
+ data.rows.push({
+ title: bricks.app.mwins[i].title,
+ url: bricks.app.mwins[i].url,
+ pos: i
+ });
+ }
+ this.content.dataHandle(data);
+ this.add_widget(this.content);
+ }
+ add_window(win){
+ bricks.app.mwins.push(win);
+ }
+
+ del_window(event){
+ var pos = event.params.pos;
+ var w = this.mwins[pos];
+ w.open();
+ bricks.app.mwins.splice(pos, 1);
+ this.dismiss();
+ }
+}
bricks.PopupWindow = class extends bricks.Popup {
/*
{
@@ -400,9 +462,11 @@ bricks.PopupWindow = class extends bricks.Popup {
}
}
build_title_bar(){
+ this.url = this.opts.icon || bricks_resource('imgs/app.svg');
+ this.title = this.opts.title || "[Untitle window]";
var icon = new bricks.Svg({
rate:this.opts.rate,
- url:this.opts.icon || bricks_resource('imgs/app.svg')
+ url:this.url
});
this.title_bar.add_widget(icon);
this.tb_w = new bricks.IconBar( {
@@ -432,50 +496,24 @@ bricks.PopupWindow = class extends bricks.Popup {
});
this.title_bar.add_widget(this.tb_w);
this.tb_w.bind('delete', this.destroy.bind(this));
- this.tb_w.bind('minimize', this.dismiss.bind(this));
+ this.tb_w.bind('minimize', this.win_minimize.bind(this));
this.tb_w.bind('fullscreen', this.content_w.enter_fullscreen.bind(this.content_w));
if (this.title){
this.title_w = new bricks.Text({text:this.title});
this.title_bar.add_widget(this.title_w);
}
}
+ win_minimize(){
+ this.dismiss();
+ if (! this.auto_destroy){
+ bricks.app.mwins.push(this);
+ }
+ }
set_title(txt){
if (this.title_w){
this.title_w.set_text(txt);
}
}
- open(){
- var f = bricks.app.docks.find(o => {
- if (o == this){
- }
- });
- if (! f){
- bricks.app.docks.push(this);
- }
- super.open();
- }
- dismiss(){
- var f = bricks.app.docks.find(o=> o===this);
- if (!f){
- bricks.app.docks.push(this);
- }
- super.dismiss()
- }
-}
-bricks.Dock = class extends bricks.HBox {
- constructor(opts){
- opts.cheight = opts.cheight || 2;
- opts.width = opts.width || "80%";
- super(opts);
- this.set_css('scroll');
- this.pw = [];
- }
- add_popupwindow(pw){
- var info = pw.get_window_info();
-
- }
- del_popupwindow(pw){
- }
}
bricks.Factory.register('Popup', bricks.Popup);
diff --git a/bricks/utils.js b/bricks/utils.js
index e65b5d5..2e5e002 100644
--- a/bricks/utils.js
+++ b/bricks/utils.js
@@ -425,6 +425,10 @@ Array.prototype.remove = function(item){
return this;
}
+function removeArrayItems(array, itemsToRemove) {
+ return array.filter(item => !itemsToRemove.includes(item));
+}
+
bricks.absurl = function(url, widget){
if (url.startsWith('http://') || url.startsWith('https://')){
return url;
diff --git a/bricks/widget.js b/bricks/widget.js
index d64db9a..f1eeaa1 100644
--- a/bricks/widget.js
+++ b/bricks/widget.js
@@ -21,6 +21,7 @@ bricks.JsWidget = class {
popup_desc:
popupwindow:false or true
}
+ bgimage:url
*/
constructor(options){
if (!options){
@@ -50,8 +51,18 @@ bricks.JsWidget = class {
if (this.popup){
this.bind(this.popup.popup_event, this.popup_action.bind(this));
}
+ if (this.bgimage){
+ this.set_bg_image(this.bgimage);
+ }
bricks.resize_observer.observe(this.dom_element);
}
+ set_bg_image(url){
+ var d = this.dom_element;
+ d.style.backgroundImage = "url('" +url + "')";
+ d.style.backgroundSize = "cover"; // 背景图4填满容器
+ d.style.backgroundPosition = "center"; // 居中显示
+ d.style.backgroundRepeat = "no-repeat"; // 不重复
+ }
destroy_popup(){
this.popup_widget.destroy();
this.popup_widget = null;