superdesk-ui-framework 2.4.20 → 3.0.1-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app/img/spinner.svg +3 -0
- package/app/img/themes/theme-base.svg +1 -0
- package/app/img/themes/theme-contrast.svg +45 -0
- package/app/img/themes/theme-dark.svg +1 -0
- package/app/img/themes/theme-light.svg +1 -0
- package/app/index.js +2 -1
- package/app/scripts/modals.js +1 -0
- package/app/styles/_accessibility.scss +305 -3
- package/app/styles/_alerts.scss +227 -97
- package/app/styles/_avatar.scss +60 -33
- package/app/styles/_badge.scss +55 -26
- package/app/styles/_big-icon-font.scss +2 -1
- package/app/styles/_boxed-list.scss +41 -20
- package/app/styles/_buttons.scss +544 -1026
- package/app/styles/_carousel.scss +19 -13
- package/app/styles/_content-divider.scss +125 -0
- package/app/styles/_design-tokens.scss +2 -0
- package/app/styles/_drag-drop.scss +1 -1
- package/app/styles/_empty-states.scss +9 -1
- package/app/styles/_helpers.scss +650 -308
- package/app/styles/_icon-font.scss +5 -5
- package/app/styles/_icon-labels.scss +6 -7
- package/app/styles/_labels.scss +65 -52
- package/app/styles/_loaders.scss +28 -0
- package/app/styles/_master-desk.scss +11 -11
- package/app/styles/_mixins.scss +21 -13
- package/app/styles/_modals.scss +103 -116
- package/app/styles/_normalize.scss +1 -0
- package/app/styles/_panel-info.scss +21 -16
- package/app/styles/_popover.scss +2 -2
- package/app/styles/_pr-superdesk-theme.scss +4 -0
- package/app/styles/_publisher-styles.scss +182 -0
- package/app/styles/_reboot.scss +1 -0
- package/app/styles/_sd-tag-input.scss +184 -97
- package/app/styles/_simple-list.scss +41 -19
- package/app/styles/_tables.scss +5 -4
- package/app/styles/_tabs.scss +24 -75
- package/app/styles/_tag-labels.scss +47 -47
- package/app/styles/_thumb-carousel.scss +11 -10
- package/app/styles/_toggle-box.scss +52 -46
- package/app/styles/_toggle-button.scss +42 -0
- package/app/styles/_tooltips.scss +55 -98
- package/app/styles/_variables.scss +0 -1
- package/app/styles/app.scss +16 -1
- package/app/styles/components/_card-item.scss +41 -28
- package/app/styles/components/_list-item.scss +24 -94
- package/app/styles/components/_sd-circular-progress.scss +1 -1
- package/app/styles/components/_sd-collapse-box.scss +6 -33
- package/app/styles/components/_sd-comment-box.scss +1 -1
- package/app/styles/components/_sd-dropzone.scss +78 -0
- package/app/styles/components/_sd-grid-item.scss +78 -180
- package/app/styles/components/_sd-loader.scss +1 -16
- package/app/styles/components/_sd-media-carousel.scss +10 -12
- package/app/styles/components/_sd-photo-preview.scss +13 -13
- package/app/styles/components/_sd-searchbar.scss +43 -127
- package/app/styles/components/_sd-toaster.scss +13 -6
- package/app/styles/components/_subnav.scss +111 -117
- package/app/styles/components/_theme-selector.scss +189 -0
- package/app/styles/components/sd-slider.scss +11 -11
- package/app/styles/design-tokens/_design-tokens-general.scss +77 -0
- package/app/styles/design-tokens/_new-colors.scss +700 -0
- package/app/styles/dropdowns/_basic-dropdown.scss +119 -76
- package/app/styles/dropdowns/_navigation_dropdown.scss +7 -8
- package/app/styles/dropdowns/_nested-dropdown.scss +30 -16
- package/app/styles/dropdowns/_other_dropdown.scss +1 -1
- package/app/styles/editor/_editor-buttons.scss +54 -0
- package/app/styles/editor/_editor-themes.scss +437 -0
- package/app/styles/form-elements/_autocomplete.scss +12 -41
- package/app/styles/form-elements/_checkbox.scss +180 -245
- package/app/styles/form-elements/_forms-general.scss +92 -20
- package/app/styles/form-elements/_inputs.scss +96 -350
- package/app/styles/form-elements/_radio.scss +6 -6
- package/app/styles/form-elements/_select-grid.scss +16 -14
- package/app/styles/form-elements/_switch.scss +26 -47
- package/app/styles/grids/_basic-grid.scss +52 -26
- package/app/styles/grids/_grid-layout.scss +93 -58
- package/app/styles/grids/_layout-grid.scss +6 -6
- package/app/styles/grids/_sd-kanban-list.scss +2 -2
- package/app/styles/interface-elements/_side-panel.scss +115 -83
- package/app/styles/layout/_basic-layout.scss +11 -19
- package/app/styles/layout/_container.scss +32 -0
- package/app/styles/layout/_editor.scss +306 -0
- package/app/styles/layout/_general.scss +4 -5
- package/app/styles/menus/_sd-content-navigation.scss +1 -1
- package/app/styles/menus/_sd-left-navigation.scss +34 -18
- package/app/styles/menus/_sd-sidebar-menu.scss +117 -25
- package/app/styles/menus/_sd-top-menu.scss +3 -3
- package/app/styles/primereact/_pr-datepicker.scss +60 -9
- package/app/styles/primereact/_pr-dialog.scss +99 -30
- package/app/styles/primereact/_pr-dropdown.scss +177 -19
- package/app/styles/primereact/_pr-general.scss +14 -7
- package/app/styles/primereact/_pr-menu.scss +9 -12
- package/app/styles/variables/_colors.scss +124 -516
- package/app/styles/variables/_dimensions.scss +82 -4
- package/app/styles/variables/_form-elements.scss +0 -2
- package/app/styles/variables/_typography.scss +2 -0
- package/app-typescript/components/Alert.tsx +16 -1
- package/app-typescript/components/Avatar.tsx +21 -0
- package/app-typescript/components/ButtonGroup.tsx +9 -5
- package/app-typescript/components/Carousel.tsx +1 -1
- package/app-typescript/components/CheckButtonGroup.tsx +19 -5
- package/app-typescript/components/CheckGroup.tsx +2 -1
- package/app-typescript/components/Checkbox.tsx +7 -3
- package/app-typescript/components/CheckboxButton.tsx +9 -2
- package/app-typescript/components/ContentDivider.tsx +34 -0
- package/app-typescript/components/DatePicker.tsx +6 -2
- package/app-typescript/components/DropZone.tsx +89 -0
- package/app-typescript/components/Dropdown.tsx +30 -11
- package/app-typescript/components/DropdownFirst.tsx +1 -1
- package/app-typescript/components/Editor/EditorButton.tsx +34 -0
- package/app-typescript/components/Form/FormGroup.tsx +33 -0
- package/app-typescript/components/Form/FormItem.tsx +20 -0
- package/app-typescript/components/Form/FormLabel.tsx +22 -0
- package/app-typescript/components/Form/FormRow.tsx +40 -0
- package/app-typescript/components/Form/FormText.tsx +15 -0
- package/app-typescript/components/Form/index.tsx +5 -0
- package/app-typescript/components/IconButton.tsx +26 -12
- package/app-typescript/components/Input.tsx +38 -20
- package/app-typescript/components/Layouts/AuthorinInnerSideBar.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrame.tsx +72 -0
- package/app-typescript/components/Layouts/AuthoringFrameContainer.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameLeftBar.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameMain.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameNavBar.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameOverlay.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameRightBar.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringFrameSidePanel.tsx +22 -0
- package/app-typescript/components/Layouts/AuthoringFrameSidePanelOverlay.tsx +22 -0
- package/app-typescript/components/Layouts/AuthoringInnerBody.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringInnerHeader.tsx +38 -0
- package/app-typescript/components/Layouts/AuthoringMain.tsx +46 -0
- package/app-typescript/components/Layouts/AuthoringMainContainer.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringMainContent.tsx +15 -0
- package/app-typescript/components/Layouts/AuthoringMainToolBar.tsx +15 -0
- package/app-typescript/components/Layouts/Container.tsx +30 -0
- package/app-typescript/components/Layouts/HeaderPanel.tsx +15 -0
- package/app-typescript/components/Layouts/LayoutContainer.tsx +18 -0
- package/app-typescript/components/Layouts/LeftPanel.tsx +24 -0
- package/app-typescript/components/Layouts/MainPanel.tsx +22 -0
- package/app-typescript/components/Layouts/PageLayout.tsx +51 -0
- package/app-typescript/components/Layouts/Panel.tsx +207 -0
- package/app-typescript/components/Layouts/RightPanel.tsx +16 -0
- package/app-typescript/components/Layouts/index.tsx +25 -0
- package/app-typescript/components/LeftMenu.tsx +123 -49
- package/app-typescript/components/Lists/BoxedList.tsx +133 -0
- package/app-typescript/components/Lists/SimpleList.tsx +54 -0
- package/app-typescript/components/Lists/index.tsx +2 -0
- package/app-typescript/components/Modal.tsx +7 -2
- package/app-typescript/components/MultiSelect.tsx +69 -0
- package/app-typescript/components/Navigation/QuickNavBar.tsx +114 -0
- package/app-typescript/components/Navigation/SideBarMenu.tsx +68 -0
- package/app-typescript/components/Navigation/SideBarTabs.tsx +77 -0
- package/app-typescript/components/Navigation/index.tsx +3 -0
- package/app-typescript/components/RadioButtonGroup.tsx +113 -0
- package/app-typescript/components/RadioGroup.tsx +69 -0
- package/app-typescript/components/Select.tsx +7 -9
- package/app-typescript/components/SelectGrid.tsx +3 -3
- package/app-typescript/components/SlidingToolbar.tsx +8 -2
- package/app-typescript/components/Spinner.tsx +0 -1
- package/app-typescript/components/SubNav.tsx +25 -4
- package/app-typescript/components/Switch.tsx +34 -12
- package/app-typescript/components/TabCustom.tsx +40 -89
- package/app-typescript/components/TabList.tsx +18 -43
- package/app-typescript/components/Tag.tsx +31 -8
- package/app-typescript/components/Text/Heading.tsx +67 -0
- package/app-typescript/components/Text/Text.tsx +36 -0
- package/app-typescript/components/ThemeSelector.tsx +113 -0
- package/app-typescript/components/TimePicker.tsx +3 -3
- package/app-typescript/components/Togglebox.tsx +8 -6
- package/app-typescript/components/TreeSelect.tsx +330 -0
- package/app-typescript/index.ts +16 -4
- package/dist/avatar-2.jpg +0 -0
- package/dist/avatar-3.jpg +0 -0
- package/dist/avatar-4.jpg +0 -0
- package/dist/avatar-5.jpg +0 -0
- package/dist/avatar-6.jpg +0 -0
- package/dist/avatar_64.png +0 -0
- package/dist/components/basic-grid.html +1 -1
- package/dist/components/checkbox.html +1 -1
- package/dist/examples.bundle.css +1933 -2393
- package/dist/examples.bundle.js +23583 -15736
- package/dist/index.html +9 -12
- package/dist/playgrounds/boxed-list.html +1 -1
- package/dist/playgrounds/cards.html +9 -4
- package/dist/playgrounds/editor-3-test.html +15 -0
- package/dist/playgrounds/form-layout.html +9 -7
- package/dist/playgrounds/layout-test-2.html +40 -36
- package/dist/playgrounds/list-item-test.html +1 -1
- package/dist/playgrounds/master-desk.html +1 -3
- package/dist/playgrounds/photo-desk.html +33 -33
- package/dist/playgrounds/react-playgrounds/EditorTest.tsx +454 -0
- package/dist/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
- package/dist/playgrounds/react-playgrounds/Index.tsx +5 -1
- package/dist/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
- package/dist/playgrounds/react-playgrounds/PersonalProfile.tsx +622 -0
- package/dist/playgrounds/react-playgrounds/SamsPlayground.tsx +30 -39
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +232 -23
- package/dist/playgrounds/react-playgrounds/UiPlayground.tsx +300 -0
- package/dist/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
- package/dist/playgrounds/tags-input.html +1 -1
- package/dist/react/Alerts.tsx +123 -23
- package/dist/react/Avatar.tsx +314 -127
- package/dist/react/BoxedList.tsx +362 -0
- package/dist/react/ButtonGroups.tsx +66 -65
- package/dist/react/Buttons.tsx +62 -247
- package/dist/react/Carousel.tsx +2 -3
- package/dist/react/Checkboxs.tsx +66 -25
- package/dist/react/Container.tsx +143 -0
- package/dist/react/ContentDivider.tsx +178 -0
- package/dist/react/DropZone.tsx +103 -0
- package/dist/react/Heading.tsx +106 -0
- package/dist/react/IconButtons.tsx +49 -42
- package/dist/react/Index.tsx +118 -11
- package/dist/react/Inputs.tsx +9 -24
- package/dist/react/LeftNavigations.tsx +161 -9
- package/dist/react/ListItems.tsx +3 -3
- package/dist/react/Modal.tsx +173 -19
- package/dist/react/MultiSelect.tsx +193 -0
- package/dist/react/NavButtons.tsx +4 -4
- package/dist/react/Panel.tsx +366 -0
- package/dist/react/QuickNavigationBar.tsx +142 -0
- package/dist/react/RadioGroup.tsx +351 -0
- package/dist/react/SelectWithTemplate.tsx +1 -1
- package/dist/react/Selects.tsx +3 -23
- package/dist/react/SimpleList.tsx +148 -0
- package/dist/react/SubNav.tsx +69 -20
- package/dist/react/Tabs.tsx +72 -248
- package/dist/react/Tags.tsx +45 -4
- package/dist/react/Text.tsx +134 -0
- package/dist/react/Tooltips.tsx +1 -1
- package/dist/react/TreeSelect.tsx +178 -0
- package/dist/react.html +4 -0
- package/dist/superdesk-ui.bundle.css +28522 -23998
- package/dist/superdesk-ui.bundle.js +7546 -3667
- package/dist/vendor.bundle.js +64 -68
- package/examples/css/docs-page.css +205 -46
- package/examples/img/avatar-2.jpg +0 -0
- package/examples/img/avatar-3.jpg +0 -0
- package/examples/img/avatar-4.jpg +0 -0
- package/examples/img/avatar-5.jpg +0 -0
- package/examples/img/avatar-6.jpg +0 -0
- package/examples/index.html +9 -12
- package/examples/index.js +20 -0
- package/examples/pages/components/basic-grid.html +1 -1
- package/examples/pages/components/checkbox.html +1 -1
- package/examples/pages/playgrounds/boxed-list.html +1 -1
- package/examples/pages/playgrounds/cards.html +9 -4
- package/examples/pages/playgrounds/editor-3-test.html +15 -0
- package/examples/pages/playgrounds/form-layout.html +9 -7
- package/examples/pages/playgrounds/layout-test-2.html +40 -36
- package/examples/pages/playgrounds/list-item-test.html +1 -1
- package/examples/pages/playgrounds/master-desk.html +1 -3
- package/examples/pages/playgrounds/photo-desk.html +33 -33
- package/examples/pages/playgrounds/react-playgrounds/EditorTest.tsx +454 -0
- package/examples/pages/playgrounds/react-playgrounds/FirstPlayground.tsx +4 -4
- package/examples/pages/playgrounds/react-playgrounds/Index.tsx +5 -1
- package/examples/pages/playgrounds/react-playgrounds/PageLayoutTest.tsx +161 -0
- package/examples/pages/playgrounds/react-playgrounds/PersonalProfile.tsx +622 -0
- package/examples/pages/playgrounds/react-playgrounds/SamsPlayground.tsx +30 -39
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +232 -23
- package/examples/pages/playgrounds/react-playgrounds/UiPlayground.tsx +300 -0
- package/examples/pages/playgrounds/react-playgrounds/components/Layout.tsx +1 -1
- package/examples/pages/playgrounds/tags-input.html +1 -1
- package/examples/pages/react/Alerts.tsx +123 -23
- package/examples/pages/react/Avatar.tsx +314 -127
- package/examples/pages/react/BoxedList.tsx +362 -0
- package/examples/pages/react/ButtonGroups.tsx +66 -65
- package/examples/pages/react/Buttons.tsx +62 -247
- package/examples/pages/react/Carousel.tsx +2 -3
- package/examples/pages/react/Checkboxs.tsx +66 -25
- package/examples/pages/react/Container.tsx +143 -0
- package/examples/pages/react/ContentDivider.tsx +178 -0
- package/examples/pages/react/DropZone.tsx +103 -0
- package/examples/pages/react/Heading.tsx +106 -0
- package/examples/pages/react/IconButtons.tsx +49 -42
- package/examples/pages/react/Index.tsx +118 -11
- package/examples/pages/react/Inputs.tsx +9 -24
- package/examples/pages/react/LeftNavigations.tsx +161 -9
- package/examples/pages/react/ListItems.tsx +3 -3
- package/examples/pages/react/Modal.tsx +173 -19
- package/examples/pages/react/MultiSelect.tsx +193 -0
- package/examples/pages/react/NavButtons.tsx +4 -4
- package/examples/pages/react/Panel.tsx +366 -0
- package/examples/pages/react/QuickNavigationBar.tsx +142 -0
- package/examples/pages/react/RadioGroup.tsx +351 -0
- package/examples/pages/react/SelectWithTemplate.tsx +1 -1
- package/examples/pages/react/Selects.tsx +3 -23
- package/examples/pages/react/SimpleList.tsx +148 -0
- package/examples/pages/react/SubNav.tsx +69 -20
- package/examples/pages/react/Tabs.tsx +72 -248
- package/examples/pages/react/Tags.tsx +45 -4
- package/examples/pages/react/Text.tsx +134 -0
- package/examples/pages/react/Tooltips.tsx +1 -1
- package/examples/pages/react/TreeSelect.tsx +178 -0
- package/examples/pages/react.html +4 -0
- package/images/avatar_64.png +0 -0
- package/package.json +10 -6
- package/react/components/Alert.d.ts +3 -0
- package/react/components/Alert.js +9 -1
- package/react/components/Avatar.d.ts +9 -0
- package/react/components/Avatar.js +19 -1
- package/react/components/ButtonGroup.d.ts +4 -2
- package/react/components/ButtonGroup.js +5 -3
- package/react/components/Carousel.js +1 -1
- package/react/components/CheckButtonGroup.d.ts +3 -1
- package/react/components/CheckButtonGroup.js +8 -2
- package/react/components/CheckGroup.d.ts +1 -0
- package/react/components/CheckGroup.js +1 -1
- package/react/components/Checkbox.d.ts +2 -1
- package/react/components/Checkbox.js +2 -2
- package/react/components/CheckboxButton.d.ts +1 -0
- package/react/components/CheckboxButton.js +2 -2
- package/react/components/ContentDivider.d.ts +12 -0
- package/react/components/ContentDivider.js +66 -0
- package/react/components/DatePicker.js +7 -2
- package/react/components/DropZone.d.ts +25 -0
- package/react/components/DropZone.js +93 -0
- package/react/components/Dropdown.d.ts +1 -0
- package/react/components/Dropdown.js +28 -23
- package/react/components/DropdownFirst.js +1 -1
- package/react/components/Form/FormGroup.d.ts +13 -0
- package/react/components/Form/FormGroup.js +61 -0
- package/react/components/Form/FormItem.d.ts +9 -0
- package/react/components/Form/FormItem.js +54 -0
- package/react/components/Form/FormLabel.d.ts +10 -0
- package/react/components/Form/FormLabel.js +54 -0
- package/react/components/Form/FormRow.d.ts +17 -0
- package/react/components/Form/FormRow.js +62 -0
- package/react/components/Form/FormText.d.ts +8 -0
- package/react/components/Form/FormText.js +47 -0
- package/react/components/Form/index.d.ts +5 -0
- package/react/components/Form/index.js +12 -0
- package/react/components/IconButton.d.ts +9 -2
- package/react/components/IconButton.js +13 -5
- package/react/components/Input.d.ts +20 -6
- package/react/components/Input.js +10 -13
- package/react/components/Layouts/AuthorinInnerSideBar.d.ts +8 -0
- package/react/components/Layouts/AuthorinInnerSideBar.js +47 -0
- package/react/components/Layouts/AuthoringFrame.d.ts +18 -0
- package/react/components/Layouts/AuthoringFrame.js +56 -0
- package/react/components/Layouts/AuthoringFrameContainer.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameContainer.js +47 -0
- package/react/components/Layouts/AuthoringFrameLeftBar.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameLeftBar.js +47 -0
- package/react/components/Layouts/AuthoringFrameMain.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameMain.js +47 -0
- package/react/components/Layouts/AuthoringFrameNavBar.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameNavBar.js +47 -0
- package/react/components/Layouts/AuthoringFrameOverlay.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameOverlay.js +47 -0
- package/react/components/Layouts/AuthoringFrameRightBar.d.ts +8 -0
- package/react/components/Layouts/AuthoringFrameRightBar.js +47 -0
- package/react/components/Layouts/AuthoringFrameSidePanel.d.ts +10 -0
- package/react/components/Layouts/AuthoringFrameSidePanel.js +56 -0
- package/react/components/Layouts/AuthoringFrameSidePanelOverlay.d.ts +9 -0
- package/react/components/Layouts/AuthoringFrameSidePanelOverlay.js +56 -0
- package/react/components/Layouts/AuthoringInnerBody.d.ts +8 -0
- package/react/components/Layouts/AuthoringInnerBody.js +47 -0
- package/react/components/Layouts/AuthoringInnerHeader.d.ts +13 -0
- package/react/components/{RadioButton.js → Layouts/AuthoringInnerHeader.js} +20 -22
- package/react/components/Layouts/AuthoringMain.d.ts +12 -0
- package/react/components/Layouts/AuthoringMain.js +53 -0
- package/react/components/Layouts/AuthoringMainContainer.d.ts +8 -0
- package/react/components/Layouts/AuthoringMainContainer.js +47 -0
- package/react/components/Layouts/AuthoringMainContent.d.ts +8 -0
- package/react/components/Layouts/AuthoringMainContent.js +47 -0
- package/react/components/Layouts/AuthoringMainToolBar.d.ts +8 -0
- package/react/components/Layouts/AuthoringMainToolBar.js +47 -0
- package/react/components/Layouts/Container.d.ts +14 -0
- package/react/components/Layouts/Container.js +60 -0
- package/react/components/Layouts/HeaderPanel.d.ts +8 -0
- package/react/components/Layouts/HeaderPanel.js +47 -0
- package/react/components/Layouts/LayoutContainer.d.ts +8 -0
- package/react/components/Layouts/LayoutContainer.js +47 -0
- package/react/components/Layouts/LeftPanel.d.ts +9 -0
- package/react/components/Layouts/LeftPanel.js +54 -0
- package/react/components/Layouts/MainPanel.d.ts +10 -0
- package/react/components/Layouts/MainPanel.js +50 -0
- package/react/components/Layouts/PageLayout.d.ts +16 -0
- package/react/components/Layouts/PageLayout.js +64 -0
- package/react/components/Layouts/Panel.d.ts +65 -0
- package/react/components/Layouts/Panel.js +166 -0
- package/react/components/Layouts/RightPanel.d.ts +9 -0
- package/react/components/Layouts/RightPanel.js +47 -0
- package/react/components/Layouts/index.d.ts +24 -0
- package/react/components/Layouts/index.js +55 -0
- package/react/components/LeftMenu.d.ts +8 -3
- package/react/components/LeftMenu.js +55 -16
- package/react/components/Lists/BoxedList.d.ts +36 -0
- package/react/components/Lists/BoxedList.js +137 -0
- package/react/components/Lists/SimpleList.d.ts +21 -0
- package/react/components/Lists/SimpleList.js +78 -0
- package/react/components/Lists/index.d.ts +2 -0
- package/react/components/Lists/index.js +9 -0
- package/react/components/Modal.d.ts +3 -1
- package/react/components/Modal.js +3 -2
- package/react/components/Navigation/QuickNavBar.d.ts +24 -0
- package/react/components/Navigation/QuickNavBar.js +113 -0
- package/react/components/Navigation/SideBarMenu.d.ts +21 -0
- package/react/components/Navigation/SideBarMenu.js +77 -0
- package/react/components/Navigation/SideBarTabs.d.ts +22 -0
- package/react/components/Navigation/SideBarTabs.js +82 -0
- package/react/components/Navigation/index.d.ts +3 -0
- package/react/components/Navigation/index.js +8 -0
- package/react/components/RadioButtonGroup.d.ts +29 -0
- package/react/components/RadioButtonGroup.js +89 -0
- package/react/components/{Radio.d.ts → RadioGroup.d.ts} +7 -3
- package/react/components/{Radio.js → RadioGroup.js} +15 -11
- package/react/components/Select.d.ts +1 -1
- package/react/components/Select.js +2 -9
- package/react/components/SelectGrid.js +3 -3
- package/react/components/SlidingToolbar.d.ts +1 -1
- package/react/components/SlidingToolbar.js +11 -1
- package/react/components/Spinner.d.ts +0 -1
- package/react/components/Spinner.js +0 -1
- package/react/components/SubNav.d.ts +8 -1
- package/react/components/SubNav.js +22 -4
- package/react/components/Switch.d.ts +4 -1
- package/react/components/Switch.js +19 -7
- package/react/components/TabCustom.d.ts +11 -22
- package/react/components/TabCustom.js +23 -52
- package/react/components/TabList.d.ts +2 -11
- package/react/components/TabList.js +11 -32
- package/react/components/Tag.d.ts +3 -3
- package/react/components/Tag.js +16 -5
- package/react/components/TagInput.d.ts +0 -1
- package/react/components/Text/Heading.d.ts +15 -0
- package/react/components/Text/Heading.js +77 -0
- package/react/components/Text/Text.d.ts +15 -0
- package/react/components/Text/Text.js +65 -0
- package/react/components/{RadioButton.d.ts → ThemeSelector.d.ts} +4 -3
- package/react/components/ThemeSelector.js +112 -0
- package/react/components/TimePicker.js +2 -2
- package/react/components/Togglebox.d.ts +1 -0
- package/react/components/Togglebox.js +9 -2
- package/react/index.d.ts +15 -4
- package/react/index.js +36 -6
- package/app/styles/_editor-themes.scss +0 -326
- package/app/styles/variables/_design-tokens-general.scss +0 -76
- package/app-typescript/components/Radio.tsx +0 -57
- package/app-typescript/components/RadioButton.tsx +0 -57
- package/dist/react/Radios.tsx +0 -391
- package/examples/pages/react/Radios.tsx +0 -391
@@ -0,0 +1,622 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import * as Components from './components/Index';
|
3
|
+
import {
|
4
|
+
Button, ButtonGroup, IconButton, NavButton,
|
5
|
+
SubNav, SubNavDivider,
|
6
|
+
Dropdown,
|
7
|
+
Checkbox, CheckGroup, CheckButtonGroup, CheckboxButton, RadioGroup, RadioButtonGroup, Switch, SwitchGroup,
|
8
|
+
Input, Select, Option,
|
9
|
+
Label, Badge,
|
10
|
+
Icon,
|
11
|
+
Tooltip,
|
12
|
+
Tabs, TabLabel, TabContent, TabPanel,
|
13
|
+
AvatarWrapper, AvatarContentImage, AvatarContentText,
|
14
|
+
LeftMenu,
|
15
|
+
SimpleList, SimpleListItem,
|
16
|
+
Container,
|
17
|
+
Heading, Text,
|
18
|
+
Divider,
|
19
|
+
ThemeSelector,
|
20
|
+
Tag
|
21
|
+
} from '../../../../app-typescript/index';
|
22
|
+
import * as GridElements from '../../../../app-typescript/components/GridItem';
|
23
|
+
import * as Layout from '../../../../app-typescript/components/Layouts';
|
24
|
+
import * as Form from '../../../../app-typescript/components/Form';
|
25
|
+
|
26
|
+
import dummy_items from '../dummy-data/items';
|
27
|
+
|
28
|
+
interface IProps {
|
29
|
+
children?: React.ReactNode;
|
30
|
+
}
|
31
|
+
|
32
|
+
interface IState {
|
33
|
+
theme: 'dark' | 'light' | string;
|
34
|
+
itemType: string;
|
35
|
+
dropDownState: string;
|
36
|
+
openPreview: boolean;
|
37
|
+
openFilter: boolean;
|
38
|
+
itemSelected1: boolean;
|
39
|
+
itemSelected2: boolean;
|
40
|
+
itemSelected3: boolean;
|
41
|
+
value1: boolean;
|
42
|
+
value2: boolean;
|
43
|
+
value3: boolean;
|
44
|
+
value4: boolean;
|
45
|
+
value5: boolean;
|
46
|
+
value6: boolean;
|
47
|
+
value7: boolean;
|
48
|
+
value8: boolean;
|
49
|
+
value9: boolean;
|
50
|
+
value10: boolean;
|
51
|
+
value11: boolean;
|
52
|
+
value12: boolean;
|
53
|
+
radioValue1: string;
|
54
|
+
radioValue2: string;
|
55
|
+
radioValue3: string;
|
56
|
+
indexValue: number;
|
57
|
+
}
|
58
|
+
|
59
|
+
export class PersonalProfile extends React.Component<IProps, IState> {
|
60
|
+
constructor(props: IProps) {
|
61
|
+
super(props);
|
62
|
+
this.state = {
|
63
|
+
theme: 'light',
|
64
|
+
itemType: 'itemtype01',
|
65
|
+
dropDownState: '',
|
66
|
+
openPreview: false,
|
67
|
+
openFilter: false,
|
68
|
+
itemSelected1: false,
|
69
|
+
itemSelected2: false,
|
70
|
+
itemSelected3: false,
|
71
|
+
value1: false,
|
72
|
+
value2: true,
|
73
|
+
value3: true,
|
74
|
+
value4: false,
|
75
|
+
value5: true,
|
76
|
+
value6: true,
|
77
|
+
value7: false,
|
78
|
+
value8: false,
|
79
|
+
value9: false,
|
80
|
+
value10: false,
|
81
|
+
value11: true,
|
82
|
+
value12: true,
|
83
|
+
radioValue1: 'list',
|
84
|
+
radioValue2: 'grid',
|
85
|
+
radioValue3: 'list',
|
86
|
+
indexValue: 0,
|
87
|
+
}
|
88
|
+
this.handleFilter = this.handleFilter.bind(this);
|
89
|
+
this.handlePreview = this.handlePreview.bind(this);
|
90
|
+
this.handleTheme = this.handleTheme.bind(this);
|
91
|
+
this.handleClick=this.handleClick.bind(this);
|
92
|
+
}
|
93
|
+
|
94
|
+
|
95
|
+
handleFilter() {
|
96
|
+
this.setState((state) => ({
|
97
|
+
openFilter: !state.openFilter,
|
98
|
+
}));
|
99
|
+
}
|
100
|
+
|
101
|
+
handlePreview() {
|
102
|
+
this.setState((state) => ({
|
103
|
+
openPreview: !state.openPreview,
|
104
|
+
}));
|
105
|
+
}
|
106
|
+
|
107
|
+
handleTheme(newTheme: string) {
|
108
|
+
this.setState({
|
109
|
+
theme: newTheme
|
110
|
+
})
|
111
|
+
}
|
112
|
+
|
113
|
+
changeStatus(item: any, status: string) {
|
114
|
+
if (item.status.includes(status)) {
|
115
|
+
item.status.splice(item.status.indexOf(status), 1);
|
116
|
+
} else {
|
117
|
+
item.status.push(status);
|
118
|
+
}
|
119
|
+
}
|
120
|
+
|
121
|
+
|
122
|
+
handleClick = (number: number) => {
|
123
|
+
this.setState({
|
124
|
+
indexValue: number,
|
125
|
+
})
|
126
|
+
}
|
127
|
+
|
128
|
+
render() {
|
129
|
+
return (
|
130
|
+
<Components.Layout header='My Profile' theme={this.state.theme}>
|
131
|
+
<Components.LayoutContainer>
|
132
|
+
<Components.HeaderPanel>
|
133
|
+
<SubNav zIndex={2}>
|
134
|
+
<ButtonGroup align='start' spaces='no-space'>
|
135
|
+
<Tooltip text='User list' flow='right'>
|
136
|
+
<NavButton icon='arrow-left' onClick={() => false} />
|
137
|
+
</Tooltip>
|
138
|
+
</ButtonGroup>
|
139
|
+
<SubNavDivider width='medium' />
|
140
|
+
<AvatarWrapper size="medium">
|
141
|
+
<AvatarContentImage imageUrl="/avatar.jpg" tooltipText="John Doe" />
|
142
|
+
</AvatarWrapper>
|
143
|
+
<h2 className='subnav__page-title'>Jeffrey Lebowski</h2>
|
144
|
+
</SubNav>
|
145
|
+
<SubNav zIndex={1}>
|
146
|
+
<SubNavDivider width='small' />
|
147
|
+
<Tabs onClick={this.handleClick}>
|
148
|
+
<TabLabel label='Overview' indexValue={0}/>
|
149
|
+
<TabLabel label='Personal preferences' indexValue={1}/>
|
150
|
+
<TabLabel label='Privileges' indexValue={2}/>
|
151
|
+
</Tabs>
|
152
|
+
|
153
|
+
</SubNav>
|
154
|
+
</Components.HeaderPanel>
|
155
|
+
{/* TOOLBAR HEADER */}
|
156
|
+
<TabContent activePanel={this.state.indexValue}>
|
157
|
+
<TabPanel indexValue={0}>
|
158
|
+
<Layout.LeftPanel open={true}>
|
159
|
+
<Layout.Panel background='transparent' size='xx-small'>
|
160
|
+
<Layout.PanelContent>
|
161
|
+
<LeftMenu ariaLabel={'Left navigation'}
|
162
|
+
scrollSpy='#scrollContainer'
|
163
|
+
activeItemId='1'
|
164
|
+
style='blanc'
|
165
|
+
groups={[{ label: '', items: [
|
166
|
+
{ id: '1', label: 'General info', ref:'profile'},
|
167
|
+
{ id: '2', label: 'Password', ref: 'password' },
|
168
|
+
{ id: '3', label: 'Default desk', ref: 'defaultDesk' },
|
169
|
+
{ id: '4', label: 'Language', ref: 'language' },
|
170
|
+
{ id: '5', label: 'Author info', ref: 'autorInfo' }
|
171
|
+
]}]}
|
172
|
+
onSelect={() => {console.log('onSelect triggered')}} />
|
173
|
+
</Layout.PanelContent>
|
174
|
+
</Layout.Panel>
|
175
|
+
</Layout.LeftPanel>
|
176
|
+
{/* FILTER PANEL*/}
|
177
|
+
<Layout.MainPanel className='sd-padding--3' id='scrollContainer'>
|
178
|
+
<SimpleList density='comfortable' width='large'>
|
179
|
+
<SimpleListItem stacked={true} id='profile'>
|
180
|
+
<Container id="profile" direction='column' className='sd-radius--medium sd-panel-bg--gradient-1 sd-shadow--z2 sd-padding--3 sd-state--focus'>
|
181
|
+
<Container className='sd-flex-justify-space-between sd-margin-b--2'>
|
182
|
+
<Label text='Active' type='success' style='translucent' />
|
183
|
+
<Switch toolTipFlow='left' label={{text:'Toggle active', hidden: true}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
|
184
|
+
</Container>
|
185
|
+
<Container direction='column' className='sd-flex-align-items-center sd-margin-x--auto'>
|
186
|
+
<AvatarWrapper size="xx-large">
|
187
|
+
<AvatarContentImage imageUrl="/avatar.jpg" tooltipText="John Doe" />
|
188
|
+
</AvatarWrapper>
|
189
|
+
<Heading className='sd-margin-b--0-5 sd-margin-t--2' align='center' type='h2'>Jeffrey Lebowski</Heading>
|
190
|
+
<Text className='sd-margin-b--1 sd-font-size--medium' align='center' color='light' >the_dude</Text>
|
191
|
+
<Text className='sd-margin-b--1-5 sd-font-size--x-small' align='center' color='lighter'>Member since 24.04.2011</Text>
|
192
|
+
<ButtonGroup spaces='compact' align='center'>
|
193
|
+
<Tag text='Editor' shade='light' readOnly={true} onClick={()=>false} />
|
194
|
+
<Tag text='Author' shade='light' readOnly={true} onClick={()=>false} />
|
195
|
+
<Tag text='Administrator' shade='highlight1' readOnly={true} onClick={()=>false} />
|
196
|
+
</ButtonGroup>
|
197
|
+
</Container>
|
198
|
+
<Container direction='column' className='sd-margin-t--4'>
|
199
|
+
<Form.FormGroup marginBottom='3'>
|
200
|
+
<Form.FormItem>
|
201
|
+
<Input
|
202
|
+
label='First Name'
|
203
|
+
value='Jeffrey'
|
204
|
+
error='Error message'
|
205
|
+
required={false}
|
206
|
+
disabled={false}
|
207
|
+
invalid={false}
|
208
|
+
onChange={(value) => {}} />
|
209
|
+
</Form.FormItem>
|
210
|
+
</Form.FormGroup>
|
211
|
+
<Form.FormGroup marginBottom='3'>
|
212
|
+
<Form.FormItem>
|
213
|
+
<Input
|
214
|
+
label='Last Name'
|
215
|
+
value='Lebowski'
|
216
|
+
error='Error message'
|
217
|
+
required={false}
|
218
|
+
disabled={false}
|
219
|
+
invalid={false}
|
220
|
+
onChange={(value) => {}} />
|
221
|
+
</Form.FormItem>
|
222
|
+
</Form.FormGroup>
|
223
|
+
<Form.FormGroup marginBottom='4'>
|
224
|
+
<Form.FormItem>
|
225
|
+
<Input
|
226
|
+
label='Username'
|
227
|
+
value='the_dude'
|
228
|
+
error='Error message'
|
229
|
+
required={false}
|
230
|
+
disabled={false}
|
231
|
+
invalid={false}
|
232
|
+
onChange={(value) => {}} />
|
233
|
+
</Form.FormItem>
|
234
|
+
</Form.FormGroup>
|
235
|
+
|
236
|
+
|
237
|
+
<Form.FormGroup marginBottom='3'>
|
238
|
+
<Form.FormItem>
|
239
|
+
<Input
|
240
|
+
label='Email'
|
241
|
+
value='jeffrey.lebowski@bloodsimple.org'
|
242
|
+
error='Error message'
|
243
|
+
required={false}
|
244
|
+
disabled={false}
|
245
|
+
invalid={false}
|
246
|
+
onChange={(value) => {}} />
|
247
|
+
</Form.FormItem>
|
248
|
+
</Form.FormGroup>
|
249
|
+
<Form.FormGroup marginBottom='3'>
|
250
|
+
<Form.FormItem>
|
251
|
+
<Input
|
252
|
+
label='Phone number'
|
253
|
+
value='+381 64 155 22 55'
|
254
|
+
error='Error message'
|
255
|
+
required={false}
|
256
|
+
disabled={false}
|
257
|
+
invalid={false}
|
258
|
+
onChange={(value) => {}} />
|
259
|
+
</Form.FormItem>
|
260
|
+
</Form.FormGroup>
|
261
|
+
<Form.FormGroup marginBottom='4'>
|
262
|
+
<Form.FormItem>
|
263
|
+
<Select
|
264
|
+
label='Role'
|
265
|
+
value='Select user role'
|
266
|
+
required={false}
|
267
|
+
disabled={false}
|
268
|
+
invalid={false}
|
269
|
+
onChange={(value) => {}}>
|
270
|
+
<Option>Editor</Option>
|
271
|
+
<Option>Journalist</Option>
|
272
|
+
<Option>Photographer</Option>
|
273
|
+
<Option>Freelancer</Option>
|
274
|
+
<Option>Journalist Assistant</Option>
|
275
|
+
</Select>
|
276
|
+
</Form.FormItem>
|
277
|
+
</Form.FormGroup>
|
278
|
+
<CheckGroup orientation='vertical'>
|
279
|
+
<Checkbox checked={this.state.value11} label={{text:'Administrator'}}
|
280
|
+
onChange={(value) => this.setState(() => ({ value11: value }))} />
|
281
|
+
<Checkbox checked={this.state.value12} label={{text:'Author'}}
|
282
|
+
onChange={(value) => this.setState(() => ({ value12: value }))} />
|
283
|
+
</CheckGroup>
|
284
|
+
</Container>
|
285
|
+
</Container>
|
286
|
+
</SimpleListItem>
|
287
|
+
<SimpleListItem stacked={true} id='password'>
|
288
|
+
<Heading type='h3'>Password</Heading>
|
289
|
+
<Container className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
|
290
|
+
<ButtonGroup align='center'>
|
291
|
+
<Button style='hollow' type='primary' text='Change password' onClick={()=> false} />
|
292
|
+
</ButtonGroup>
|
293
|
+
</Container>
|
294
|
+
</SimpleListItem>
|
295
|
+
<SimpleListItem stacked={true} id='defaultDesk' >
|
296
|
+
<Heading type='h3'>Default desk</Heading>
|
297
|
+
<Container className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
|
298
|
+
<Form.FormGroup inlineLabel={true} marginBottom='0'>
|
299
|
+
<Form.FormItem>
|
300
|
+
<Select
|
301
|
+
label='Default desk'
|
302
|
+
value='This is some value'
|
303
|
+
labelHidden={true}
|
304
|
+
required={false}
|
305
|
+
disabled={false}
|
306
|
+
invalid={false}
|
307
|
+
onChange={(value) => {}}>
|
308
|
+
<Option>International</Option>
|
309
|
+
<Option>Kulture</Option>
|
310
|
+
<Option>National</Option>
|
311
|
+
<Option>News</Option>
|
312
|
+
<Option>Politics</Option>
|
313
|
+
<Option>Sports</Option>
|
314
|
+
</Select>
|
315
|
+
</Form.FormItem>
|
316
|
+
</Form.FormGroup>
|
317
|
+
</Container>
|
318
|
+
</SimpleListItem>
|
319
|
+
<SimpleListItem stacked={true} id='language'>
|
320
|
+
<Heading type='h3'>Language</Heading>
|
321
|
+
<Container className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
|
322
|
+
<Form.FormGroup inlineLabel={true} marginBottom='0'>
|
323
|
+
<Form.FormItem>
|
324
|
+
<Select
|
325
|
+
label='Language'
|
326
|
+
value='English'
|
327
|
+
labelHidden={true}
|
328
|
+
required={false}
|
329
|
+
disabled={false}
|
330
|
+
invalid={false}
|
331
|
+
onChange={(value) => {}}>
|
332
|
+
<Option>English</Option>
|
333
|
+
<Option>German</Option>
|
334
|
+
<Option>French</Option>
|
335
|
+
<Option>Serbian</Option>
|
336
|
+
</Select>
|
337
|
+
</Form.FormItem>
|
338
|
+
</Form.FormGroup>
|
339
|
+
</Container>
|
340
|
+
</SimpleListItem>
|
341
|
+
<SimpleListItem stacked={true} id='autorInfo'>
|
342
|
+
<h3 className='sd-font-size--medium'>Author info</h3>
|
343
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
|
344
|
+
<Form.FormGroup marginBottom='3'>
|
345
|
+
<Form.FormItem>
|
346
|
+
<Input
|
347
|
+
label='Sign-Off'
|
348
|
+
value='the_dude'
|
349
|
+
error='Error message'
|
350
|
+
required={false}
|
351
|
+
disabled={false}
|
352
|
+
invalid={false}
|
353
|
+
onChange={(value) => {}} />
|
354
|
+
</Form.FormItem>
|
355
|
+
</Form.FormGroup>
|
356
|
+
<Form.FormGroup marginBottom='3'>
|
357
|
+
<Form.FormItem>
|
358
|
+
<Input
|
359
|
+
label='Byline'
|
360
|
+
value='Jeffrey Lebowski'
|
361
|
+
error='Error message'
|
362
|
+
required={false}
|
363
|
+
disabled={false}
|
364
|
+
invalid={false}
|
365
|
+
onChange={(value) => {}} />
|
366
|
+
</Form.FormItem>
|
367
|
+
</Form.FormGroup>
|
368
|
+
<Form.FormGroup marginBottom='3'>
|
369
|
+
<Form.FormItem>
|
370
|
+
<Input
|
371
|
+
label='Job Title'
|
372
|
+
value='the_dude'
|
373
|
+
error='Error message'
|
374
|
+
required={false}
|
375
|
+
disabled={false}
|
376
|
+
invalid={false}
|
377
|
+
onChange={(value) => {}} />
|
378
|
+
</Form.FormItem>
|
379
|
+
</Form.FormGroup>
|
380
|
+
<Form.FormGroup marginBottom='4'>
|
381
|
+
<Form.FormItem>
|
382
|
+
<Input
|
383
|
+
label='Biography'
|
384
|
+
value='the_dude'
|
385
|
+
error='Error message'
|
386
|
+
required={false}
|
387
|
+
disabled={false}
|
388
|
+
invalid={false}
|
389
|
+
onChange={(value) => {}} />
|
390
|
+
</Form.FormItem>
|
391
|
+
</Form.FormGroup>
|
392
|
+
<Heading className='sd-margin-t--3 sd-margin-b--2' type='h4'>Social media</Heading>
|
393
|
+
<Form.FormGroup marginBottom='3'>
|
394
|
+
<Form.FormItem>
|
395
|
+
<Input
|
396
|
+
label='Facebook'
|
397
|
+
value='the_dude'
|
398
|
+
error='Error message'
|
399
|
+
required={false}
|
400
|
+
disabled={false}
|
401
|
+
invalid={false}
|
402
|
+
onChange={(value) => {}} />
|
403
|
+
</Form.FormItem>
|
404
|
+
</Form.FormGroup>
|
405
|
+
<Form.FormGroup marginBottom='3'>
|
406
|
+
<Form.FormItem>
|
407
|
+
<Input
|
408
|
+
label='Instagram'
|
409
|
+
value='the_dude'
|
410
|
+
error='Error message'
|
411
|
+
required={false}
|
412
|
+
disabled={false}
|
413
|
+
invalid={false}
|
414
|
+
onChange={(value) => {}} />
|
415
|
+
</Form.FormItem>
|
416
|
+
</Form.FormGroup>
|
417
|
+
<Form.FormGroup marginBottom='2'>
|
418
|
+
<Form.FormItem>
|
419
|
+
<Input
|
420
|
+
label='Twitter'
|
421
|
+
value='the_dude'
|
422
|
+
error='Error message'
|
423
|
+
required={false}
|
424
|
+
disabled={false}
|
425
|
+
invalid={false}
|
426
|
+
onChange={(value) => {}} />
|
427
|
+
</Form.FormItem>
|
428
|
+
</Form.FormGroup>
|
429
|
+
|
430
|
+
</Container>
|
431
|
+
</SimpleListItem>
|
432
|
+
</SimpleList>
|
433
|
+
</Layout.MainPanel>
|
434
|
+
{/* MAIN CONTENT (Monitoring) */}
|
435
|
+
<Components.RightPanel open={this.state.openPreview}>
|
436
|
+
</Components.RightPanel>
|
437
|
+
{/* PREVIEW PANEL*/}
|
438
|
+
<Components.OverlayPanel />
|
439
|
+
{/* OVERLAY PANEL (Send To) */}
|
440
|
+
</TabPanel>
|
441
|
+
<TabPanel indexValue={1}>
|
442
|
+
<Layout.LeftPanel open={true}>
|
443
|
+
<Layout.Panel background='transparent' size='xx-small'>
|
444
|
+
<Layout.PanelContent>
|
445
|
+
|
446
|
+
<LeftMenu ariaLabel={'Left navigation'}
|
447
|
+
activeItemId='#1'
|
448
|
+
style='blanc'
|
449
|
+
groups={[{ label: '', items: [
|
450
|
+
{ id: '1', label: 'Feature preview' },
|
451
|
+
{ id: '2', label: 'View formats' },
|
452
|
+
{ id: '3', label: 'Notifications' },
|
453
|
+
{ id: '4', label: 'Article defaults' },
|
454
|
+
{ id: '5', label: 'Categories' },
|
455
|
+
{ id: '6', label: 'Desks' },
|
456
|
+
{ id: '7', label: 'Vocabulary values' },
|
457
|
+
{ id: '8', label: 'Appearance' }
|
458
|
+
]}]}
|
459
|
+
onSelect={() => false} />
|
460
|
+
</Layout.PanelContent>
|
461
|
+
</Layout.Panel>
|
462
|
+
</Layout.LeftPanel>
|
463
|
+
{/* FILTER PANEL*/}
|
464
|
+
<Layout.MainPanel className='sd-padding--3'>
|
465
|
+
<SimpleList density='comfortable' width='large'>
|
466
|
+
<SimpleListItem stacked={true}>
|
467
|
+
<Heading type='h3'>Feature preview</Heading>
|
468
|
+
<Container className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
|
469
|
+
<Switch label={{text:'Enable Feature Preview'}} value={this.state.value1} onChange={(value) => this.setState(() => ({ value1: value }))} />
|
470
|
+
</Container>
|
471
|
+
</SimpleListItem>
|
472
|
+
<SimpleListItem stacked={true}>
|
473
|
+
<Heading type='h3'>View formats</Heading>
|
474
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
|
475
|
+
<Text color='light' className=''>Select the prefered default view format for specific areas of Superdesks interface.
|
476
|
+
The sections will always open in the selected view format, but can be always changed using the view option dropdown in each section.
|
477
|
+
</Text>
|
478
|
+
<SimpleList density='compact' border={true} className='sd-margin-t--3 sd-margin-b--0 sd-padding-b--0' >
|
479
|
+
<SimpleListItem stacked={true}>
|
480
|
+
<Heading type='h4'>Archive</Heading>
|
481
|
+
<RadioButtonGroup value={this.state.radioValue1} options={[
|
482
|
+
{label: "Grid view", value: "grid", icon: "th"},
|
483
|
+
{label: "List view", value: "list", icon: "th-list"},
|
484
|
+
]} onChange={(value) => this.setState(() => ({ radioValue1: value }))} />
|
485
|
+
</SimpleListItem>
|
486
|
+
<SimpleListItem stacked={true}>
|
487
|
+
<Heading type='h4'>Contacts</Heading>
|
488
|
+
<RadioButtonGroup value={this.state.radioValue2} options={[
|
489
|
+
{label: "Grid view", value: "grid", icon: "th"},
|
490
|
+
{label: "List view", value: "list", icon: "th-list"},
|
491
|
+
]} onChange={(value) => this.setState(() => ({ radioValue2: value }))} />
|
492
|
+
</SimpleListItem>
|
493
|
+
<SimpleListItem stacked={true}>
|
494
|
+
<Heading type='h4'>Archive</Heading>
|
495
|
+
<RadioButtonGroup value={this.state.radioValue3} options={[
|
496
|
+
{label: "Grid view", value: "grid", icon: "th"},
|
497
|
+
{label: "List view", value: "list", icon: "th-list"},
|
498
|
+
{label: "Swimlane view", value: "kanban", icon: "kanban-view"},
|
499
|
+
]} onChange={(value) => this.setState(() => ({ radioValue3: value }))} />
|
500
|
+
</SimpleListItem>
|
501
|
+
|
502
|
+
</SimpleList>
|
503
|
+
</Container>
|
504
|
+
</SimpleListItem>
|
505
|
+
<SimpleListItem stacked={true}>
|
506
|
+
<Heading type='h3'>Notifications</Heading>
|
507
|
+
<Container className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
|
508
|
+
<SwitchGroup>
|
509
|
+
<Switch label={{text:'Send notifications via email'}} value={this.state.value2} onChange={(value) => this.setState(() => ({ value2: value }))} />
|
510
|
+
<Switch label={{text:'Allow Desktop Notifications'}} value={this.state.value3} onChange={(value) => this.setState(() => ({ value3: value }))} />
|
511
|
+
</SwitchGroup>
|
512
|
+
</Container>
|
513
|
+
</SimpleListItem>
|
514
|
+
<SimpleListItem stacked={true}>
|
515
|
+
<h3 className='sd-font-size--medium'>Article defaults</h3>
|
516
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
|
517
|
+
<Form.FormGroup>
|
518
|
+
<Form.FormItem>
|
519
|
+
<Input
|
520
|
+
label='Dateline / Located'
|
521
|
+
value=''
|
522
|
+
error='This is error message'
|
523
|
+
required={false}
|
524
|
+
disabled={false}
|
525
|
+
invalid={false}
|
526
|
+
onChange={(value) => {}} />
|
527
|
+
</Form.FormItem>
|
528
|
+
</Form.FormGroup>
|
529
|
+
<Form.FormGroup>
|
530
|
+
<Form.FormItem>
|
531
|
+
<Select
|
532
|
+
label='Place'
|
533
|
+
value='This is some value'
|
534
|
+
error='This is error message'
|
535
|
+
required={true}
|
536
|
+
disabled={false}
|
537
|
+
invalid={false}
|
538
|
+
onChange={(value) => {}}>
|
539
|
+
<Option>Select place</Option>
|
540
|
+
<Option>Option 1</Option>
|
541
|
+
<Option>Option 2</Option>
|
542
|
+
</Select>
|
543
|
+
</Form.FormItem>
|
544
|
+
</Form.FormGroup>
|
545
|
+
</Container>
|
546
|
+
</SimpleListItem>
|
547
|
+
<SimpleListItem stacked={true}>
|
548
|
+
<Heading type='h3'>Categories</Heading>
|
549
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
|
550
|
+
<Heading type='h4'>Preferred Categories</Heading>
|
551
|
+
<Text color='light' className=''>By selecting the categories you are interested in, the system will only display these in a
|
552
|
+
menu for setting the content item's categories (along with any of its existing categories).
|
553
|
+
</Text>
|
554
|
+
<ButtonGroup className='sd-margin-y--2'>
|
555
|
+
<Button text='All' style='text-only' type='primary' onClick={()=> false} />
|
556
|
+
<Divider border={true} />
|
557
|
+
<Button text='None' style='text-only' type='primary' onClick={()=> false} />
|
558
|
+
<Divider border={true} />
|
559
|
+
<Button text='Default' style='text-only' type='primary' onClick={()=> false} />
|
560
|
+
</ButtonGroup>
|
561
|
+
<CheckButtonGroup grid={true}>
|
562
|
+
<CheckboxButton checked={this.state.value1} label={{text:'Category one'}} onChange={(value) => this.setState(() => ({ value1: value }))} />
|
563
|
+
<CheckboxButton checked={this.state.value2} label={{text:'Category two'}} onChange={(value) => this.setState(() => ({ value2: value }))} />
|
564
|
+
<CheckboxButton checked={this.state.value3} label={{text:'Category three'}} onChange={(value) => this.setState(() => ({ value3: value }))} />
|
565
|
+
<CheckboxButton checked={this.state.value4} label={{text:'Category four'}} onChange={(value) => this.setState(() => ({ value4: value }))} />
|
566
|
+
</CheckButtonGroup>
|
567
|
+
</Container>
|
568
|
+
</SimpleListItem>
|
569
|
+
<SimpleListItem stacked={true}>
|
570
|
+
<Heading type='h3'>Desks</Heading>
|
571
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
|
572
|
+
<Heading type='h4'>Preferred Desks</Heading>
|
573
|
+
<Text color='light' className='sd-margin-b--2'>By selecting the desks as your preferred desks, they appear first in the order when
|
574
|
+
sending or publishing items.
|
575
|
+
</Text>
|
576
|
+
<CheckButtonGroup grid={true}>
|
577
|
+
<CheckboxButton checked={this.state.value5} label={{text:'Politics'}} onChange={(value) => this.setState(() => ({ value5: value }))} />
|
578
|
+
<CheckboxButton checked={this.state.value6} label={{text:'Sports'}} onChange={(value) => this.setState(() => ({ value6: value }))} />
|
579
|
+
<CheckboxButton checked={this.state.value7} label={{text:'News'}} onChange={(value) => this.setState(() => ({ value7: value }))} />
|
580
|
+
<CheckboxButton checked={this.state.value8} label={{text:'National'}} onChange={(value) => this.setState(() => ({ value8: value }))} />
|
581
|
+
<CheckboxButton checked={this.state.value9} label={{text:'International'}} onChange={(value) => this.setState(() => ({ value9: value }))} />
|
582
|
+
<CheckboxButton checked={this.state.value10} label={{text:'Kulture'}} onChange={(value) => this.setState(() => ({ value10: value }))} />
|
583
|
+
</CheckButtonGroup>
|
584
|
+
</Container>
|
585
|
+
</SimpleListItem>
|
586
|
+
<SimpleListItem stacked={true}>
|
587
|
+
<Heading type='h3'>Vocabulary values</Heading>
|
588
|
+
<Container direction='column' className='sd-radius--medium sd-padding--2 sd-border--medium sd-border-style--dashed'>
|
589
|
+
<Text color='lighter' size='medium' className='sd-margin--auto' align='center'>There are no vocabularies configured.</Text>
|
590
|
+
</Container>
|
591
|
+
</SimpleListItem>
|
592
|
+
<SimpleListItem stacked={true}>
|
593
|
+
<Heading type='h3'>Appearance</Heading>
|
594
|
+
<Container direction='column' className='sd-radius--medium sd-panel-bg--000 sd-shadow--z2 sd-padding--3 sd-state--focus'>
|
595
|
+
<Heading type='h4'>Themes</Heading>
|
596
|
+
<Text color='light' className='sd-margin-b--2'>Change the appearance of Superdesk across the whole application.</Text>
|
597
|
+
<ThemeSelector size='small' options={[
|
598
|
+
{label: 'Light', value: 'light-ui', theme: 'light'},
|
599
|
+
{label: 'Dark', value: 'dark-ui', theme: 'dark'},
|
600
|
+
{label: 'High Contrast', value: 'high-contrast', theme: 'contrast-light', disabled: true},
|
601
|
+
]} onChange={($event)=>{this.setState({theme: $event})}} value={this.state.theme} />
|
602
|
+
</Container>
|
603
|
+
</SimpleListItem>
|
604
|
+
</SimpleList>
|
605
|
+
</Layout.MainPanel>
|
606
|
+
{/* MAIN CONTENT (Monitoring) */}
|
607
|
+
|
608
|
+
<Layout.RightPanel open={this.state.openPreview}>
|
609
|
+
</Layout.RightPanel>
|
610
|
+
{/* PREVIEW PANEL*/}
|
611
|
+
</TabPanel>
|
612
|
+
<TabPanel indexValue={2}>
|
613
|
+
<Layout.MainPanel >
|
614
|
+
Privileges Content goes here
|
615
|
+
</Layout.MainPanel>
|
616
|
+
</TabPanel>
|
617
|
+
</TabContent>
|
618
|
+
</Components.LayoutContainer>
|
619
|
+
</Components.Layout >
|
620
|
+
);
|
621
|
+
}
|
622
|
+
}
|