From 28bb691eef9bca933acc7f62c095115802f4772d Mon Sep 17 00:00:00 2001 From: ymq1 Date: Thu, 12 Jun 2025 10:24:09 +0000 Subject: [PATCH] add panel for minimized window --- bricks/bricks.js | 6 +++ bricks/css/bricks.css | 29 +++++++++++ bricks/imgs/9cycles.svg | 1 + bricks/imgs/app-dock.svg | 11 ++++ bricks/imgs/apps-dock.svg | 1 + bricks/imgs/startup.svg | 1 + bricks/popup.js | 106 ++++++++++++++++++++++++++------------ bricks/utils.js | 4 ++ bricks/widget.js | 11 ++++ 9 files changed, 136 insertions(+), 34 deletions(-) create mode 100644 bricks/imgs/9cycles.svg create mode 100644 bricks/imgs/app-dock.svg create mode 100644 bricks/imgs/apps-dock.svg create mode 100644 bricks/imgs/startup.svg 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;