add panel for minimized window

This commit is contained in:
ymq1 2025-06-12 10:24:09 +00:00
parent 98d37821ed
commit 28bb691eef
9 changed files with 136 additions and 34 deletions

View File

@ -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;

View File

@ -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;
}

1
bricks/imgs/9cycles.svg Normal file
View File

@ -0,0 +1 @@
<svg t="1749698260805" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="45734" width="100%" height="100%"><path d="M512 725.328A85.328 85.328 0 1 1 512 896a85.328 85.328 0 0 1 0-170.672z m298.672 0a85.328 85.328 0 1 1 0 170.672 85.328 85.328 0 0 1 0-170.672z m-597.344 0a85.328 85.328 0 1 1 0 170.672 85.328 85.328 0 0 1 0-170.672z" fill="${color}" p-id="45735"></path><path d="M512 426.672a85.328 85.328 0 1 1 0 170.656 85.328 85.328 0 0 1 0-170.656z m298.672 0a85.328 85.328 0 1 1 0 170.656 85.328 85.328 0 0 1 0-170.656z m-597.344 0a85.328 85.328 0 1 1 0 170.656 85.328 85.328 0 0 1 0-170.656z" fill="${color}" p-id="45736"></path><path d="M512 128a85.328 85.328 0 1 1 0 170.672A85.328 85.328 0 0 1 512 128z m298.672 0a85.328 85.328 0 1 1 0 170.672 85.328 85.328 0 0 1 0-170.672z" fill="${color}" p-id="45737"></path><path d="M213.328 128a85.328 85.328 0 1 1 0 170.672 85.328 85.328 0 0 1 0-170.672z" fill="#417AE7" p-id="45738"></path></svg>

After

Width:  |  Height:  |  Size: 989 B

11
bricks/imgs/app-dock.svg Normal file
View File

@ -0,0 +1,11 @@
<svg t="1749637984292" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17580" width="100%" height="100%">
<path d="M187.072 160h137.856c14.944 0 27.072 12.128 27.072 27.072v137.856a27.072 27.072 0 0 1-27.072 27.072H187.072A27.072 27.072 0 0 1 160 324.928V187.072C160 172.128 172.128 160 187.072 160z" fill="green" p-id="17581"></path>
<path d="M443.072 160h137.856c14.944 0 27.072 12.128 27.072 27.072v137.856a27.072 27.072 0 0 1-27.072 27.072h-137.856a27.072 27.072 0 0 1-27.072-27.072V187.072c0-14.944 12.128-27.072 27.072-27.072z" fill="${color}" p-id="17582"></path>
<path d="M699.072 160h137.856c14.944 0 27.072 12.128 27.072 27.072v137.856a27.072 27.072 0 0 1-27.072 27.072h-137.856a27.072 27.072 0 0 1-27.072-27.072V187.072c0-14.944 12.128-27.072 27.072-27.072z" fill="${color}" p-id="17583"></path>
<path d="M187.072 416h137.856c14.944 0 27.072 12.128 27.072 27.072v137.856a27.072 27.072 0 0 1-27.072 27.072H187.072A27.072 27.072 0 0 1 160 580.928v-137.856c0-14.944 12.128-27.072 27.072-27.072z" fill="${color}" p-id="17584"></path>
<path d="M443.072 416h137.856c14.944 0 27.072 12.128 27.072 27.072v137.856a27.072 27.072 0 0 1-27.072 27.072h-137.856a27.072 27.072 0 0 1-27.072-27.072v-137.856c0-14.944 12.128-27.072 27.072-27.072z" fill="yellow" p-id="17585"></path>
<path d="M699.072 416h137.856c14.944 0 27.072 12.128 27.072 27.072v137.856a27.072 27.072 0 0 1-27.072 27.072h-137.856a27.072 27.072 0 0 1-27.072-27.072v-137.856c0-14.944 12.128-27.072 27.072-27.072z" fill="${color}" p-id="17586"></path>
<path d="M187.072 672h137.856c14.944 0 27.072 12.128 27.072 27.072v137.856a27.072 27.072 0 0 1-27.072 27.072H187.072A27.072 27.072 0 0 1 160 836.928v-137.856c0-14.944 12.128-27.072 27.072-27.072z" fill="${color}" p-id="17587"></path>
<path d="M443.072 672h137.856c14.944 0 27.072 12.128 27.072 27.072v137.856a27.072 27.072 0 0 1-27.072 27.072h-137.856a27.072 27.072 0 0 1-27.072-27.072v-137.856c0-14.944 12.128-27.072 27.072-27.072z" fill="${color}" p-id="17588"></path>
<path d="M699.072 672h137.856c14.944 0 27.072 12.128 27.072 27.072v137.856a27.072 27.072 0 0 1-27.072 27.072h-137.856a27.072 27.072 0 0 1-27.072-27.072v-137.856c0-14.944 12.128-27.072 27.072-27.072z" fill="red" p-id="17589"></path>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.3 KiB

1
bricks/imgs/startup.svg Normal file
View File

@ -0,0 +1 @@
<svg t="1749697107556" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26374" width="512" height="512"><path d="M128 170.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h85.333333a42.666667 42.666667 0 0 1 42.666667 42.666667v85.333333a42.666667 42.666667 0 0 1-42.666667 42.666667H170.666667a42.666667 42.666667 0 0 1-42.666667-42.666667V170.666667zM128 768a42.666667 42.666667 0 0 1 42.666667-42.666667h85.333333a42.666667 42.666667 0 0 1 42.666667 42.666667v85.333333a42.666667 42.666667 0 0 1-42.666667 42.666667H170.666667a42.666667 42.666667 0 0 1-42.666667-42.666667v-85.333333zM725.333333 170.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h85.333333a42.666667 42.666667 0 0 1 42.666667 42.666667v85.333333a42.666667 42.666667 0 0 1-42.666667 42.666667h-85.333333a42.666667 42.666667 0 0 1-42.666667-42.666667V170.666667zM725.333333 469.333333a42.666667 42.666667 0 0 1 42.666667-42.666666h85.333333a42.666667 42.666667 0 0 1 42.666667 42.666666v85.333334a42.666667 42.666667 0 0 1-42.666667 42.666666h-85.333333a42.666667 42.666667 0 0 1-42.666667-42.666666v-85.333334z" fill="#3388ee" p-id="26375"></path><path d="M426.666667 469.333333a42.666667 42.666667 0 0 1 42.666666-42.666666h85.333334a42.666667 42.666667 0 0 1 42.666666 42.666666v85.333334a42.666667 42.666667 0 0 1-42.666666 42.666666h-85.333334a42.666667 42.666667 0 0 1-42.666666-42.666666v-85.333334z" fill="#EF4F4F" p-id="26376"></path><path d="M128 469.333333a42.666667 42.666667 0 0 1 42.666667-42.666666h85.333333a42.666667 42.666667 0 0 1 42.666667 42.666666v85.333334a42.666667 42.666667 0 0 1-42.666667 42.666666H170.666667a42.666667 42.666667 0 0 1-42.666667-42.666666v-85.333334zM426.666667 170.666667a42.666667 42.666667 0 0 1 42.666666-42.666667h85.333334a42.666667 42.666667 0 0 1 42.666666 42.666667v85.333333a42.666667 42.666667 0 0 1-42.666666 42.666667h-85.333334a42.666667 42.666667 0 0 1-42.666666-42.666667V170.666667zM426.666667 768a42.666667 42.666667 0 0 1 42.666666-42.666667h85.333334a42.666667 42.666667 0 0 1 42.666666 42.666667v85.333333a42.666667 42.666667 0 0 1-42.666666 42.666667h-85.333334a42.666667 42.666667 0 0 1-42.666666-42.666667v-85.333333zM725.333333 768a42.666667 42.666667 0 0 1 42.666667-42.666667h85.333333a42.666667 42.666667 0 0 1 42.666667 42.666667v85.333333a42.666667 42.666667 0 0 1-42.666667 42.666667h-85.333333a42.666667 42.666667 0 0 1-42.666667-42.666667v-85.333333z" fill="#ee8833" p-id="26377"></path></svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -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);

View File

@ -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;

View File

@ -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;