@progress/kendo-themes-html 7.1.0-dev.8 → 7.1.0-dev.9

package/src/filemanager/templates/filemanager-grid.tsx

@@ -0,0 +1,128 @@
+import { FileManager, FileManagerBreadcrumb, FileManagerToolbar, FileManagerTreeview, FilePreview } from "..";
+import { BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from "../../breadcrumb";
+import { Button } from "../../button";
+import { ButtonGroup } from "../../button-group";
+import { Icon } from "../../icon";
+import { Searchbox } from "../../searchbox";
+import { SplitButton } from "../../split-button";
+import { Splitter, SplitterPane } from "../../splitter";
+import { Switch } from "../../switch";
+import { Table, TableThead, TableRow, TableTh, TableTbody, TableTd } from "../../table";
+import { TreeviewItem } from "../../treeview";
+
+export const FileManagerGrid = (props) => (
+    <FileManager toolbar={
+        <FileManagerToolbar>
+            <Button>New Folder</Button>
+            <Button>Upload</Button>
+            <ButtonGroup>
+                <Button icon="sort-asc-small"></Button>
+                <Button icon="sort-desc-small"></Button>
+            </ButtonGroup>
+            <SplitButton text="Sort By" />
+            <ButtonGroup>
+                <Button icon="grid-layout" selected></Button>
+                <Button icon="grid"></Button>
+            </ButtonGroup>
+            <div className="k-spacer"></div>
+            <div className="k-filemanager-details-toggle">
+                <label>View Details</label>
+                <Switch />
+            </div>
+            <Searchbox className="k-filemanager-search-tool" placeholder="Search..." />
+        </FileManagerToolbar>
+    }
+    children={
+        <>
+            <Splitter className="k-filemanager-splitter">
+                <SplitterPane className="k-filemanager-navigation" collapsible scrollable flexBasis="25%">
+                    <FileManagerTreeview>
+                        <TreeviewItem text="Folder" />
+                    </FileManagerTreeview>
+                </SplitterPane>
+
+                <SplitterPane className="k-filemanager-content" scrollable>
+                    <FileManagerBreadcrumb>
+                        <BreadcrumbContainer>
+                            <BreadcrumbItem root>
+                                <BreadcrumbLink root icon>
+                                    <Icon icon="home" />
+                                </BreadcrumbLink>
+                            </BreadcrumbItem>
+                        </BreadcrumbContainer>
+                    </FileManagerBreadcrumb>
+
+                    <div className="k-filemanager-grid k-grid k-grid-md k-grid-display-block k-editable">
+                        <div className="k-grid-header">
+                            <div className="k-grid-header-wrap k-auto-scrollable">
+                                <Table className="k-table-md k-grid-header-table">
+                                    <colgroup>
+                                        <col />
+                                        <col />
+                                        <col />
+                                    </colgroup>
+                                    <TableThead>
+                                        <TableRow>
+                                            <TableTh className="k-header k-sorted">
+                                                <span className="k-cell-inner">
+                                                    <span className="k-link">
+                                                        <span className="k-column-title">Name</span>
+                                                        <span className="k-sort-icon">
+                                                            <Icon icon="sort-asc-small" />
+                                                        </span>
+                                                    </span>
+                                                </span>
+                                            </TableTh>
+                                            <TableTh className="k-header">
+                                                <span className="k-cell-inner">
+                                                    <span className="k-link">
+                                                        <span className="k-column-title">Date Created</span>
+                                                    </span>
+                                                </span>
+                                            </TableTh>
+                                            <TableTh className="k-header">
+                                                <span className="k-cell-inner">
+                                                    <span className="k-link">
+                                                        <span className="k-column-title">File Size</span>
+                                                    </span>
+                                                </span>
+                                            </TableTh>
+                                        </TableRow>
+                                    </TableThead>
+                                </Table>
+
+                            </div>
+                        </div>
+                        <div className="k-grid-content k-auto-scrollable">
+                            <Table className="k-table-md k-grid-table k-selectable">
+                                <colgroup>
+                                    <col className="k-sorted" />
+                                    <col />
+                                    <col />
+                                </colgroup>
+                                <TableTbody>
+                                    <TableRow>
+                                        <TableTd>
+                                            <FilePreview name="Folder" icon="folder" />
+                                        </TableTd>
+                                        <TableTd>13/12/2019 at 12:22:04 PM</TableTd>
+                                        <TableTd>0</TableTd>
+                                    </TableRow>
+                                    <TableRow alt>
+                                        <TableTd>
+                                            <FilePreview name="file.png" icon="file" />
+                                        </TableTd>
+                                        <TableTd>13/12/2019 at 12:22:04 PM</TableTd>
+                                        <TableTd>73289</TableTd>
+                                    </TableRow>
+                                </TableTbody>
+                            </Table>
+                        </div>
+                    </div>
+                </SplitterPane>
+            </Splitter>
+        </>
+    }
+    {...props}>
+    </FileManager>
+);

package/src/filemanager/templates/filemanager-normal.tsx

@@ -0,0 +1,69 @@
+import { FileManager, FileManagerBreadcrumb, FileManagerListView, FileManagerToolbar, FileManagerTreeview, FilePreview } from "..";
+import { BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from "../../breadcrumb";
+import { Button } from "../../button";
+import { ButtonGroup } from "../../button-group";
+import { Icon } from "../../icon";
+import { ListViewItem } from "../../listview";
+import { Searchbox } from "../../searchbox";
+import { SplitButton } from "../../split-button";
+import { Splitter, SplitterPane } from "../../splitter";
+import { Switch } from "../../switch";
+import { TreeviewItem } from "../../treeview";
+
+export const FileManagerNormal = (props) => (
+    <FileManager toolbar={
+        <FileManagerToolbar>
+            <Button>New Folder</Button>
+            <Button>Upload</Button>
+            <ButtonGroup>
+                <Button icon="sort-asc-small"></Button>
+                <Button icon="sort-desc-small"></Button>
+            </ButtonGroup>
+            <SplitButton text="Sort By" />
+            <ButtonGroup>
+                <Button icon="grid-layout"></Button>
+                <Button icon="grid" selected></Button>
+            </ButtonGroup>
+            <div className="k-spacer"></div>
+            <div className="k-filemanager-details-toggle">
+                <label>View Details</label>
+                <Switch/>
+            </div>
+            <Searchbox className="k-filemanager-search-tool" placeholder="Search..." />
+        </FileManagerToolbar>
+    }
+    children={
+        <>
+            <Splitter className="k-filemanager-splitter">
+                <SplitterPane className="k-filemanager-navigation" collapsible scrollable flexBasis="25%">
+                    <FileManagerTreeview>
+                        <TreeviewItem text="Folder" />
+                    </FileManagerTreeview>
+                </SplitterPane>
+
+                <SplitterPane className="k-filemanager-content" scrollable>
+                    <FileManagerBreadcrumb>
+                        <BreadcrumbContainer>
+                            <BreadcrumbItem root>
+                                <BreadcrumbLink root icon>
+                                    <Icon icon="home" />
+                                </BreadcrumbLink>
+                            </BreadcrumbItem>
+                        </BreadcrumbContainer>
+                    </FileManagerBreadcrumb>
+
+                    <FileManagerListView>
+                        <ListViewItem>
+                            <FilePreview name="Folder" icon="folder" size="xxxlarge"/>
+                        </ListViewItem>
+                        <ListViewItem>
+                            <FilePreview name="file.png" icon="file-image" size="xxxlarge"/>
+                        </ListViewItem>
+                    </FileManagerListView>
+                </SplitterPane>
+            </Splitter>
+        </>
+    }
+    {...props}>
+    </FileManager>
+);

package/src/filemanager/templates/filemanager-preview.tsx

@@ -0,0 +1,74 @@
+import { FileInfo, FileManager, FileManagerBreadcrumb, FileManagerListView, FileManagerToolbar, FileManagerTreeview, FilePreview } from "..";
+import { BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from "../../breadcrumb";
+import { Button } from "../../button";
+import { ButtonGroup } from "../../button-group";
+import { Icon } from "../../icon";
+import { ListViewItem } from "../../listview";
+import { Searchbox } from "../../searchbox";
+import { SplitButton } from "../../split-button";
+import { Splitter, SplitterPane } from "../../splitter";
+import { Switch } from "../../switch";
+import { TreeviewItem } from "../../treeview";
+
+export const FileManagerPreview = (props) => (
+    <FileManager toolbar={
+        <FileManagerToolbar>
+            <Button>New Folder</Button>
+            <Button>Upload</Button>
+            <ButtonGroup>
+                <Button icon="sort-asc-small"></Button>
+                <Button icon="sort-desc-small"></Button>
+            </ButtonGroup>
+            <SplitButton text="Sort By" />
+            <ButtonGroup>
+                <Button icon="grid-layout"></Button>
+                <Button icon="grid" selected></Button>
+            </ButtonGroup>
+            <div className="k-spacer"></div>
+            <div className="k-filemanager-details-toggle">
+                <label>View Details</label>
+                <Switch checked/>
+            </div>
+            <Searchbox className="k-filemanager-search-tool" placeholder="Search..." />
+        </FileManagerToolbar>
+    }
+    children={
+        <>
+            <Splitter className="k-filemanager-splitter">
+                <SplitterPane className="k-filemanager-navigation" collapsible scrollable flexBasis="25%">
+                    <FileManagerTreeview>
+                        <TreeviewItem text="Folder" />
+                    </FileManagerTreeview>
+                </SplitterPane>
+
+                <SplitterPane className="k-filemanager-content" scrollable>
+                    <FileManagerBreadcrumb>
+                        <BreadcrumbContainer>
+                            <BreadcrumbItem root>
+                                <BreadcrumbLink root icon>
+                                    <Icon icon="home" />
+                                </BreadcrumbLink>
+                            </BreadcrumbItem>
+                        </BreadcrumbContainer>
+                    </FileManagerBreadcrumb>
+
+                    <FileManagerListView>
+                        <ListViewItem>
+                            <FilePreview name="Folder" icon="folder" size="xxxlarge"/>
+                        </ListViewItem>
+                        <ListViewItem>
+                            <FilePreview name="file.png" icon="file-image" size="xxxlarge"/>
+                        </ListViewItem>
+                    </FileManagerListView>
+                </SplitterPane>
+
+                <SplitterPane className="k-filemanager-preview" collapsible scrollable flexBasis="25%">
+                    <FileInfo selection="none" name="No File Selected">
+                    </FileInfo>
+                </SplitterPane>
+            </Splitter>
+        </>
+    }
+    {...props}>
+    </FileManager>
+);

package/src/filemanager/tests/filemanager-contextmenu.tsx

@@ -1,17 +1,13 @@
-import { BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink, BreadcrumbRoot } from '../../breadcrumb';
-import { Button } from '../../button';
-import { Icon } from '../../icon';
+import { FileManagerNormal } from '../../filemanager';
 import { MenuItem, MenuList } from '../../menu';
 import { Popup } from '../../popup';
-import { Toolbar } from '../../toolbar';
-import { Treeview, TreeviewItem } from '../../treeview';
 
 
 const styles = `
     #filemanager-context-menu {
         position: absolute;
         top: 200px;
-        left: 270px;
+        left: 350px;
         z-index: 2;
         overflow: visible;
     }
@@ -23,55 +19,7 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-1">
 
             <span>File Manager ContextMenu</span>
-            <div className="k-widget k-filemanager">
-                {/* Header */}
-                <div className="k-filemanager-header">
-                    <Toolbar className="k-filemanager-toolbar">
-                        <Button>New Folder</Button>
-                        <Button>Upload</Button>
-                    </Toolbar>
-                </div>
-
-                <div className="k-filemanager-content-container">
-                    {/* Navigation */}
-                    <div className="k-filemanager-navigation">
-                        <Treeview className="k-filemanager-treeview">
-                            <TreeviewItem text="Folder" />
-                        </Treeview>
-                    </div>
-
-                    {/* Content */}
-                    <div className="k-filemanager-content">
-                        <BreadcrumbRoot className="k-filemanager-breadcrumb">
-                            <BreadcrumbContainer>
-                                <BreadcrumbItem root>
-                                    <BreadcrumbLink root icon>
-                                        <Icon icon="home" />
-                                    </BreadcrumbLink>
-                                </BreadcrumbItem>
-                            </BreadcrumbContainer>
-                        </BreadcrumbRoot>
-
-                        {/* View */}
-                        <div className="k-widget k-listview k-selectable k-filemanager-listview">
-                            <div className="k-listview-content k-d-flex k-flex-row k-flex-wrap">
-                                <div className="k-listview-item">
-                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="folder" size="xxxlarge"/></span>
-                                    <span className="k-file-name">Folder</span>
-                                </div>
-                                <div className="k-listview-item">
-                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="file-image" size="xxxlarge" /></span>
-                                    <span className="k-file-name">file.png</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-
-                    {/* Preview */}
-                    <div className="k-filemanager-preview" hidden></div>
-                </div>
-            </div>
+            <FileManagerNormal />
 
             <Popup id="filemanager-context-menu" className="k-menu-popup k-context-menu-popup">
                 <MenuList>

package/src/filemanager/tests/filemanager-drag-hint.tsx

@@ -1,14 +1,10 @@
-import { BreadcrumbRoot, BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from '../../breadcrumb';
-import { Button } from '../../button';
-import { Icon } from '../../icon';
-import { Toolbar } from '../../toolbar';
-import { Treeview, TreeviewItem } from '../../treeview';
+import { FileManagerDragHint, FileManagerNormal } from '../../filemanager';
 
 
 const styles = `
     #filemanager-draghint {
         position: absolute;
-        left: 250px;
+        left: 350px;
         top: 200px;
         z-index: 2;
     }
@@ -20,62 +16,9 @@ export default () =>(
         <div id="test-area" className="k-d-grid k-grid-cols-1">
 
             <span>File Manager Drag Hint</span>
-            <div className="k-widget k-filemanager">
-                {/* Header */}
-                <div className="k-filemanager-header">
-                    <Toolbar className="k-filemanager-toolbar">
-                        <Button>New Folder</Button>
-                        <Button>Upload</Button>
-                    </Toolbar>
-                </div>
-
-                <div className="k-filemanager-content-container" >
-                    {/* Navigation */}
-                    <div className="k-filemanager-navigation">
-                        <Treeview className="k-filemanager-treeview">
-                            <TreeviewItem text="Folder" />
-                        </Treeview>
-                    </div>
-
-                    {/* Content */}
-                    <div className="k-filemanager-content">
-                        <BreadcrumbRoot className="k-filemanager-breadcrumb">
-                            <BreadcrumbContainer>
-                                <BreadcrumbItem root>
-                                    <BreadcrumbLink root icon>
-                                        <Icon icon="home" />
-                                    </BreadcrumbLink>
-                                </BreadcrumbItem>
-                            </BreadcrumbContainer>
-                        </BreadcrumbRoot>
-
-                        {/* View */}
-                        <div className="k-widget k-listview k-selectable k-filemanager-listview">
-                            <div className="k-listview-content k-d-flex k-flex-row k-flex-wrap">
-                                <div className="k-listview-item">
-                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="folder" size="xxxlarge" /></span>
-                                    <span className="k-file-name">Folder</span>
-                                </div>
-                                <div className="k-listview-item k-selected">
-                                    <span className="k-file-preview"><Icon className="k-file-icon" icon="file-image" size="xxxlarge" /></span>
-                                    <span className="k-file-name">file.png</span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-
-                    {/* Preview */}
-                    <div className="k-filemanager-preview k-hidden">
-                    </div>
-                </div>
-            </div>
-
-            <div className="k-filemanager-drag-hint k-drag-clue" id="filemanager-draghint">
-                <Icon icon="file" />
-                <span>file.png</span>
-            </div>
+            <FileManagerNormal />
 
+            <FileManagerDragHint hint="file.png" id="filemanager-draghint"/>
         </div>
     </>
 );

package/src/filemanager/tests/filemanager-gridview-preview.tsx

@@ -0,0 +1,210 @@
+import { FilePreview, FileManagerBreadcrumb, FileManagerTreeview, FileInfo, FileManagerGridPreview } from '..';
+import { Table, TableRow, TableTbody, TableTd, TableTh, TableThead } from '../..';
+import { BreadcrumbContainer, BreadcrumbItem, BreadcrumbLink } from '../../breadcrumb';
+import { Icon } from '../../icon';
+import { Splitter, SplitterPane } from '../../splitter';
+import { TreeviewItem } from '../../treeview';
+
+
+export default () =>(
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+
+            <span>Preview - File info</span>
+            <FileManagerGridPreview>
+                <Splitter className="k-filemanager-splitter">
+                    <SplitterPane className="k-filemanager-navigation" collapsible scrollable flexBasis="25%">
+                        <FileManagerTreeview>
+                            <TreeviewItem text="Folder" />
+                        </FileManagerTreeview>
+                    </SplitterPane>
+
+                    <SplitterPane className="k-filemanager-content" scrollable>
+                        <FileManagerBreadcrumb>
+                            <BreadcrumbContainer>
+                                <BreadcrumbItem root>
+                                    <BreadcrumbLink root icon>
+                                        <Icon icon="home" />
+                                    </BreadcrumbLink>
+                                </BreadcrumbItem>
+                            </BreadcrumbContainer>
+                        </FileManagerBreadcrumb>
+
+                        <div className="k-filemanager-grid k-grid k-grid-md k-grid-display-block k-editable">
+                            <div className="k-grid-header">
+                                <div className="k-grid-header-wrap k-auto-scrollable">
+                                    <Table className="k-table-md k-grid-header-table">
+                                        <colgroup>
+                                            <col />
+                                            <col />
+                                            <col />
+                                        </colgroup>
+                                        <TableThead>
+                                            <TableRow>
+                                                <TableTh className="k-header k-sorted">
+                                                    <span className="k-cell-inner">
+                                                        <span className="k-link">
+                                                            <span className="k-column-title">Name</span>
+                                                            <span className="k-sort-icon">
+                                                                <Icon icon="sort-asc-small" />
+                                                            </span>
+                                                        </span>
+                                                    </span>
+                                                </TableTh>
+                                                <TableTh className="k-header">
+                                                    <span className="k-cell-inner">
+                                                        <span className="k-link">
+                                                            <span className="k-column-title">Date Created</span>
+                                                        </span>
+                                                    </span>
+                                                </TableTh>
+                                                <TableTh className="k-header">
+                                                    <span className="k-cell-inner">
+                                                        <span className="k-link">
+                                                            <span className="k-column-title">File Size</span>
+                                                        </span>
+                                                    </span>
+                                                </TableTh>
+                                            </TableRow>
+                                        </TableThead>
+                                    </Table>
+
+                                </div>
+                            </div>
+                            <div className="k-grid-content k-auto-scrollable">
+                                <Table className="k-table-md k-grid-table k-selectable">
+                                    <colgroup>
+                                        <col className="k-sorted" />
+                                        <col />
+                                        <col />
+                                    </colgroup>
+                                    <TableTbody>
+                                        <TableRow>
+                                            <TableTd>
+                                                <FilePreview name="Folder" icon="folder" />
+                                            </TableTd>
+                                            <TableTd>13/12/2019 at 12:22:04 PM</TableTd>
+                                            <TableTd>0</TableTd>
+                                        </TableRow>
+                                        <TableRow alt selected>
+                                            <TableTd>
+                                                <FilePreview name="file.png" icon="file" />
+                                            </TableTd>
+                                            <TableTd>13/12/2019 at 12:22:04 PM</TableTd>
+                                            <TableTd>73289</TableTd>
+                                        </TableRow>
+                                    </TableTbody>
+                                </Table>
+                            </div>
+                        </div>
+                    </SplitterPane>
+
+                    <SplitterPane className="k-filemanager-preview" collapsible scrollable flexBasis="25%">
+                        <FileInfo selection="single" icon="file-image" name="file.png" fileType="Image" fileSize="72 KB" fileDateCreated="13/12/2019 12:22:04 PM" fileDateModified="13/12/2019 12:36:04 PM">
+                        </FileInfo>
+                    </SplitterPane>
+                </Splitter>
+            </FileManagerGridPreview>
+
+            <span>Preview - No file selected</span>
+            <FileManagerGridPreview />
+
+            <span>Preview - Multiple files selected</span>
+            <FileManagerGridPreview>
+                <Splitter className="k-filemanager-splitter">
+                    <SplitterPane className="k-filemanager-navigation" collapsible scrollable flexBasis="25%">
+                        <FileManagerTreeview>
+                            <TreeviewItem text="Folder" />
+                        </FileManagerTreeview>
+                    </SplitterPane>
+
+                    <SplitterPane className="k-filemanager-content" scrollable>
+                        <FileManagerBreadcrumb>
+                            <BreadcrumbContainer>
+                                <BreadcrumbItem root>
+                                    <BreadcrumbLink root icon>
+                                        <Icon icon="home" />
+                                    </BreadcrumbLink>
+                                </BreadcrumbItem>
+                            </BreadcrumbContainer>
+                        </FileManagerBreadcrumb>
+
+                        <div className="k-filemanager-grid k-grid k-grid-md k-grid-display-block k-editable">
+                            <div className="k-grid-header">
+                                <div className="k-grid-header-wrap k-auto-scrollable">
+                                    <Table className="k-table-md k-grid-header-table">
+                                        <colgroup>
+                                            <col />
+                                            <col />
+                                            <col />
+                                        </colgroup>
+                                        <TableThead>
+                                            <TableRow>
+                                                <TableTh className="k-header k-sorted">
+                                                    <span className="k-cell-inner">
+                                                        <span className="k-link">
+                                                            <span className="k-column-title">Name</span>
+                                                            <span className="k-sort-icon">
+                                                                <Icon icon="sort-asc-small" />
+                                                            </span>
+                                                        </span>
+                                                    </span>
+                                                </TableTh>
+                                                <TableTh className="k-header">
+                                                    <span className="k-cell-inner">
+                                                        <span className="k-link">
+                                                            <span className="k-column-title">Date Created</span>
+                                                        </span>
+                                                    </span>
+                                                </TableTh>
+                                                <TableTh className="k-header">
+                                                    <span className="k-cell-inner">
+                                                        <span className="k-link">
+                                                            <span className="k-column-title">File Size</span>
+                                                        </span>
+                                                    </span>
+                                                </TableTh>
+                                            </TableRow>
+                                        </TableThead>
+                                    </Table>
+
+                                </div>
+                            </div>
+                            <div className="k-grid-content k-auto-scrollable">
+                                <Table className="k-table-md k-grid-table k-selectable">
+                                    <colgroup>
+                                        <col className="k-sorted" />
+                                        <col />
+                                        <col />
+                                    </colgroup>
+                                    <TableTbody>
+                                        <TableRow selected>
+                                            <TableTd>
+                                                <FilePreview name="Folder" icon="folder" />
+                                            </TableTd>
+                                            <TableTd>13/12/2019 at 12:22:04 PM</TableTd>
+                                            <TableTd>0</TableTd>
+                                        </TableRow>
+                                        <TableRow alt selected>
+                                            <TableTd>
+                                                <FilePreview name="file.png" icon="file" />
+                                            </TableTd>
+                                            <TableTd>13/12/2019 at 12:22:04 PM</TableTd>
+                                            <TableTd>73289</TableTd>
+                                        </TableRow>
+                                    </TableTbody>
+                                </Table>
+                            </div>
+                        </div>
+                    </SplitterPane>
+
+                    <SplitterPane className="k-filemanager-preview" collapsible scrollable flexBasis="25%">
+                        <FileInfo selection="multiple" name="2 items">
+                        </FileInfo>
+                    </SplitterPane>
+                </Splitter>
+            </FileManagerGridPreview>
+
+        </div>
+    </>
+);