This commit is contained in:
yumoqing 2024-10-31 16:50:24 +08:00
parent 4e4136eb72
commit 13cb3d37eb
8 changed files with 175 additions and 64 deletions

View File

@ -1,13 +1,28 @@
var bricks = window.bricks || {}; var bricks = window.bricks || {};
bricks.Conform = class extends bricks.Message { bricks.Conform = class extends bricks.PopupWindow {
constructor(opts){ constructor(opts){
opts.auto_open = true;
opts.auto_close = false;
opts.timeout = 0; opts.timeout = 0;
super(opts); super(opts);
this.create_toolbar(); this.create_conform();
} }
create_toolbar(){ create_conform(){
var w = new bricks.VBox({width:'100%', height: '100%'});
this.create_message(w);
this.create_toolbar(w);
this.add_widget(w);
}
create_message(widget){
var w = new bricks.Filler();
widget.add_widget(w);
var w1 = new bricks.VScrollPanel({});
w.add_widget(w1);
var t = new bricks.Text({otext:this.opts.message,
wrap:true,
halign:'middle',
i18n:true});
w1.add_widget(t);
}
create_toolbar(widget){
var desc = { var desc = {
tools:[ tools:[
bricks.extend({ bricks.extend({
@ -26,7 +41,7 @@ bricks.Conform = class extends bricks.Message {
w.bind('conform', this.conform_hndl.bind(this)); w.bind('conform', this.conform_hndl.bind(this));
w.bind('discard', this.discard_hndl.bind(this)); w.bind('discard', this.discard_hndl.bind(this));
if (!w) return; if (!w) return;
this.message_w.add_widget(w); widget.add_widget(w);
} }
conform_hndl(event){ conform_hndl(event){
this.dismiss(); this.dismiss();

View File

@ -10,6 +10,11 @@ body {
box-sizing: border-box!important; box-sizing: border-box!important;
} }
.flexbox {
height: 100%;
width: 100%;
display: flex;
}
.curpos { .curpos {
border-radius: 30%; border-radius: 30%;
background-color: #f5f5f5; background-color: #f5f5f5;
@ -283,6 +288,11 @@ body {
height: 50px; height: 50px;
background-color: blue; background-color: blue;
} }
.childrensize {
display: flex;
flex-wrap: nowrap;
flex-shrink: 0;
}
.datagrid-row { .datagrid-row {
flex:0 0 150px; flex:0 0 150px;
display: flex; display: flex;
@ -349,10 +359,12 @@ body {
background-color: #dddddd; background-color: #dddddd;
position: sticky; position: sticky;
top: 0; top: 0;
width: auto; flex-wrap: nowrap;
flex-shrink: 0;
} }
.tabular-row { .tabular-row {
width: auto; flex-wrap: nowrap;
flex-shrink: 0;
margin-bottom: 5px; margin-bottom: 5px;
} }
.tabular-row:nth-child(odd) { .tabular-row:nth-child(odd) {
@ -365,7 +377,7 @@ body {
background-color: #ef0000; background-color: #ef0000;
} }
.tabular-row-content { .tabular-row-content {
padding: 10px; padding: 2;
} }
.tabular-cell { .tabular-cell {
border: 1px solid #ccc; border: 1px solid #ccc;

View File

@ -20,7 +20,6 @@ bricks.DataRow = class extends bricks.HBox {
*/ */
constructor(opts){ constructor(opts){
super(opts); super(opts);
this.set_style('width', 'auto');
this.record_w = null; this.record_w = null;
} }
render_header(){ render_header(){
@ -87,6 +86,7 @@ bricks.DataRow = class extends bricks.HBox {
} }
build_fields(header, cw){ build_fields(header, cw){
this.record_w = new bricks.HBox({height:'auto'}); this.record_w = new bricks.HBox({height:'auto'});
this.record_w.set_css('childrensize');
this.add_widget(this.record_w); this.add_widget(this.record_w);
this._build_fields(header, this.record_w); this._build_fields(header, this.record_w);
} }
@ -108,7 +108,7 @@ bricks.DataRow = class extends bricks.HBox {
continue; continue;
} }
var opts = bricks.extend({ var opts = bricks.extend({
margin:'3px' margin:'1px'
}, f); }, f);
if (header || ! this.user_data){ if (header || ! this.user_data){
opts.value = f.label || f.name; opts.value = f.label || f.name;
@ -119,6 +119,8 @@ bricks.DataRow = class extends bricks.HBox {
var cwidth = cwidths[f.name]; var cwidth = cwidths[f.name];
if (cwidth){ if (cwidth){
opts.cwidth = cwidth; opts.cwidth = cwidth;
} else {
opts.cwidth = 10;
} }
var f = bricks.get_ViewBuilder(f.uitype); var f = bricks.get_ViewBuilder(f.uitype);
if (!f) f = bricks.get_ViewBuilder('str'); if (!f) f = bricks.get_ViewBuilder('str');

View File

@ -216,6 +216,7 @@ bricks.DataViewer = class extends bricks.VBox {
} }
var f = new bricks.ModalForm({ var f = new bricks.ModalForm({
"widget":this, "widget":this,
"archor":"cc",
"movable":true, "movable":true,
"resizable":true, "resizable":true,
"archor":"cc", "archor":"cc",
@ -268,6 +269,8 @@ bricks.DataViewer = class extends bricks.VBox {
} }
delete_record(row, record){ delete_record(row, record){
var conform_w = new bricks.Conform({ var conform_w = new bricks.Conform({
cwidth:16,
cheight:9,
target:this, target:this,
title:'Delete conform', title:'Delete conform',
message:'Are you sure to delete is record?' message:'Are you sure to delete is record?'

View File

@ -24,6 +24,7 @@ bricks.IconBar = class extends bricks.HBox {
opts.rate = 1; opts.rate = 1;
} }
super(opts); super(opts);
this.set_css('childrensize');
this.height_int = 0; this.height_int = 0;
var tools = this.opts.tools; var tools = this.opts.tools;
for (var i=0;i<tools.length;i++){ for (var i=0;i<tools.length;i++){

View File

@ -14,15 +14,15 @@ bricks.Message = class extends bricks.PopupWindow {
this.panel.set_css('message'); this.panel.set_css('message');
} }
create_message_widget(){ create_message_widget(){
this.message_w = new bricks.VBox({width:'100%',height:'100%'});
var w = new bricks.Filler(); var w = new bricks.Filler();
this.message_w.add_widget(w); this.add_widget(w);
var w1 = new bricks.VScrollPanel({});
w.add_widget(w1);
var t = new bricks.Text({otext:this.opts.message, var t = new bricks.Text({otext:this.opts.message,
wrap:true, wrap:true,
halign:'middle', halign:'middle',
i18n:true}); i18n:true});
w.add_widget(t); w1.add_widget(t);
this.add_widget(this.message_w);
} }
} }
@ -34,11 +34,15 @@ bricks.Error = class extends bricks.Message {
} }
bricks.show_error = function(opts){ bricks.show_error = function(opts){
opts.cheight = opts.cheight || 9;
opts.cwidth = opts.cwidth || 16;
var w = new bricks.Error(opts); var w = new bricks.Error(opts);
w.open(); w.open();
} }
bricks.show_message = function(opts){ bricks.show_message = function(opts){
opts.cheight = opts.cheight || 9;
opts.cwidth = opts.cwidth || 16;
var w = new bricks.Message(opts); var w = new bricks.Message(opts);
w.open(); w.open();
} }

View File

@ -15,14 +15,18 @@ bricks.Popup = class extends bricks.VBox {
*/ */
constructor(opts){ constructor(opts){
super(opts); super(opts);
this.no_opened = true;
this.auto_task = null; this.auto_task = null;
this.issub = false; this.issub = false;
this.opened = false; this.opened = false;
this.set_css('popup'); this.set_css('popup');
this.old_add_widget = super.add_widget.bind(this);
const zindex = bricks.app.new_zindex(); const zindex = bricks.app.new_zindex();
this.set_style('zIndex', zindex); this.set_style('zIndex', zindex);
this.moving_w = this; this.moving_w = this;
this.content_box = new bricks.VBox({width:'100%', height:'100%'});
this.content_box.set_style('display', 'flex');
this.content_box.set_style('overflow', 'auto');
super.add_widget(this.content_box);
if (this.auto_dismiss){ if (this.auto_dismiss){
bricks.Body.bind('click', this.click_outside.bind(this)); bricks.Body.bind('click', this.click_outside.bind(this));
} }
@ -40,7 +44,7 @@ bricks.Popup = class extends bricks.VBox {
} }
setup_resizable(){ setup_resizable(){
this.resizable_w = new bricks.Icon({rate:1.5, url:bricks_resource('imgs/right-bottom-triangle.png')}); this.resizable_w = new bricks.Icon({rate:1.5, url:bricks_resource('imgs/right-bottom-triangle.png')});
this.old_add_widget(this.resizable_w); super.add_widget(this.resizable_w);
this.resizable_w.set_css('resizebox'); this.resizable_w.set_css('resizebox');
this.resizable_w.bind('mousedown', this.resize_start_pos.bind(this)); this.resizable_w.bind('mousedown', this.resize_start_pos.bind(this));
bricks.Body.bind('mousemove', this.resizing.bind(this)); bricks.Body.bind('mousemove', this.resizing.bind(this));
@ -79,6 +83,73 @@ bricks.Popup = class extends bricks.VBox {
// console.log('resizing():', this.resize_status, cx, cy); // console.log('resizing():', this.resize_status, cx, cy);
e.preventDefault(); e.preventDefault();
} }
positify_tl(){
var rect, w, h, t, l;
if (this.top && this.left){
this.set_style('top', this.top);
this.set_style('left', this.left);
return;
}
rect = bricks.app.showRectage();
if (this.cwidth && this.cwidth > 0){
w = this.cwidth * bricks.app.charsize;
} else if (this.width){
if (this.width.endsWith('px')){
w = parseFloat(this.width);
} else {
w = parseFloat(this.width) * rect.width / 100;
}
} else {
w = rect.width * 0.8;
}
if (this.cheight && this.cheight > 0){
h = this.cheight * bricks.app.charsize;
} else if (this.height){
if (this.height.endsWith('px')){
h = parseFloat(this.height);
} else {
h = parseFloat(this.height) * rect.height / 100;
}
} else {
h = rect.height * 0.8;
}
var archor = this.archor || 'cc';
switch(archor[0]){
case 't':
t = 0;
break;
case 'c':
t = (rect.height - h) / 2;
break;
case 'b':
t = rect.height - h;
break;
default:
t = (rect.height - h) / 2;
break;
}
switch(archor[1]){
case 'l':
l = 0;
break;
case 'c':
l = (rect.width - w) / 2;
break;
case 'r':
l = rect.width - w;
break;
default:
l = (rect.width - w) / 2;
break;
}
this.set_style('top', t + 'px');
this.set_style('left', l + 'px');
return {
top:t,
left:l
}
}
stop_resizing(e){ stop_resizing(e){
this.resize_status = false; this.resize_status = false;
bricks.Body.unbind('mousemove', this.resizing.bind(this)); bricks.Body.unbind('mousemove', this.resizing.bind(this));
@ -97,8 +168,11 @@ bricks.Popup = class extends bricks.VBox {
return; return;
} }
this.moving_status = true; this.moving_status = true;
this.offsetX = e.clientX - this.showRectage().left; var rect = this.showRectage();
this.offsetY = e.clientY - this.showRectage().top; this.offsetX = e.clientX - rect.left;
this.offsetY = e.clientY - rect.top;
console.log(rect, '========', this.offsetX, this.offsetY, e.clientX, e.clientY);
bricks.Body.bind('mouseup', this.stop_moving.bind(this)); bricks.Body.bind('mouseup', this.stop_moving.bind(this));
bricks.Body.bind('touchend', this.stop_moving.bind(this)); bricks.Body.bind('touchend', this.stop_moving.bind(this));
this.moving_w.bind('mousemove', this.moving.bind(this)); this.moving_w.bind('mousemove', this.moving.bind(this));
@ -118,8 +192,10 @@ bricks.Popup = class extends bricks.VBox {
var cx, cy; var cx, cy;
cx = e.clientX - this.offsetX; cx = e.clientX - this.offsetX;
cy = e.clientY - this.offsetY; cy = e.clientY - this.offsetY;
console.log(cx, cy, e.clientX, e.clientY, this.offsetX, this.offsetY, '==========');
this.set_style('left', cx + 'px'); this.set_style('left', cx + 'px');
this.set_style('top', cy + 'px'); this.set_style('top', cy + 'px');
e.preventDefault();
} }
stop_moving(e){ stop_moving(e){
// console.log('stop moving ....'); // console.log('stop moving ....');
@ -135,19 +211,11 @@ bricks.Popup = class extends bricks.VBox {
} }
} }
add_widget(w, index){ add_widget(w, index){
this.old_add_widget(w, index); this.content_box.add_widget(w, index);
if (this.auto_open){ if (this.auto_open){
this.open(); this.open();
} } else {
} console.log('auto_open is ', this.auto_open, ' so not auto open it', this.opts, w);
transform2screen_at(rect, lt){
var screen_rect = bricks.Body.showRectage();
var t, l;
t = rect.top + parseInt(lt.y) / 100 * (rect.bottom - rect.top);
l = rect.left + parseInt(lt.x) / 100 * (rect.right - rect.left);
return {
top:t + 'px',
left:l + 'px'
} }
} }
open(){ open(){
@ -156,40 +224,28 @@ bricks.Popup = class extends bricks.VBox {
return; return;
} }
this.opened = true; this.opened = true;
if (this.widget instanceof bricks.JsWidget){ if (this.no_opened){
this.target_w = this.widget; if (this.widget instanceof bricks.JsWidget){
this.issub = true; this.target_w = this.widget;
} else { this.issub = true;
var w = bricks.getWidgetById(this.widget, bricks.Body); } else {
if (w){ var w = bricks.getWidgetById(this.widget, bricks.Body);
this.issub = true if (w){
this.target_w = w; this.issub = true
this.target_w = w;
}
} }
this.positify_tl()
} }
rect = this.target_w.showRectage(); this.no_opened = false;
var lt = archor_at(this.archor);
if (this.issub){
lt = this.transform2screen_at(rect, lt);
if (typeof(this.width) == 'string' && this.width.endsWith('%')){
w = parseFloat(rect.width) * parseFloat(this.width) / 100;
this.set_style('width', w + 'px');
console.log('rect=', rect, 'w=', w);
}
if (typeof(this.height) == 'string' && this.height.endsWith('%')){
h = parseFloat(rect.height) * parseFloat(this.height) / 100;
this.set_style('height', h + 'px');
console.log('rect=', rect, 'h=', h);
}
}
this.set_style('top',lt.top);
this.set_style('left',lt.left);
this.set_style('display', 'block'); this.set_style('display', 'block');
if (this.timeout > 0){ if (this.timeout > 0){
this.auto_task = schedule_once(this.auto_dismiss.bind(this), this.timeout) this.auto_task = schedule_once(this.dismiss.bind(this), this.timeout)
} }
if (this.opts.modal){ if (this.opts.modal && this.opts.widget){
this.target_w.disabled(true); this.target_w.disabled(true);
} }
this.content_box.disabled(false);
} }
dismiss(){ dismiss(){
if (this.opts.modal){ if (this.opts.modal){
@ -226,18 +282,24 @@ bricks.PopupWindow = class extends bricks.Popup {
} }
*/ */
constructor(opts){ constructor(opts){
opts.moviable = true;
opts.resizable = true;
opts.auto_open = true;
opts.auto_dismiss = false;
opts.auto_destroy = false;
super(opts); super(opts);
this.title_bar = new bricks.HBox({cheight:1, width:'100%'}); this.title_bar = new bricks.HBox({cheight:1.5, width:'100%'});
this.title_bar.set_css('titlebar') this.title_bar.set_css('titlebar')
this.auto_destroy = false;
this.moving_w = this.title_bar; this.moving_w = this.title_bar;
this.old_add_widget = bricks.Layout.prototype.add_widget.bind(this); this.parent_add_widget(this.title_bar);
this.old_add_widget(this.title_bar);
this.build_title_bar(); this.build_title_bar();
var filler = new bricks.Filler({}); var filler = new bricks.Filler({});
this.old_add_widget(filler) this.parent_add_widget(filler)
this.content_w = new bricks.VScrollPanel({width:"100%"}); this.content_w = new bricks.Layout({});
this.content_w.set_css('flexbox');
this.auto_open = true;
filler.add_widget(this.content_w); filler.add_widget(this.content_w);
console.log(this.auto_open, 'opts=', opts);
} }
async load_content(){ async load_content(){
var dic = { var dic = {
@ -295,10 +357,20 @@ bricks.PopupWindow = class extends bricks.Popup {
this.title_w.set_text(txt); this.title_w.set_text(txt);
} }
} }
parent_add_widget(w, index){
var ao = this.autho_open;
this.auto_open = false;
super.add_widget(w, index);
this.auto_open = ao;
}
add_widget(w, index){ add_widget(w, index){
console.log('auto_open=', this.auto_open);
this.content_w.add_widget(w, index); this.content_w.add_widget(w, index);
if (this.auto_open){ if (this.auto_open){
this.open(); this.open();
} else {
this.open();
console.log('auto_open is false, not auto open');
} }
} }
open(){ open(){

View File

@ -316,6 +316,8 @@ bricks.Tree = class extends bricks.VScrollPanel {
return; return;
} }
var w = new bricks.Conform({ var w = new bricks.Conform({
cwidth:16,
cheight:9,
title:'Delete node', title:'Delete node',
message:'Please conform delete selected node' message:'Please conform delete selected node'
}); });