yumoqing/bricks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bugfix

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
bricks/conform.js
View File

@ -1,13 +1,28 @@
var bricks = window.bricks || {};
bricks.Conform = class extends bricks.Message {
bricks.Conform = class extends bricks.PopupWindow {
constructor(opts){
opts.auto_open = true;
opts.auto_close = false;
opts.timeout = 0;
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 = {
tools:[
bricks.extend({
@ -26,7 +41,7 @@ bricks.Conform = class extends bricks.Message {
w.bind('conform', this.conform_hndl.bind(this));
w.bind('discard', this.discard_hndl.bind(this));
if (!w) return;
this.message_w.add_widget(w);
widget.add_widget(w);
}
conform_hndl(event){
this.dismiss();

18
bricks/css/bricks.css
View File

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

6
bricks/datarow.js
View File

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

3
bricks/dataviewer.js
View File

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

1
bricks/floaticonbar.js
View File

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

12
bricks/message.js
View File

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

170
bricks/popup.js
View File

@ -15,14 +15,18 @@ bricks.Popup = class extends bricks.VBox {
*/
constructor(opts){
super(opts);
this.no_opened = true;
this.auto_task = null;
this.issub = false;
this.opened = false;
this.set_css('popup');
this.old_add_widget = super.add_widget.bind(this);
const zindex = bricks.app.new_zindex();
this.set_style('zIndex', zindex);
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){
bricks.Body.bind('click', this.click_outside.bind(this));
}
@ -40,7 +44,7 @@ bricks.Popup = class extends bricks.VBox {
}
setup_resizable(){
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.bind('mousedown', this.resize_start_pos.bind(this));
bricks.Body.bind('mousemove', this.resizing.bind(this));
@ -79,13 +83,80 @@ bricks.Popup = class extends bricks.VBox {
// console.log('resizing():', this.resize_status, cx, cy);
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){
this.resize_status = false;
bricks.Body.unbind('mousemove', this.resizing.bind(this));
bricks.Body.unbind('mouseup', this.stop_resizing.bind(this));
// console.log('stop_resizing():', this.resize_status);
}
setup_movable(){
this.moving_w.bind('mousedown', this.rec_start_pos.bind(this));
this.moving_w.bind('touchstart', this.rec_start_pos.bind(this));
@ -97,8 +168,11 @@ bricks.Popup = class extends bricks.VBox {
return;
}
this.moving_status = true;
this.offsetX = e.clientX - this.showRectage().left;
this.offsetY = e.clientY - this.showRectage().top;
var rect = this.showRectage();
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('touchend', this.stop_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;
cx = e.clientX - this.offsetX;
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('top', cy + 'px');
e.preventDefault();
}
stop_moving(e){
// console.log('stop moving ....');
@ -135,19 +211,11 @@ bricks.Popup = class extends bricks.VBox {
}
}
add_widget(w, index){
this.old_add_widget(w, index);
this.content_box.add_widget(w, index);
if (this.auto_open){
this.open();
}
}
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'
} else {
console.log('auto_open is ', this.auto_open, ' so not auto open it', this.opts, w);
}
}
open(){
@ -156,40 +224,28 @@ bricks.Popup = class extends bricks.VBox {
return;
}
this.opened = true;
if (this.widget instanceof bricks.JsWidget){
this.target_w = this.widget;
this.issub = true;
} else {
var w = bricks.getWidgetById(this.widget, bricks.Body);
if (w){
this.issub = true
this.target_w = w;
}
}
rect = this.target_w.showRectage();
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);
if (this.no_opened){
if (this.widget instanceof bricks.JsWidget){
this.target_w = this.widget;
this.issub = true;
} else {
var w = bricks.getWidgetById(this.widget, bricks.Body);
if (w){
this.issub = true
this.target_w = w;
}
}
this.positify_tl()
}
this.set_style('top',lt.top);
this.set_style('left',lt.left);
this.no_opened = false;
this.set_style('display', 'block');
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.content_box.disabled(false);
}
dismiss(){
if (this.opts.modal){
@ -226,18 +282,24 @@ bricks.PopupWindow = class extends bricks.Popup {
}
*/
constructor(opts){
opts.moviable = true;
opts.resizable = true;
opts.auto_open = true;
opts.auto_dismiss = false;
opts.auto_destroy = false;
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.auto_destroy = false;
this.moving_w = this.title_bar;
this.old_add_widget = bricks.Layout.prototype.add_widget.bind(this);
this.old_add_widget(this.title_bar);
this.parent_add_widget(this.title_bar);
this.build_title_bar();
var filler = new bricks.Filler({});
this.old_add_widget(filler)
this.content_w = new bricks.VScrollPanel({width:"100%"});
this.parent_add_widget(filler)
this.content_w = new bricks.Layout({});
this.content_w.set_css('flexbox');
this.auto_open = true;
filler.add_widget(this.content_w);
console.log(this.auto_open, 'opts=', opts);
}
async load_content(){
var dic = {
@ -295,10 +357,20 @@ bricks.PopupWindow = class extends bricks.Popup {
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){
console.log('auto_open=', this.auto_open);
this.content_w.add_widget(w, index);
if (this.auto_open){
this.open();
} else {
this.open();
console.log('auto_open is false, not auto open');
}
}
open(){

2
bricks/tree.js
View File

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