From 5ffb203a368d057c7eb116524e0a8a9b4bdfe120 Mon Sep 17 00:00:00 2001 From: DanyLE Date: Wed, 1 Feb 2023 18:42:54 +0100 Subject: [PATCH] Update style for GridView, FileView and ListView --- src/core/tags/GridViewTag.ts | 131 ++++++++++------------- src/packages/Files/main.css | 11 -- src/themes/antos_dark/afx-file-view.css | 7 -- src/themes/antos_dark/afx-grid-view.css | 21 +++- src/themes/antos_dark/afx-list-view.css | 1 + src/themes/antos_light/afx-file-view.css | 6 -- src/themes/antos_light/afx-grid-view.css | 20 +++- src/themes/system/afx-grid-view.css | 6 ++ 8 files changed, 104 insertions(+), 99 deletions(-) diff --git a/src/core/tags/GridViewTag.ts b/src/core/tags/GridViewTag.ts index ccac5a6..0221948 100644 --- a/src/core/tags/GridViewTag.ts +++ b/src/core/tags/GridViewTag.ts @@ -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 - ): 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 >; - + /** * 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 - ): void => {}; + ): void => { }; this._ondragndrop = ( e: TagEventType> - ) => {}; + ) => { }; } /** @@ -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 = $(``).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[][]) { 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[], b:GenericObject[]) => 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[], b:GenericObject[], index?: number) => number): void { + /** + * Sort the grid using a sort function + * + * @param {context: any} context of the executed function + * @param {(a:GenericObject[], b:GenericObject[]) => 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[], b: GenericObject[], 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; diff --git a/src/packages/Files/main.css b/src/packages/Files/main.css index bcc875c..4881ac1 100644 --- a/src/packages/Files/main.css +++ b/src/packages/Files/main.css @@ -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; diff --git a/src/themes/antos_dark/afx-file-view.css b/src/themes/antos_dark/afx-file-view.css index 0d014ed..3f7be4a 100644 --- a/src/themes/antos_dark/afx-file-view.css +++ b/src/themes/antos_dark/afx-file-view.css @@ -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"; diff --git a/src/themes/antos_dark/afx-grid-view.css b/src/themes/antos_dark/afx-grid-view.css index af179b5..6cc4002 100644 --- a/src/themes/antos_dark/afx-grid-view.css +++ b/src/themes/antos_dark/afx-grid-view.css @@ -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; +} \ No newline at end of file diff --git a/src/themes/antos_dark/afx-list-view.css b/src/themes/antos_dark/afx-list-view.css index 6440a21..a3cc0c4 100644 --- a/src/themes/antos_dark/afx-list-view.css +++ b/src/themes/antos_dark/afx-list-view.css @@ -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; diff --git a/src/themes/antos_light/afx-file-view.css b/src/themes/antos_light/afx-file-view.css index 05a83a7..08248dd 100644 --- a/src/themes/antos_light/afx-file-view.css +++ b/src/themes/antos_light/afx-file-view.css @@ -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"; diff --git a/src/themes/antos_light/afx-grid-view.css b/src/themes/antos_light/afx-grid-view.css index 98880cc..9655b89 100644 --- a/src/themes/antos_light/afx-grid-view.css +++ b/src/themes/antos_light/afx-grid-view.css @@ -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; +} \ No newline at end of file diff --git a/src/themes/system/afx-grid-view.css b/src/themes/system/afx-grid-view.css index 669c5e3..e0defc3 100644 --- a/src/themes/system/afx-grid-view.css +++ b/src/themes/system/afx-grid-view.css @@ -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; } \ No newline at end of file