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

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

@ -516,12 +516,10 @@ namespace OS {
*/
set dragndrop(v: boolean) {
this.attsw(v, "dragndrop");
if(!v)
{
if (!v) {
$(this.refs.container).off("mousedown", this._onmousedown);
}
else
{
else {
$(this.refs.container).on(
"mousedown",
this._onmousedown
@ -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];
@ -760,47 +754,39 @@ namespace OS {
set rows(rows: GenericObject<any>[][]) {
this._rows = rows;
if (!rows) return;
for(const el of this._header)
{
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)
{
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);
}
}
@ -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;
}
}
@ -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

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