dany/antos-frontend
1
0
Fork 0
mirror of https://github.com/lxsang/antos-frontend.git synced 2025-04-23 15:46:45 +02:00
Code Issues 1 Actions Projects Releases Wiki Activity

Update style for GridView, FileView and ListView
All checks were successful
gitea-sync/antos/pipeline/head This commit looks good
Details

Browse Source
This commit is contained in:
DanyLE 2023-02-01 18:42:54 +01:00
parent 70b1f25e7f
commit 5ffb203a36
8 changed files with 104 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -516,12 +516,10 @@ 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
@ -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];
@ -760,47 +754,39 @@ 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);
} }
} }
@ -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;
} }
} }
@ -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

@ -44,3 +44,9 @@ afx-grid-view .grid_row_header afx-grid-cell[sort = "desc"] span::before
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;
}