add panel for minimized window
This commit is contained in:
parent
98d37821ed
commit
28bb691eef
@ -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;
|
||||
|
@ -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
1
bricks/imgs/9cycles.svg
Normal 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
11
bricks/imgs/app-dock.svg
Normal 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 |
1
bricks/imgs/apps-dock.svg
Normal file
1
bricks/imgs/apps-dock.svg
Normal file
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
1
bricks/imgs/startup.svg
Normal 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 |
106
bricks/popup.js
106
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);
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user