dany/antos-frontend
1
0
Fork 0
mirror of https://github.com/lxsang/antos-frontend.git synced 2024-09-19 23:36:39 +02:00
Code Issues 1 Actions Projects Releases Wiki Activity

Update style for GridView, FileView and ListView

Browse Source
This commit is contained in:
DanyLE 2023-02-01 18:42:54 +01:00 committed by Dany LE
parent 1063ae9c4f
commit 7196f9ff57
8 changed files with 104 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
src/core/tags/GridViewTag.ts
View File

@ -57,9 +57,9 @@ namespace OS {
super(); super();
this.refs.yield = this; this.refs.yield = this;
this._onselect = (e) => {}; this._onselect = (e) => { };
} }
/** /**
* Set item select event handle * Set item select event handle
* *
@ -95,7 +95,7 @@ namespace OS {
* @protected * @protected
* @memberof GridRowTag * @memberof GridRowTag
*/ */
protected mount(): void {} protected mount(): void { }
/** /**
* Init the tag before mounting: reset the data placeholder * Init the tag before mounting: reset the data placeholder
@ -124,7 +124,7 @@ namespace OS {
* @protected * @protected
* @memberof GridRowTag * @memberof GridRowTag
*/ */
protected calibrate(): void {} protected calibrate(): void { }
/** /**
* This function does nothing in this tag * This function does nothing in this tag
@ -133,7 +133,7 @@ namespace OS {
* @param {*} [d] * @param {*} [d]
* @memberof GridRowTag * @memberof GridRowTag
*/ */
protected reload(d?: any): void {} protected reload(d?: any): void { }
} }
/** /**
@ -277,10 +277,10 @@ namespace OS {
$(this).attr("class", "afx-grid-cell"); $(this).attr("class", "afx-grid-cell");
this.oncelldbclick = this.oncellselect = ( this.oncelldbclick = this.oncellselect = (
e: TagEventType<GridCellPrototype> e: TagEventType<GridCellPrototype>
): void => {}; ): void => { };
this.selected = false; this.selected = false;
//$(this).css("display", "block"); //$(this).css("display", "block");
$(this).on("click",(e) => { $(this).on("click", (e) => {
let evt = { id: this.aid, data: this }; let evt = { id: this.aid, data: this };
return this.cellselect(evt, false); return this.cellselect(evt, false);
}); });
@ -358,7 +358,7 @@ namespace OS {
* @protected * @protected
* @memberof SimpleGridCellTag * @memberof SimpleGridCellTag
*/ */
protected init(): void {} protected init(): void { }
/** /**
* This function do nothing in this tag * This function do nothing in this tag
@ -366,7 +366,7 @@ namespace OS {
* @protected * @protected
* @memberof SimpleGridCellTag * @memberof SimpleGridCellTag
*/ */
protected calibrate(): void {} protected calibrate(): void { }
/** /**
* The layout of the cell with a simple [[LabelTag]] * The layout of the cell with a simple [[LabelTag]]
@ -486,7 +486,7 @@ namespace OS {
private _ondragndrop: TagEventCallback< private _ondragndrop: TagEventCallback<
DnDEventDataType<GridRowTag> DnDEventDataType<GridRowTag>
>; >;
/** /**
* Creates an instance of GridViewTag. * Creates an instance of GridViewTag.
* @memberof GridViewTag * @memberof GridViewTag
@ -506,7 +506,7 @@ namespace OS {
this._ondragndrop = v; this._ondragndrop = v;
this.dragndrop = this.dragndrop; this.dragndrop = this.dragndrop;
} }
/** /**
* Setter: Enable/disable drag and drop event in the list * Setter: Enable/disable drag and drop event in the list
* *
@ -516,13 +516,11 @@ namespace OS {
*/ */
set dragndrop(v: boolean) { set dragndrop(v: boolean) {
this.attsw(v, "dragndrop"); this.attsw(v, "dragndrop");
if(!v) if (!v) {
{
$(this.refs.container).off("mousedown", this._onmousedown); $(this.refs.container).off("mousedown", this._onmousedown);
} }
else else {
{ $(this.refs.container).on(
$(this.refs.container).on(
"mousedown", "mousedown",
this._onmousedown this._onmousedown
); );
@ -576,10 +574,10 @@ namespace OS {
this.dragndrop = false; this.dragndrop = false;
this._oncellselect = this._onrowselect = this._oncelldbclick = ( this._oncellselect = this._onrowselect = this._oncelldbclick = (
e: TagEventType<CellEventData> e: TagEventType<CellEventData>
): void => {}; ): void => { };
this._ondragndrop = ( this._ondragndrop = (
e: TagEventType<DnDEventDataType<GridRowTag>> e: TagEventType<DnDEventDataType<GridRowTag>>
) => {}; ) => { };
} }
/** /**
@ -589,7 +587,7 @@ namespace OS {
* @param {*} [d] * @param {*} [d]
* @memberof GridViewTag * @memberof GridViewTag
*/ */
protected reload(d?: any): void {} protected reload(d?: any): void { }
/** /**
* set the cell select event callback * set the cell select event callback
@ -642,8 +640,7 @@ namespace OS {
set cellitem(v: string) { set cellitem(v: string) {
const currci = this.cellitem; const currci = this.cellitem;
$(this).attr("cellitem", v); $(this).attr("cellitem", v);
if(v != currci) if (v != currci) {
{
// force render data // force render data
$(this.refs.grid).empty(); $(this.refs.grid).empty();
this.rows = this.rows; this.rows = this.rows;
@ -680,15 +677,12 @@ namespace OS {
element.data = item; element.data = item;
item.domel = element; item.domel = element;
element.oncellselect = (e) => { element.oncellselect = (e) => {
if(element.data.sort) if (element.data.sort) {
{
this.sort(element.data, element.data.sort); this.sort(element.data, element.data.sort);
if(element.data.desc) if (element.data.desc) {
{
$(element).attr("sort", "desc"); $(element).attr("sort", "desc");
} }
else else {
{
$(element).attr("sort", "asc"); $(element).attr("sort", "asc");
} }
} }
@ -699,7 +693,7 @@ namespace OS {
const rz = $(`<afx-resizer>`).appendTo( const rz = $(`<afx-resizer>`).appendTo(
this.refs.header this.refs.header
)[0] as ResizerTag; )[0] as ResizerTag;
$(rz).css("width", "3px"); $(rz).css("width", "1px");
let next_item = undefined; let next_item = undefined;
if (i < v.length) { if (i < v.length) {
next_item = v[i]; next_item = v[i];
@ -759,48 +753,40 @@ namespace OS {
*/ */
set rows(rows: GenericObject<any>[][]) { set rows(rows: GenericObject<any>[][]) {
this._rows = rows; this._rows = rows;
if(!rows) return; if (!rows) return;
for(const el of this._header) for (const el of this._header) {
{
$(el.domel).attr("sort", "none"); $(el.domel).attr("sort", "none");
} }
// update existing row with new data // update existing row with new data
const ndrows = rows.length; const ndrows = rows.length;
const ncrows = this.refs.grid.children.length; const ncrows = this.refs.grid.children.length;
const nmin = ndrows < ncrows? ndrows: ncrows; const nmin = ndrows < ncrows ? ndrows : ncrows;
if(this.selectedRow) if (this.selectedRow) {
{
this.selectedRow.selected = false; this.selectedRow.selected = false;
this._selectedRow = undefined; this._selectedRow = undefined;
this._selectedRows = []; this._selectedRows = [];
} }
for(let i = 0; i < nmin; i++) for (let i = 0; i < nmin; i++) {
{
const rowel = (this.refs.grid.children[i] as GridRowTag); const rowel = (this.refs.grid.children[i] as GridRowTag);
rowel.data = rows[i]; rowel.data = rows[i];
rowel.data.domel = rowel; rowel.data.domel = rowel;
for(let celi = 0; celi < rowel.children.length; celi++) for (let celi = 0; celi < rowel.children.length; celi++) {
{
const cel = (rowel.children[celi] as GridCellPrototype); const cel = (rowel.children[celi] as GridCellPrototype);
cel.data = rows[i][celi]; cel.data = rows[i][celi];
cel.data.domel = cel; cel.data.domel = cel;
} }
} }
// remove existing remaining rows // remove existing remaining rows
if(ndrows < ncrows) if (ndrows < ncrows) {
{
const arr = Array.prototype.slice.call(this.refs.grid.children); const arr = Array.prototype.slice.call(this.refs.grid.children);
const blacklist = arr.slice(nmin, ncrows); const blacklist = arr.slice(nmin, ncrows);
for(const r of blacklist) for (const r of blacklist) {
{
this.delete(r); this.delete(r);
} }
} }
// or add more rows // or add more rows
else if(ndrows > ncrows) else if (ndrows > ncrows) {
{ for (let i = nmin; i < ndrows; i++) {
for(let i = nmin; i < ndrows; i++)
{
this.push(rows[i], false); this.push(rows[i], false);
} }
} }
@ -836,22 +822,22 @@ namespace OS {
get resizable(): boolean { get resizable(): boolean {
return this.hasattr("resizable"); return this.hasattr("resizable");
} }
/** /**
* Sort the grid using a sort function * Sort the grid using a sort function
* *
* @param {context: any} context of the executed function * @param {context: any} context of the executed function
* @param {(a:GenericObject<any>[], b:GenericObject<any>[]) => boolean} a sort function that compares two rows data * @param {(a:GenericObject<any>[], b:GenericObject<any>[]) => boolean} a sort function that compares two rows data
* * @param {index: number} current header index * * @param {index: number} current header index
* @returns {void} * @returns {void}
* @memberof GridViewTag * @memberof GridViewTag
*/ */
sort(context: any, fn: (a:GenericObject<any>[], b:GenericObject<any>[], index?: number) => number): void { sort(context: any, fn: (a: GenericObject<any>[], b: GenericObject<any>[], index?: number) => number): void {
const index = this._header.indexOf(context); const index = this._header.indexOf(context);
const __fn = (a, b) => { const __fn = (a, b) => {
return fn.call(context,a, b, index); return fn.call(context, a, b, index);
} }
this._rows.sort(__fn); this._rows.sort(__fn);
context.desc = ! context.desc; context.desc = !context.desc;
this.rows = this._rows; this.rows = this._rows;
} }
/** /**
@ -929,7 +915,7 @@ namespace OS {
} }
el.onrowselect = (e) => this.rowselect({ el.onrowselect = (e) => this.rowselect({
id: el.aid, id: el.aid,
data: {item: el} data: { item: el }
}); });
} }
@ -1009,12 +995,9 @@ namespace OS {
} }
evt.data.items = this.selectedRows; evt.data.items = this.selectedRows;
} else { } else {
if(this.selectedRows.length > 0) if (this.selectedRows.length > 0) {
{ for (const item of this.selectedRows) {
for(const item of this.selectedRows) if (item != row) {
{
if(item != row)
{
item.selected = false; item.selected = false;
} }
} }
@ -1022,7 +1005,7 @@ namespace OS {
if (this.selectedRow === row) { if (this.selectedRow === row) {
return; return;
} }
if(this.selectedRow) if (this.selectedRow)
this.selectedRow.selected = false; this.selectedRow.selected = false;
evt.data.items = [row]; evt.data.items = [row];
this._selectedRows = [row]; this._selectedRows = [row];
@ -1071,8 +1054,8 @@ namespace OS {
$(this.refs.container).css( $(this.refs.container).css(
"height", "height",
$(this).height() - $(this).height() -
$(this.refs.header).height() + $(this.refs.header).height() +
"px" "px"
); );
} else { } else {
$(this.refs.container).css( $(this.refs.container).css(
@ -1122,8 +1105,8 @@ namespace OS {
let i = 0; let i = 0;
for (let v of colssize) { for (let v of colssize) {
template += `${v}px `; template += `${v}px `;
i++;
template_header += `${v}px `; template_header += `${v}px `;
i++;
if (i < colssize.length && this.resizable) { if (i < colssize.length && this.resizable) {
template_header += "3px "; template_header += "3px ";
} }
@ -1133,6 +1116,10 @@ namespace OS {
"grid-template-columns", "grid-template-columns",
template_header template_header
); );
if(this.resizable)
{
$(this.refs.grid).css("column-gap","3px");
}
} }
/** /**
@ -1157,8 +1144,7 @@ namespace OS {
to: undefined, to: undefined,
}; };
this._onmousedown = (e) => { this._onmousedown = (e) => {
if(this.multiselect || this.selectedRows == undefined || this.selectedRows.length == 0) if (this.multiselect || this.selectedRows == undefined || this.selectedRows.length == 0) {
{
return; return;
} }
let el: any = $(e.target).closest("afx-grid-row"); let el: any = $(e.target).closest("afx-grid-row");
@ -1166,8 +1152,7 @@ namespace OS {
return; return;
} }
el = el[0]; el = el[0];
if(!this.selectedRows.includes(el)) if (!this.selectedRows.includes(el)) {
{
return; return;
} }
this._dnd.from = this.selectedRows; this._dnd.from = this.selectedRows;

11
src/packages/Files/main.css
View File

@ -6,10 +6,6 @@ afx-app-window[data-id ='files-app-window'] afx-list-view[data-id='favouri']{
/* border-top:1px solid #A6A6A6; */ /* border-top:1px solid #A6A6A6; */
padding:0; padding:0;
} }
afx-app-window[data-id ='files-app-window'] afx-resizer{
background-color: transparent;
/* border-left: 1px solid #cbcbcb; */
}
afx-app-window[data-id ='files-app-window'] afx-file-view afx-list-view i:before{ afx-app-window[data-id ='files-app-window'] afx-file-view afx-list-view i:before{
font-size: 32px; font-size: 32px;
font-weight: normal; font-weight: normal;
@ -29,13 +25,6 @@ afx-app-window[data-id ='files-app-window'] .afx-window-top{
afx-app-window[data-id ='files-app-window'] afx-vbox[data-id = "nav-bar"]{ afx-app-window[data-id ='files-app-window'] afx-vbox[data-id = "nav-bar"]{
background-color: #dfdfdf; background-color: #dfdfdf;
} }
afx-app-window[data-id ='files-app-window'] afx-grid-view afx-grid-row.grid_row_header div{
border-top:1px solid #A6A6A6;
}
afx-app-window[data-id ='files-app-window'] afx-grid-view afx-grid-row afx-label span {
white-space: nowrap;
}
afx-app-window[data-id ='files-app-window'] button{ afx-app-window[data-id ='files-app-window'] button{
border-radius: 0; border-radius: 0;

7
src/themes/antos_dark/afx-file-view.css
View File

@ -63,13 +63,6 @@ afx-file-view afx-grid-view afx-grid-row.afx-grid-row-selected i:before{
color:white; color:white;
} }
afx-file-view afx-grid-view .grid_row_header afx-grid-cell{
background-color: #464646;
border-top: 1px solid #262626;
border-right: 1px solid #262626;
border-bottom: 1px solid #262626;
}
afx-file-view afx-tree-view .afx-tree-view-folder-close:before{ afx-file-view afx-tree-view .afx-tree-view-folder-close:before{
content: "\f07b"; content: "\f07b";
font-family: "FontAwesome"; font-family: "FontAwesome";

21
src/themes/antos_dark/afx-grid-view.css
View File

@ -5,7 +5,7 @@ afx-grid-view afx-grid-row:nth-child(even) afx-grid-cell
afx-grid-view afx-grid-row:nth-child(odd) afx-grid-cell afx-grid-view afx-grid-row:nth-child(odd) afx-grid-cell
{ {
background-color: #363636; background-color: #474747;
} }
afx-grid-view afx-grid-row.afx-grid-row-selected afx-grid-cell afx-grid-view afx-grid-row.afx-grid-row-selected afx-grid-cell
@ -22,3 +22,22 @@ afx-grid-view afx-grid-row.afx-grid-row-selected afx-grid-cell.afx-grid-cell-sel
afx-grid-view .grid_row_header afx-grid-cell{ afx-grid-view .grid_row_header afx-grid-cell{
border:0; border:0;
} }
afx-grid-view afx-grid-row.grid_row_header div{
border-top:1px solid #A6A6A6;
}
afx-grid-view afx-resizer.horizontal{
background-color: transparent;
border-left: 1px solid #262626;
border-right: 1px solid #262626;
/* border-left: 1px solid #cbcbcb; */
}
afx-grid-view .grid_row_header afx-grid-cell{
background-color: #373737;
border-top: 1px solid #262626;
/*border-right: 1px solid #262626;*/
border-bottom: 1px solid #262626;
}

1
src/themes/antos_dark/afx-list-view.css
View File

@ -27,6 +27,7 @@ afx-list-view.dropdown div.list-container > div > afx-label
{ {
border:1px solid #262626; border:1px solid #262626;
border-radius: 3px; border-radius: 3px;
background-color: #474747;
} }
afx-list-view.dropdown { afx-list-view.dropdown {
color: white; color: white;

6
src/themes/antos_light/afx-file-view.css
View File

@ -58,12 +58,6 @@ afx-file-view afx-grid-view i{
afx-file-view afx-grid-view afx-grid-row.afx-grid-row-selected i:before{ afx-file-view afx-grid-view afx-grid-row.afx-grid-row-selected i:before{
color:white; color:white;
} }
afx-file-view afx-grid-view .grid_row_header afx-grid-cell{
background-color: #dfdfdf;
border-top: 1px solid #a6a6a6;
border-right: 1px solid #a6a6a6;
border-bottom: 1px solid #a6a6a6;
}
afx-file-view afx-tree-view .afx-tree-view-folder-close:before{ afx-file-view afx-tree-view .afx-tree-view-folder-close:before{
content: "\f07b"; content: "\f07b";

20
src/themes/antos_light/afx-grid-view.css
View File

@ -4,7 +4,7 @@ afx-grid-view afx-grid-row:nth-child(even) afx-grid-cell
} }
afx-grid-view afx-grid-row:nth-child(odd) afx-grid-cell afx-grid-view afx-grid-row:nth-child(odd) afx-grid-cell
{ {
background-color: white; background-color: #E6E6E6;
} }
afx-grid-view afx-grid-row.afx-grid-row-selected afx-grid-cell afx-grid-view afx-grid-row.afx-grid-row-selected afx-grid-cell
{ {
@ -20,3 +20,21 @@ afx-grid-view afx-grid-row.afx-grid-row-selected afx-grid-cell.afx-grid-cell-sel
afx-grid-view .grid_row_header afx-grid-cell{ afx-grid-view .grid_row_header afx-grid-cell{
border: 0; border: 0;
} }
afx-grid-view afx-grid-row.grid_row_header div{
border-top:1px solid #A6A6A6;
}
afx-grid-view afx-resizer.horizontal{
background-color: transparent;
border-left: 1px solid #a6a6a6;
border-right: 1px solid #a6a6a6;
/* border-left: 1px solid #cbcbcb; */
}
afx-grid-view .grid_row_header afx-grid-cell{
background-color: #dfdfdf;
border-top: 1px solid #a6a6a6;
/*border-right: 1px solid #a6a6a6;*/
border-bottom: 1px solid #a6a6a6;
}

6
src/themes/system/afx-grid-view.css
View File

@ -43,4 +43,10 @@ afx-grid-view .grid_row_header afx-grid-cell[sort = "desc"] span::before
font-family: "bootstrap-icons"; font-family: "bootstrap-icons";
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
}
afx-grid-view afx-grid-row afx-label span {
white-space: nowrap;
overflow: hidden;
justify-content: flex-start;
} }