diff --git a/DNN Platform/Modules/ResourceManager/App_LocalResources/ResourceManager.resx b/DNN Platform/Modules/ResourceManager/App_LocalResources/ResourceManager.resx index 2f22db0bc47..52c267f078a 100644 --- a/DNN Platform/Modules/ResourceManager/App_LocalResources/ResourceManager.resx +++ b/DNN Platform/Modules/ResourceManager/App_LocalResources/ResourceManager.resx @@ -318,4 +318,22 @@ New Location + + Name + + + Last Modified + + + Size + + + Parent Folder + + + Date Created + + + Sort + \ No newline at end of file diff --git a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components.d.ts b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components.d.ts index 8ca677ad6da..8add285841a 100644 --- a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components.d.ts +++ b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components.d.ts @@ -14,6 +14,9 @@ export namespace Components { interface DnnRmActionsBar { } interface DnnRmFilesPane { + /** + * Defines how much more pixels to load under the fold. + */ "preloadOffset": number; } interface DnnRmFolderList { @@ -131,6 +134,9 @@ declare namespace LocalJSX { interface DnnRmActionsBar { } interface DnnRmFilesPane { + /** + * Defines how much more pixels to load under the fold. + */ "preloadOffset"?: number; } interface DnnRmFolderList { diff --git a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components/dnn-resource-manager/dnn-resource-manager.tsx b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components/dnn-resource-manager/dnn-resource-manager.tsx index b6c8a127ad9..fc344dd7c94 100644 --- a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components/dnn-resource-manager/dnn-resource-manager.tsx +++ b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components/dnn-resource-manager/dnn-resource-manager.tsx @@ -1,6 +1,7 @@ import { Component, Host, h, State, Watch, Prop } from '@stencil/core'; import state from "../../store/store"; import { LocalizationClient } from "../../services/LocalizationClient"; +import { sortField } from '../../enums/SortField'; const localStorageSplitWidthKey = "dnn-resource-manager-last-folders-width"; @Component({ @@ -30,9 +31,19 @@ export class DnnResourceManager { } componentWillLoad() { - this.localizationClient.getResources() - .then(resources => state.localization = resources) - .catch(error => console.error(error)); + return new Promise((resolve, reject) => { + this.localizationClient.getResources() + .then(resources => + { + state.localization = resources; + state.sortField = sortField.itemName; + resolve(); + }) + .catch(error => { + console.error(error); + reject(); + }); + }) } private splitView: HTMLDnnVerticalSplitviewElement; diff --git a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components/dnn-rm-actions-bar/dnn-rm-actions-bar.scss b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components/dnn-rm-actions-bar/dnn-rm-actions-bar.scss index c98b4e45280..a6f62c226de 100644 --- a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components/dnn-rm-actions-bar/dnn-rm-actions-bar.scss +++ b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components/dnn-rm-actions-bar/dnn-rm-actions-bar.scss @@ -12,12 +12,46 @@ button{ border:0; padding:0; margin:0; + cursor: pointer; svg{ fill: var(--dnn-color-primary); } } .right-controls{ + display: flex; margin: 0 1em; + gap: 1em; + .sort{ + position: relative; + dnn-collapsible{ + position: absolute; + top: 100%; + right: 0; + background-color: white;; + &[expanded]{ + border: 1px solid lightgray; + box-shadow: 2px 2px 4px -2px; + } + .dropdown{ + display: flex; + flex-direction: column; + background-color: white;; + button{ + background-color:transparent; + border: none; + padding: 0.5em 1em; + margin: 0; + border-bottom: 1px solid lightgray; + white-space: nowrap; + svg{ + height: 1em; + width: 1em; + margin-right: 0.5em; + } + } + } + } + } } dnn-vertical-overflow-menu{ flex-grow: 1; diff --git a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components/dnn-rm-actions-bar/dnn-rm-actions-bar.tsx b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components/dnn-rm-actions-bar/dnn-rm-actions-bar.tsx index 5eb89da972c..bfd302fe7d3 100644 --- a/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components/dnn-rm-actions-bar/dnn-rm-actions-bar.tsx +++ b/DNN Platform/Modules/ResourceManager/ResourceManager.Web/src/components/dnn-rm-actions-bar/dnn-rm-actions-bar.tsx @@ -1,5 +1,6 @@ -import { Component, Host, h } from '@stencil/core'; +import { Component, Host, h, State } from '@stencil/core'; import state from '../../store/store'; +import { sortField, SortFieldInfo } from "../../enums/SortField"; @Component({ tag: 'dnn-rm-actions-bar', @@ -7,6 +8,8 @@ import state from '../../store/store'; shadow: true, }) export class DnnRmActionsBar { + + @State() sortDropdownExpanded: boolean = false; private changeLayout(): void { if (state.layout == "card"){ @@ -17,6 +20,31 @@ export class DnnRmActionsBar { state.layout = "card"; } + private renderSortButton(sortOption: SortFieldInfo){ + return( + + ); + } + + private renderRadioButton(checked = false){ + if (checked){ + return + } + else{ + return + } + } + render() { return ( @@ -39,6 +67,23 @@ export class DnnRmActionsBar {
+
+ + + + +