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