diff --git a/platform/ui/.all-contributorsrc b/platform/ui/.all-contributorsrc deleted file mode 100644 index c90301bbb..000000000 --- a/platform/ui/.all-contributorsrc +++ /dev/null @@ -1,135 +0,0 @@ -{ - "projectName": "@ohif/ui", - "projectOwner": "OHIF", - "repoType": "github", - "repoHost": "https://github.com", - "files": [ - "README.md" - ], - "imageSize": 100, - "commit": true, - "commitConvention": "none", - "contributors": [ - { - "login": "swederik", - "name": "Erik Ziegler", - "avatar_url": "https://avatars3.githubusercontent.com/u/607793?v=4", - "profile": "https://github.com/swederik", - "contributions": [ - "code", - "maintenance" - ] - }, - { - "login": "dannyrb", - "name": "Danny Brown", - "avatar_url": "https://avatars1.githubusercontent.com/u/5797588?v=4", - "profile": "http://dannyrb.com/", - "contributions": [ - "code", - "maintenance" - ] - }, - { - "login": "galelis", - "name": "Gustavo André Lelis", - "avatar_url": "https://avatars3.githubusercontent.com/u/2378326?v=4", - "profile": "https://github.com/galelis", - "contributions": [ - "code", - "maintenance" - ] - }, - { - "login": "maltempi", - "name": "Thiago Maltempi", - "avatar_url": "https://avatars3.githubusercontent.com/u/7017182?v=4", - "profile": "https://github.com/maltempi", - "contributions": [ - "code" - ] - }, - { - "login": "EsrefDurna", - "name": "Esref Durna", - "avatar_url": "https://avatars0.githubusercontent.com/u/1230575?v=4", - "profile": "https://www.linkedin.com/in/siliconvalleynextgeneration/", - "contributions": [ - "code" - ] - }, - { - "login": "pieper", - "name": "Steve Pieper", - "avatar_url": "https://avatars0.githubusercontent.com/u/126077?v=4", - "profile": "http://www.isomics.com", - "contributions": [ - "code" - ] - }, - { - "login": "biharck", - "name": "Biharck Araujo", - "avatar_url": "https://avatars0.githubusercontent.com/u/1713255?v=4", - "profile": "http://www.biharck.com.br", - "contributions": [ - "code" - ] - }, - { - "login": "rodrigolabs", - "name": "Rodrigo Antinarelli", - "avatar_url": "https://avatars3.githubusercontent.com/u/1905961?v=4", - "profile": "https://rodrigoea.com/", - "contributions": [ - "code" - ] - }, - { - "login": "jfmedeiros1820", - "name": "João Felipe de Medeiros Moreira", - "avatar_url": "https://avatars1.githubusercontent.com/u/2211708?v=4", - "profile": "https://github.com/jfmedeiros1820", - "contributions": [ - "code" - ] - }, - { - "login": "jamesg1", - "name": "James Gosbell", - "avatar_url": "https://avatars3.githubusercontent.com/u/3621147?v=4", - "profile": "https://github.com/jamesg1", - "contributions": [ - "code" - ] - }, - { - "login": "evren217", - "name": "Evren Ozkan", - "avatar_url": "https://avatars1.githubusercontent.com/u/4920551?v=4", - "profile": "https://github.com/evren217", - "contributions": [ - "code" - ] - }, - { - "login": "zsaltzman", - "name": "Zach S.", - "avatar_url": "https://avatars1.githubusercontent.com/u/19156530?v=4", - "profile": "https://github.com/zsaltzman", - "contributions": [ - "code" - ] - }, - { - "login": "muakdogan", - "name": "Mete Ugur Akdogan", - "avatar_url": "https://avatars0.githubusercontent.com/u/19971240?v=4", - "profile": "https://github.com/muakdogan", - "contributions": [ - "code" - ] - } - ], - "contributorsPerLine": 7 -} diff --git a/platform/ui/.env b/platform/ui/.env deleted file mode 100644 index 0708aefac..000000000 --- a/platform/ui/.env +++ /dev/null @@ -1,11 +0,0 @@ -#### -## -## We need to pin WebPack's version for docz to work. See this issue: -## https://github.com/pedronauck/docz/issues/704#issuecomment-480295032 -## -## react-scripts checks that dependency versions match before running -## Our top level webpack version causes the preflight check to fail -## This prevents that check -## -#### -SKIP_PREFLIGHT_CHECK=true diff --git a/platform/ui/.gitignore b/platform/ui/.gitignore new file mode 100644 index 000000000..fdb33ee9a --- /dev/null +++ b/platform/ui/.gitignore @@ -0,0 +1,2 @@ +.docz +node_modules \ No newline at end of file diff --git a/platform/ui/.stylelintrc.json b/platform/ui/.stylelintrc.json new file mode 100644 index 000000000..40db42c66 --- /dev/null +++ b/platform/ui/.stylelintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "stylelint-config-standard" +} diff --git a/platform/ui/.webpack/webpack.prod.js b/platform/ui/.webpack/webpack.prod.js deleted file mode 100644 index da7b819bb..000000000 --- a/platform/ui/.webpack/webpack.prod.js +++ /dev/null @@ -1,37 +0,0 @@ -const merge = require('webpack-merge'); -const path = require('path'); -const webpackCommon = require('./../../../.webpack/webpack.commonjs.js'); -const pkg = require('./../package.json'); - -const ROOT_DIR = path.join(__dirname, './..'); -const SRC_DIR = path.join(__dirname, '../src'); -const DIST_DIR = path.join(__dirname, '../dist'); - -module.exports = (env, argv) => { - const commonConfig = webpackCommon(env, argv, { SRC_DIR, DIST_DIR }); - - return merge(commonConfig, { - devtool: 'source-map', - stats: { - colors: true, - hash: true, - timings: true, - assets: true, - chunks: false, - chunkModules: false, - modules: false, - children: false, - warnings: true, - }, - optimization: { - minimize: true, - sideEffects: true, - }, - output: { - path: ROOT_DIR, - library: 'ohifUi', - libraryTarget: 'umd', - filename: pkg.main, - }, - }); -}; diff --git a/platform/ui/LICENSE b/platform/ui/LICENSE deleted file mode 100644 index 19e20dd35..000000000 --- a/platform/ui/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2018 Open Health Imaging Foundation - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/platform/ui/README.md b/platform/ui/README.md index c4c8907ce..f3517820b 100644 --- a/platform/ui/README.md +++ b/platform/ui/README.md @@ -1,125 +1,41 @@ - - -
-

@ohif/ui

+# Basic Docz example -

@ohif/ui is a collection of components and utilities that power OHIF's zero-footprint DICOM viewer.

-
+## Using `create-docz-app` -
-Read The Docs | -Edit the docs - -
- -
- -[![NPM version][npm-version-image]][npm-url] -[![NPM downloads][npm-downloads-image]][npm-url] -[![All Contributors](https://img.shields.io/badge/all_contributors-13-orange.svg?style=flat-square)](#contributors) -[![MIT License][license-image]][license-url] - - - -This set of "Medical Imaging Viewer" React components are maintained separately -to: - -- Decouple presentation from business logic -- Test and develop components in isolation -- Provide well documented, reusable components -- Aid rapid application development for context specific viewers - -## Install - -> This component library is pre- v1.0. All realeases until a v1.0 have the -> possibility of introducing breaking changes. Please depend on an "exact" -> version in your projects to prevent issues caused by loose versioning. - -For full installation instructions, be sure to check out our -[getting started](https://react.ohif.org/getting-started#installation) guide. - -```bash -// with npm -npm i @ohif/ui --save-exact - -// with yarn -yarn add @ohif/ui --exact +```sh +npx create-docz-app docz-app-basic +# or +yarn create docz-app docz-app-basic ``` -## Usage +## Download manually -```jsx -import React, { Component } from 'react'; -import { LayoutButton } from '@ohif/ui'; - -class Example extends Component { - constructor(props) { - super(props); - - this.state = { - selectedCell: { - className: 'hover', - col: 1, - row: 1, - }, - }; - } - - render() { - return ( - this.setState({ selectedCell: cell })} - /> - ); - } -} +```sh +curl https://codeload.github.com/doczjs/docz/tar.gz/master | tar -xz --strip=2 docz-master/examples/basic +mv basic docz-basic-example +cd docz-basic-example ``` -## Developing Locally - -_Restore dependencies after cloning:_ - -```bash -# Restore workspace dependencies (from repository root) -yarn install - -# From project root -yarn run dev:ui - -# OR from this project's directory -yarn run dev +## Setup +```sh +yarn # npm i ``` -## Contributors ✨ +## Run -Thanks goes to these wonderful people -([emoji key](https://allcontributors.org/docs/en/emoji-key)): +```sh +yarn dev # npm run dev +``` - - -
Erik Ziegler
Erik Ziegler

💻 🚧
Danny Brown
Danny Brown

💻 🚧
Gustavo André Lelis
Gustavo André Lelis

💻 🚧
Thiago Maltempi
Thiago Maltempi

💻
Esref Durna
Esref Durna

💻
Steve Pieper
Steve Pieper

💻
Biharck Araujo
Biharck Araujo

💻
Rodrigo Antinarelli
Rodrigo Antinarelli

💻
João Felipe de Medeiros Moreira
João Felipe de Medeiros Moreira

💻
James Gosbell
James Gosbell

💻
Evren Ozkan
Evren Ozkan

💻
Zach S.
Zach S.

💻
Mete Ugur Akdogan
Mete Ugur Akdogan

💻
+## Build - +```sh +yarn build # npm run build +``` -This project follows the -[all-contributors](https://github.com/all-contributors/all-contributors) -specification. Contributions of any kind welcome! +## Serve built app -## License - -MIT © [OHIF](https://github.com/OHIF) - - - - -[all-contributors-image]: https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square -[npm-url]: https://npmjs.org/package/@ohif/ui -[npm-downloads-image]: https://img.shields.io/npm/dm/@ohif/ui.svg?style=flat-square -[npm-version-image]: https://img.shields.io/npm/v/@ohif/ui.svg?style=flat-square -[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square -[license-url]: LICENSE - +```sh +yarn serve # npm run serve +``` \ No newline at end of file diff --git a/platform/ui/app.css b/platform/ui/app.css deleted file mode 100644 index 96f3a6db2..000000000 --- a/platform/ui/app.css +++ /dev/null @@ -1,12 +0,0 @@ -.ExampleDropTarget{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;min-height:100px;border:2px dashed #000;padding:20px;-webkit-transition:all .2s ease;transition:all .2s ease}.ExampleDropTarger p,.ExampleDropTarget h4{text-align:center;word-break:break-word}.ExampleDropTarget.can-drop{border:2px dashed #20a5d6;background-color:#fafafa;color:#000}.ExampleDropTarget.hovered{border:2px dashed #20a5d6;background-color:#000;color:#91b9cd;cursor:copy} -.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes shake{0%,to{-webkit-transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px)}}@keyframes shake{0%,to{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}.shake{-webkit-animation-name:shake;animation-name:shake}.modal{display:block}.modal-content>.close{position:absolute;top:10px;right:10px}@media (min-width:768px){.modal-sm>.modal-dialog{width:300px}}@media (min-width:992px){.modal-lg>.modal-dialog{width:900px}} -.RoundedButtonGroup{--height:25px;position:relative;z-index:0}.roundedButtonWrapper{cursor:pointer;display:inline-block;float:left;margin-left:-2px;text-decoration:none;text-align:center}.roundedButtonWrapper.disabled{opacity:.5;cursor:not-allowed}.RoundedButtonGroup .roundedButtonWrapper .roundedButton{-webkit-box-align:center;align-items:center;background-color:var(--ui-gray-dark);border:2px solid var(--ui-border-color-dark);color:var(--text-secondary-color);display:-webkit-box;display:flex;font-size:15px;font-weight:500;-webkit-box-pack:center;justify-content:center;height:var(--height);line-height:var(--height);padding:0 22px;position:relative;text-transform:uppercase;-webkit-transition:var(--sidebar-transition);transition:var(--sidebar-transition);z-index:1}.roundedButtonWrapper .roundedButton svg .roundedButtonWrapper .roundedButton span{margin:0 2px}.roundedButtonWrapper .roundedButton i{line-height:15px;font-size:15px}.bottomLabel{color:var(--text-secondary-color);font-size:12px;font-weight:500;line-height:12px;margin-top:8px}.roundedButtonWrapper:first-child{margin-left:0}.RoundedButtonGroup .roundedButtonWrapper:first-child .roundedButton{border-bottom-left-radius:var(--height);border-top-left-radius:var(--height)}.RoundedButtonGroup .roundedButtonWrapper:last-child .roundedButton{border-bottom-right-radius:var(--height);border-top-right-radius:var(--height)}.roundedButtonWrapper:hover .roundedButton{background-color:var(--box-background-color);color:var(--ui-gray-dark)}.roundedButtonWrapper.active .roundedButton{background-color:var(--active-color);border-color:var(--ui-border-color-active);color:var(--ui-gray-dark);z-index:2} -.PresetDateRangePicker_panel{padding:0 22px 11px}.PresetDateRangePicker_button{position:relative;height:100%;text-align:center;background:0 0;border:2px solid #00a699;color:#00a699;padding:4px 12px;margin-right:8px;font:inherit;font-weight:700;line-height:normal;overflow:visible;box-sizing:border-box;cursor:pointer}.PresetDateRangePicker_button:active{outline:0}.PresetDateRangePicker_button__selected{color:#fff;background:#00a699}.SingleDatePickerInput{display:inline-block;background-color:#fff}.SingleDatePickerInput__withBorder{border-radius:2px;border:1px solid #dbdbdb}.SingleDatePickerInput__rtl{direction:rtl}.SingleDatePickerInput__disabled{background-color:#f2f2f2}.SingleDatePickerInput__block{display:block}.SingleDatePickerInput__showClearDate{padding-right:30px}.SingleDatePickerInput_clearDate{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;cursor:pointer;padding:10px;margin:0 10px 0 5px;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.SingleDatePickerInput_clearDate__default:focus,.SingleDatePickerInput_clearDate__default:hover{background:#dbdbdb;border-radius:50%}.SingleDatePickerInput_clearDate__small{padding:6px}.SingleDatePickerInput_clearDate__hide{visibility:hidden}.SingleDatePickerInput_clearDate_svg{fill:#82888a;height:12px;width:15px;vertical-align:middle}.SingleDatePickerInput_clearDate_svg__small{height:9px}.SingleDatePickerInput_calendarIcon{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;cursor:pointer;display:inline-block;vertical-align:middle;padding:10px;margin:0 5px 0 10px}.SingleDatePickerInput_calendarIcon_svg{fill:#82888a;height:15px;width:14px;vertical-align:middle}.SingleDatePicker{position:relative;display:inline-block}.SingleDatePicker__block{display:block}.SingleDatePicker_picker{z-index:1;background-color:#fff;position:absolute}.SingleDatePicker_picker__rtl{direction:rtl}.SingleDatePicker_picker__directionLeft{left:0}.SingleDatePicker_picker__directionRight{right:0}.SingleDatePicker_picker__portal{background-color:rgba(0,0,0,.3);position:fixed;top:0;left:0;height:100%;width:100%}.SingleDatePicker_picker__fullScreenPortal{background-color:#fff}.SingleDatePicker_closeButton{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;cursor:pointer;position:absolute;top:0;right:0;padding:15px;z-index:2}.SingleDatePicker_closeButton:focus,.SingleDatePicker_closeButton:hover{color:darken(#cacccd,10%);text-decoration:none}.SingleDatePicker_closeButton_svg{height:15px;width:15px;fill:#cacccd}.DayPickerKeyboardShortcuts_buttonReset{background:0 0;border:0;border-radius:0;color:inherit;font:inherit;line-height:normal;overflow:visible;padding:0;cursor:pointer;font-size:14px}.DayPickerKeyboardShortcuts_buttonReset:active{outline:0}.DayPickerKeyboardShortcuts_show{width:33px;height:26px;position:absolute;z-index:2}.DayPickerKeyboardShortcuts_show:before{content:"";display:block;position:absolute}.DayPickerKeyboardShortcuts_show__bottomRight{bottom:0;right:0}.DayPickerKeyboardShortcuts_show__bottomRight:before{border-top:26px solid transparent;border-right:33px solid #00a699;bottom:0;right:0}.DayPickerKeyboardShortcuts_show__bottomRight:hover:before{border-right:33px solid #008489}.DayPickerKeyboardShortcuts_show__topRight{top:0;right:0}.DayPickerKeyboardShortcuts_show__topRight:before{border-bottom:26px solid transparent;border-right:33px solid #00a699;top:0;right:0}.DayPickerKeyboardShortcuts_show__topRight:hover:before{border-right:33px solid #008489}.DayPickerKeyboardShortcuts_show__topLeft{top:0;left:0}.DayPickerKeyboardShortcuts_show__topLeft:before{border-bottom:26px solid transparent;border-left:33px solid #00a699;top:0;left:0}.DayPickerKeyboardShortcuts_show__topLeft:hover:before{border-left:33px solid #008489}.DayPickerKeyboardShortcuts_showSpan{color:#fff;position:absolute}.DayPickerKeyboardShortcuts_showSpan__bottomRight{bottom:0;right:5px}.DayPickerKeyboardShortcuts_showSpan__topRight{top:1px;right:5px}.DayPickerKeyboardShortcuts_showSpan__topLeft{top:1px;left:5px}.DayPickerKeyboardShortcuts_panel{overflow:auto;background:#fff;border:1px solid #dbdbdb;border-radius:2px;position:absolute;top:0;bottom:0;right:0;left:0;z-index:2;padding:22px;margin:33px;text-align:left}.DayPickerKeyboardShortcuts_title{font-size:16px;font-weight:700;margin:0}.DayPickerKeyboardShortcuts_list{list-style:none;padding:0;font-size:14px}.DayPickerKeyboardShortcuts_close{position:absolute;right:22px;top:22px;z-index:2}.DayPickerKeyboardShortcuts_close:active{outline:0}.DayPickerKeyboardShortcuts_closeSvg{height:15px;width:15px;fill:#cacccd}.DayPickerKeyboardShortcuts_closeSvg:focus,.DayPickerKeyboardShortcuts_closeSvg:hover{fill:#82888a}.CalendarDay{box-sizing:border-box;cursor:pointer;font-size:14px;text-align:center}.CalendarDay:active{outline:0}.CalendarDay__defaultCursor{cursor:default}.CalendarDay__default{border:1px solid #e4e7e7;color:#484848;background:#fff}.CalendarDay__default:hover{background:#e4e7e7;border:1px solid #e4e7e7;color:inherit}.CalendarDay__hovered_offset{background:#f4f5f5;border:1px double #e4e7e7;color:inherit}.CalendarDay__outside{border:0;background:#fff;color:#484848}.CalendarDay__outside:hover{border:0}.CalendarDay__blocked_minimum_nights{background:#fff;border:1px solid #eceeee;color:#cacccd}.CalendarDay__blocked_minimum_nights:active,.CalendarDay__blocked_minimum_nights:hover{background:#fff;color:#cacccd}.CalendarDay__highlighted_calendar{background:#ffe8bc;color:#484848}.CalendarDay__highlighted_calendar:active,.CalendarDay__highlighted_calendar:hover{background:#ffce71;color:#484848}.CalendarDay__selected_span{background:#66e2da;border:1px double #33dacd;color:#fff}.CalendarDay__selected_span:active,.CalendarDay__selected_span:hover{background:#33dacd;border:1px double #33dacd;color:#fff}.CalendarDay__last_in_range,.CalendarDay__last_in_range:hover{border-style:solid}.CalendarDay__selected,.CalendarDay__selected:active,.CalendarDay__selected:hover{background:#00a699;border:1px double #00a699;color:#fff}.CalendarDay__hovered_span,.CalendarDay__hovered_span:hover{background:#b2f1ec;border:1px double #80e8e0;color:#007a87}.CalendarDay__hovered_span:active{background:#80e8e0;border:1px double #80e8e0;color:#007a87}.CalendarDay__blocked_calendar,.CalendarDay__blocked_calendar:active,.CalendarDay__blocked_calendar:hover{background:#cacccd;border:1px solid #cacccd;color:#82888a}.CalendarDay__blocked_out_of_range,.CalendarDay__blocked_out_of_range:active,.CalendarDay__blocked_out_of_range:hover{background:#fff;border:1px solid #e4e7e7;color:#cacccd}.CalendarMonth{background:#fff;text-align:center;vertical-align:top;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.CalendarMonth_table{border-collapse:collapse;border-spacing:0}.CalendarMonth_verticalSpacing{border-collapse:initial}.CalendarMonth_caption{color:#484848;font-size:18px;text-align:center;padding-top:22px;padding-bottom:37px;caption-side:top}.CalendarMonth_caption__verticalScrollable{padding-top:12px;padding-bottom:7px}.CalendarMonthGrid{background:#fff;text-align:left;z-index:0}.CalendarMonthGrid__animating{z-index:1}.CalendarMonthGrid__horizontal{position:absolute;left:9px}.CalendarMonthGrid__vertical{margin:0 auto}.CalendarMonthGrid__vertical_scrollable{margin:0 auto;overflow-y:scroll}.CalendarMonthGrid_month__horizontal{display:inline-block;vertical-align:top;min-height:100%}.CalendarMonthGrid_month__hideForAnimation{position:absolute;z-index:-1;opacity:0;pointer-events:none}.CalendarMonthGrid_month__hidden{visibility:hidden}.DayPickerNavigation{position:relative;z-index:2}.DayPickerNavigation__horizontal{height:0}.DayPickerNavigation__verticalDefault{position:absolute;width:100%;height:52px;bottom:0;left:0}.DayPickerNavigation__verticalScrollableDefault{position:relative}.DayPickerNavigation_button{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:0;padding:0;margin:0}.DayPickerNavigation_button__default{border:1px solid #e4e7e7;background-color:#fff;color:#757575}.DayPickerNavigation_button__default:focus,.DayPickerNavigation_button__default:hover{border:1px solid #c4c4c4}.DayPickerNavigation_button__default:active{background:#f2f2f2}.DayPickerNavigation_button__disabled{cursor:default;border:1px solid #f2f2f2}.DayPickerNavigation_button__disabled:focus,.DayPickerNavigation_button__disabled:hover{border:1px solid #f2f2f2}.DayPickerNavigation_button__disabled:active{background:0 0}.DayPickerNavigation_button__horizontalDefault{position:absolute;top:18px;line-height:.78;border-radius:3px;padding:6px 9px}.DayPickerNavigation_leftButton__horizontalDefault{left:22px}.DayPickerNavigation_rightButton__horizontalDefault{right:22px}.DayPickerNavigation_button__verticalDefault{padding:5px;background:#fff;box-shadow:0 0 5px 2px rgba(0,0,0,.1);position:relative;display:inline-block;text-align:center;height:100%;width:50%}.DayPickerNavigation_nextButton__verticalDefault{border-left:0}.DayPickerNavigation_nextButton__verticalScrollableDefault{width:100%}.DayPickerNavigation_svg__horizontal{height:19px;width:19px;fill:#82888a;display:block}.DayPickerNavigation_svg__vertical{height:42px;width:42px;fill:#484848}.DayPickerNavigation_svg__disabled{fill:#f2f2f2}.DayPicker{position:relative;text-align:left}.DayPicker,.DayPicker__horizontal{background:#fff}.DayPicker__verticalScrollable{height:100%}.DayPicker__hidden{visibility:hidden}.DayPicker__withBorder{box-shadow:0 2px 6px rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.07);border-radius:3px}.DayPicker_portal__horizontal{box-shadow:none;position:absolute;left:50%;top:50%}.DayPicker_portal__vertical{position:static}.DayPicker_focusRegion{outline:0}.DayPicker_calendarInfo__horizontal,.DayPicker_wrapper__horizontal{display:inline-block;vertical-align:top}.DayPicker_weekHeaders{position:relative}.DayPicker_weekHeaders__horizontal{margin-left:9px}.DayPicker_weekHeader{color:#757575;position:absolute;top:62px;z-index:2;text-align:left}.DayPicker_weekHeader__vertical{left:50%}.DayPicker_weekHeader__verticalScrollable{top:0;display:table-row;border-bottom:1px solid #dbdbdb;background:#fff;margin-left:0;left:0;width:100%;text-align:center}.DayPicker_weekHeader_ul{list-style:none;margin:1px 0;padding-left:0;padding-right:0;font-size:14px}.DayPicker_weekHeader_li{display:inline-block;text-align:center}.DayPicker_transitionContainer{position:relative;overflow:hidden;border-radius:3px}.DayPicker_transitionContainer__horizontal{-webkit-transition:height .2s ease-in-out;transition:height .2s ease-in-out}.DayPicker_transitionContainer__vertical{width:100%}.DayPicker_transitionContainer__verticalScrollable{padding-top:20px;height:100%;position:absolute;top:0;bottom:0;right:0;left:0;overflow-y:scroll}.DateInput{margin:0;padding:0;background:#fff;position:relative;display:inline-block;width:130px;vertical-align:middle}.DateInput__small{width:97px}.DateInput__block{width:100%}.DateInput__disabled{background:#f2f2f2;color:#dbdbdb}.DateInput_input{font-weight:200;font-size:19px;line-height:24px;color:#484848;background-color:#fff;width:100%;padding:11px 11px 9px;border:0;border-bottom:2px solid transparent;border-radius:0}.DateInput_input__small{font-size:15px;line-height:18px;letter-spacing:.2px;padding:7px 7px 5px}.DateInput_input__regular{font-weight:auto}.DateInput_input__readOnly{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.DateInput_input__focused{outline:0;background:#fff;border:0;border-bottom:2px solid #008489}.DateInput_input__disabled{background:#f2f2f2;font-style:italic}.DateInput_screenReaderMessage{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.DateInput_fang{position:absolute;width:20px;height:10px;left:22px;z-index:2}.DateInput_fangShape{fill:#fff}.DateInput_fangStroke{stroke:#dbdbdb;fill:transparent}.DateRangePickerInput{background-color:#fff;display:inline-block}.DateRangePickerInput__disabled{background:#f2f2f2}.DateRangePickerInput__withBorder{border-radius:2px;border:1px solid #dbdbdb}.DateRangePickerInput__rtl{direction:rtl}.DateRangePickerInput__block{display:block}.DateRangePickerInput__showClearDates{padding-right:30px}.DateRangePickerInput_arrow{display:inline-block;vertical-align:middle;color:#484848}.DateRangePickerInput_arrow_svg{vertical-align:middle;fill:#484848;height:24px;width:24px}.DateRangePickerInput_clearDates{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;cursor:pointer;padding:10px;margin:0 10px 0 5px;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.DateRangePickerInput_clearDates__small{padding:6px}.DateRangePickerInput_clearDates_default:focus,.DateRangePickerInput_clearDates_default:hover{background:#dbdbdb;border-radius:50%}.DateRangePickerInput_clearDates__hide{visibility:hidden}.DateRangePickerInput_clearDates_svg{fill:#82888a;height:12px;width:15px;vertical-align:middle}.DateRangePickerInput_clearDates_svg__small{height:9px}.DateRangePickerInput_calendarIcon{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;cursor:pointer;display:inline-block;vertical-align:middle;padding:10px;margin:0 5px 0 10px}.DateRangePickerInput_calendarIcon_svg{fill:#82888a;height:15px;width:14px;vertical-align:middle}.DateRangePicker{position:relative;display:inline-block}.DateRangePicker__block{display:block}.DateRangePicker_picker{z-index:1;background-color:#fff;position:absolute}.DateRangePicker_picker__rtl{direction:rtl}.DateRangePicker_picker__directionLeft{left:0}.DateRangePicker_picker__directionRight{right:0}.DateRangePicker_picker__portal{background-color:rgba(0,0,0,.3);position:fixed;top:0;left:0;height:100%;width:100%}.DateRangePicker_picker__fullScreenPortal{background-color:#fff}.DateRangePicker_closeButton{background:0 0;border:0;color:inherit;font:inherit;line-height:normal;overflow:visible;cursor:pointer;position:absolute;top:0;right:0;padding:15px;z-index:2}.DateRangePicker_closeButton:focus,.DateRangePicker_closeButton:hover{color:darken(#cacccd,10%);text-decoration:none}.DateRangePicker_closeButton_svg{height:15px;width:15px;fill:#cacccd} -.select-ohif{display:block;font-family:Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:.8em;font-weight:600;color:#444;line-height:1.3;padding:.6em 1.4em .5em .8em;width:100%;max-width:100%;box-sizing:border-box;margin:0;border:1px solid #aaa;box-shadow:0 1px 0 1px rgba(0,0,0,.04);border-radius:.5em;-moz-appearance:none;-webkit-appearance:none;appearance:none;background-color:#fff;background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"),-webkit-gradient(linear,left top,left bottom,from(#fff),to(#e5e5e5));background-image:url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E"),linear-gradient(180deg,#fff 0,#e5e5e5);background-repeat:no-repeat,repeat;background-position:right .7em top 50%,0 0;background-size:.65em auto,100%}.select-ohif::-ms-expand{display:none}.select-ohif:hover{border-color:#888}.select-ohif:focus{border-color:#aaa;box-shadow:0 0 1px 3px rgba(59,153,252,.7);box-shadow:0 0 0 3px -moz-mac-focusring;color:#222;outline:none}.select-ohif option{font-weight:400} -.label-ohif{font-size:1em;color:#fff}.label-example{background-color:var(--ui-gray-darker)} -.range{margin:0;width:100%;-webkit-appearance:none}.range:focus{outline:none}.range::-webkit-slider-runnable-track{width:100%;height:2px;cursor:pointer;box-shadow:none;background-color:var(--ui-border-color-dark);border-radius:0;border:0 solid var(--ui-border-color-dark)}.range::-moz-range-track{width:100%;height:2px;cursor:pointer;box-shadow:none;background-color:var(--ui-border-color-dark);border-radius:0;border:0 solid var(--ui-border-color-dark)}.range::-webkit-slider-thumb{box-shadow:none;border:0 solid var(--active-color);box-shadow:0 10px 10px rgba(0,0,0,.25);height:21px;width:11px;border-radius:11px;background:var(--active-color);cursor:pointer;-webkit-appearance:none;margin-top:-10px}.range::-moz-range-thumb{box-shadow:none;border:0 solid var(--active-color);box-shadow:0 10px 10px rgba(0,0,0,.25);height:21px;width:11px;border-radius:11px;background:var(--active-color);cursor:pointer;-webkit-appearance:none;margin-top:-10px}.range::-moz-focus-outer{border:0}.range-example{background:#000;height:2em} -.textarea-ohif{background-color:#b6b6b6;border-color:#b6b6b6;font-family:Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1em} -.input-ohif{background-color:#b6b6b6;border-color:#b6b6b6;font-family:Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:1em} -.dd-menu{float:left;margin-right:10px;cursor:pointer;position:relative;z-index:999}.dd-title{font-size:13px}.dd-caret-down,.dd-menu-toggle{display:inline-block}.dd-caret-down{width:0;height:0;margin-top:.5rem;margin-left:.5rem;border-top:5px solid;border-right:5px solid transparent;border-left:5px solid transparent}.dd-menu-list{position:absolute;top:100%;margin-top:10px;background:#fff;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;overflow:hidden;transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-ms-transition:all .3s ease;-o-transition:all .3s ease}.dd-menu-list.open{display:inline-block}.dd-menu-list.left{left:0}.dd-menu-list.right{right:0}.dd-menu-list.center{left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.dd-item{display:-webkit-box;display:flex;color:var(--text-color-active);padding:10px 15px;border-bottom:1px solid #ccc}.dd-item:hover{text-decoration:none;background:#eee}.dd-item:last-child{border-bottom:none}.dd-item-icon{margin-right:10px;margin-top:2px} -.viewport-container{float:left;position:relative;border:var(--viewport-border-thickness) solid var(--ui-border-color)}.viewport-container.active{border:var(--viewport-border-thickness) solid var(--active-color)}.EmptyViewport{display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center;-webkit-box-align:center;align-items:center;height:100%;color:var(--text-secondary-color)}.LayoutPanel{width:100%;height:100%} -.LayoutPanelDropTarget{width:100%;height:100%;opacity:1;-webkit-transition:all .3s ease;transition:all .3s ease}.LayoutPanelDropTarget.hovered{opacity:.5;cursor:copy} diff --git a/platform/ui/babel.config.js b/platform/ui/babel.config.js deleted file mode 100644 index fed6f05fe..000000000 --- a/platform/ui/babel.config.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require("../../babel.config.js"); diff --git a/platform/ui/doczrc.js b/platform/ui/doczrc.js deleted file mode 100644 index b3abf4cd3..000000000 --- a/platform/ui/doczrc.js +++ /dev/null @@ -1,75 +0,0 @@ -/** - * Docz Configuration File: - * https://www.docz.site/docs/project-configuration - */ - -import { css } from "docz-plugin-css"; - -export default { - dest: "example/build", - public: "/public", - wrapper: "src/__docs__/wrapper", - indexHtml: "src/__docs__/index.html", - // Limited support for importing `.styl` files - codeSandbox: false, - // https://github.com/pedronauck/docz/pull/849/files - // Because we re-export using `index.js` files - notUseSpecifiers: true, - menu: [ - "Introduction", - "Getting Started", - { name: "Elements", menu: ["Form / Select"] }, - { - name: "Components", - menu: [ - "CINE Dialog", - "Layout Button", - "Measurement Table", - "Overlay Trigger", - "Quick Switch", - "Rounded Button Group", - "Select Tree", - "Simple Dialog", - "Study Browser", - "Study List", - "Table List", - "Toolbar Section", - "About Modal", - "User Preferences Modal" - ] - }, - "Styling & Theming", - "Translating", - "Compatibility" - ], - // Rollup Aliases? - // https://github.com/pedronauck/docz/issues/373 - plugins: [ - // CSS - css(), - // Stylus - css({ - preprocessor: "stylus", - cssmodules: false - }) - ], - // `docz` uses file-loader to pull in SVGs. This kills our icons before - // They can be picked up by our `babel-plugin-inline-react-svg` dependency - // You can see where it's configured here: - // https://github.com/pedronauck/docz/blob/f72624d0aa5231dab17e1770e8d36be920f590a2/core/docz-core/src/bundler/loaders.ts#L135-L144 - // How we delete our rule: - // https://github.com/neutrinojs/webpack-chain/issues/48 - onCreateWebpackChain: config => { - config.module.rules.delete("svg"); - }, - modifyBabelRc: babelrc => { - const newBabelRc = { - ...babelrc, - plugins: [ - ...babelrc.plugins, - require.resolve("babel-plugin-inline-react-svg") - ] - }; - return newBabelRc; - } -}; diff --git a/platform/ui/jest.config.js b/platform/ui/jest.config.js deleted file mode 100644 index 78c435aa3..000000000 --- a/platform/ui/jest.config.js +++ /dev/null @@ -1,10 +0,0 @@ -const base = require("../../jest.config.base.js"); -const pkg = require("./package"); - -const esModules = ["react-dnd"]; - -module.exports = { - ...base, - name: pkg.name, - displayName: pkg.name -}; diff --git a/platform/ui/package.json b/platform/ui/package.json index ea67c6537..ef907d308 100644 --- a/platform/ui/package.json +++ b/platform/ui/package.json @@ -1,12 +1,10 @@ { "name": "@ohif/ui", - "version": "1.4.4", + "version": "2.0.0", "description": "A set of React components for Medical Imaging Viewers", "author": "OHIF Contributors", "license": "MIT", "repository": "OHIF/Viewers", - "main": "dist/index.umd.js", - "module": "src/index.js", "publishConfig": { "access": "public" }, @@ -20,51 +18,24 @@ "README.md" ], "scripts": { - "dev": "docz dev", - "dev:ui": "yarn run dev", - "docs": "docz build", - "build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js", - "build:package": "yarn run build", - "prepublishOnly": "yarn run build", - "test:unit": "jest --watchAll", - "test:unit:ci": "jest --ci --runInBand --collectCoverage --passWithNoTests" - }, - "peerDependencies": { - "@ohif/i18n": "^0.2.3", - "i18next": "^17.0.3", - "react": "^16.8.6", - "react-dom": "^16.8.6", - "react-i18next": "^10.11.0" + "dev": "concurrently \"npm run watch:css\" \"docz dev\"", + "build": "concurrently \"npm run build:css\" \"docz build\"", + "serve": "docz serve", + "build:css": "postcss src/styles/tailwind.css -o src/gatsby-theme-docz/app.css", + "watch:css": "postcss src/styles/tailwind.css -o src/gatsby-theme-docz/app.css -w" }, "dependencies": { - "@babel/runtime": "^7.5.5", - "@ohif/i18n": "^0.2.3", - "browser-detect": "^0.2.28", - "classnames": "2.2.6", - "i18next": "^17.0.3", - "i18next-browser-languagedetector": "^3.0.1", - "lodash.debounce": "^4.0.8", - "lodash.isequal": "4.5.0", - "moment": "2.24.0", - "prop-types": "15.6.2", - "react-bootstrap-modal": "4.2.0", - "react-dates": "21.2.1", - "react-dnd": "9.4.0", - "react-dnd-html5-backend": "^9.4.0", - "react-dnd-touch-backend": "^9.4.0", - "react-draggable": "^4.1.0", - "react-i18next": "^10.11.0", - "react-modal": "^3.11.1", - "react-with-direction": "1.3.0" + "concurrently": "^5.1.0", + "docz": "latest", + "prop-types": "^15.7.2", + "react": "^16.11.0", + "react-dom": "^16.11.0" }, "devDependencies": { - "@mdx-js/tag": "^0.20.3", - "autoprefixer": "^9.6.0", - "docz": "1.2.0", - "docz-core": "1.2.0", - "docz-plugin-css": "0.11.0", - "docz-theme-default": "1.2.0", - "lodash.clonedeep": "^4.5.0", - "react-powerplug": "1.0.0" + "autoprefixer": "^9.7.4", + "postcss-cli": "^7.1.0", + "stylelint": "^13.1.0", + "stylelint-config-standard": "^20.0.0", + "tailwindcss": "^1.2.0" } } diff --git a/platform/ui/postcss.config.js b/platform/ui/postcss.config.js index 6402436e4..67b84dc96 100644 --- a/platform/ui/postcss.config.js +++ b/platform/ui/postcss.config.js @@ -1 +1,7 @@ -module.exports = require("../../postcss.config.js"); +const tailwindcss = require('tailwindcss'); +const configs = require('../../postcss.config.js'); + +module.exports = { + ...configs, + plugins: [tailwindcss('./tailwind.js'), require('autoprefixer')], +}; diff --git a/platform/ui/public/docz.css b/platform/ui/public/docz.css deleted file mode 100644 index 1c45c19aa..000000000 --- a/platform/ui/public/docz.css +++ /dev/null @@ -1,44 +0,0 @@ -/* Tip & Success "Call outs" */ - -p.tip { - border-left-color: #f66; -} -p.success { - border-left-color: #42b983; -} -p.tip::before { - content: '!'; - background-color: #f66; -} -p.success::before { - content: '\f00c'; - font-family: FontAwesome; - background-color: #42b983; -} -p.tip, -p.success { - padding: 12px 24px 12px 30px; - margin: 2em 0; - line-height: 1.6em; - border-left-width: 4px; - border-left-style: solid; - background-color: #f8f8f8; - position: relative; - border-bottom-right-radius: 2px; - border-top-right-radius: 2px; -} -p.tip::before, -p.success::before { - position: absolute; - top: 14px; - left: -12px; - color: #fff; - width: 20px; - height: 20px; - border-radius: 100%; - text-align: center; - line-height: 20px; - font-weight: bold; - font-family: 'Dosis', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif; - font-size: 14px; -} diff --git a/platform/ui/src/ScrollableArea/ScrollableArea.js b/platform/ui/src/ScrollableArea/ScrollableArea.js deleted file mode 100644 index 0a76c63e5..000000000 --- a/platform/ui/src/ScrollableArea/ScrollableArea.js +++ /dev/null @@ -1,152 +0,0 @@ -import './ScrollableArea.styl'; - -import React, { Component } from 'react'; - -import { Icon } from './../elements/Icon'; -import PropTypes from 'prop-types'; -import getScrollbarSize from '../utils/getScrollbarSize.js'; -import throttled from '../utils/throttled.js'; - -export class ScrollableArea extends Component { - static propTypes = { - children: PropTypes.node.isRequired, - class: PropTypes.string, - scrollableClass: PropTypes.string, - scrollX: PropTypes.bool, - scrollY: PropTypes.bool, - hideScrollbar: PropTypes.bool, - scrollStep: PropTypes.number, - }; - - static defaultProps = { - hideScrollbar: true, - class: 'flex-grow fit', - scrollY: true, - scrollX: false, - scrollStep: 100, - }; - - constructor(props) { - super(props); - - this.state = { - scrollAreaClasses: '', - }; - - this.scrollHandlerThrottled = throttled(150, this.scrollHandler); - } - - render() { - let scrollableClass = 'scrollable'; - if (this.props.scrollableClass) { - scrollableClass += ` ${this.props.scrollableClass}`; - } - if (this.props.scrollX) { - scrollableClass += ` scrollX`; - } - if (this.props.scrollY) { - scrollableClass += ` scrollY`; - } - - return ( -
-
{ - this.scrollableElement = element; - }} - onScroll={this.scrollHandlerThrottled} - onMouseEnter={this.scrollHandlerThrottled} - onTransitionEnd={this.scrollHandlerThrottled} - > - {this.props.children} -
-
- {/* */} - -
-
- -
-
- ); - } - - componentDidMount() { - this.adjustMargins(); - this.scrollHandler(); - window.addEventListener('resize', this.adjustMargins); - } - - componentDidUpdate() { - this.adjustMargins(); - this.scrollHandler(); - } - - componentWillUnmount() { - window.removeEventListener('resize', this.adjustMargins); - } - - scrollNavDown = event => { - const { - scrollTop: currentTop, - offsetHeight: height, - scrollHeight, - } = this.scrollableElement; - - const limit = scrollHeight - height; - let scrollTop = currentTop + this.props.scrollStep; - scrollTop = scrollTop > limit ? limit : scrollTop; - this.scrollableElement.scrollTop = scrollTop; - }; - - scrollNavUp = event => { - const { scrollTop: currentTop } = this.scrollableElement; - - let scrollTop = currentTop - this.props.scrollStep; - scrollTop = scrollTop < 0 ? 0 : scrollTop; - - this.scrollableElement.scrollTop = scrollTop; - }; - - adjustMargins = () => { - if (this.props.hideScrollbar) { - const x = this.props.scrollX ? 1 : 0; - const y = this.props.scrollY ? 1 : 0; - const scrollbarSize = getScrollbarSize(); - this.scrollableElement.style.marginRight = `${0 - - scrollbarSize[0] * y}px`; - this.scrollableElement.style.marginBottom = `${0 - - scrollbarSize[1] * x}px`; - } - }; - - scrollHandler = () => { - const { - offsetHeight: height, - scrollTop: scrollTop, - scrollHeight, - } = this.scrollableElement; - let scrollAreaClasses = ''; - - // Check if can scroll up - if (scrollTop) { - scrollAreaClasses += 'canScrollUp'; - } - - // Check if can scroll down - if (scrollTop + height < scrollHeight) { - scrollAreaClasses += ' canScrollDown'; - } - - if (this.state.scrollAreaClasses !== scrollAreaClasses) { - this.setState({ - scrollAreaClasses, - }); - } - }; -} diff --git a/platform/ui/src/ScrollableArea/ScrollableArea.styl b/platform/ui/src/ScrollableArea/ScrollableArea.styl deleted file mode 100644 index 6c49f8197..000000000 --- a/platform/ui/src/ScrollableArea/ScrollableArea.styl +++ /dev/null @@ -1,69 +0,0 @@ -.scrollArea - overflow: hidden - position: relative - - .scrollable - max-height: inherit - overflow: hidden - zoom: 1 - - &.scrollX - overflow-x: scroll - - &.scrollY - overflow-y: scroll - - &.fit - height: 100% - width: 100% - - .scrollable - bottom: 0 - left: 0 - max-height: none - position: absolute - right: 0 - top: 0 - - .scrollNav - background-color: rgba(0, 0, 0, 0.75) - box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.75) - cursor: pointer - height: 24px - left: 10px - opacity: 0 - position: absolute - right: 10px - transition: all 0.3s ease - - .scrollNavIcon - color: var(--active-color); - display: block; - width: 18px; - height: 18px; - margin: 0 auto; - transition: color 0.3s ease; - - &:hover - background-color: rgba(0, 0, 0, 0.9) - box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.9) - - .scrollNavIcon - color: var(--hover-color) - - .scrollNavUp - border-bottom-left-radius: 12px - border-bottom-right-radius: 12px - top: 0 - transform: translateY(-24px) - - .scrollNavDown - border-top-left-radius: 12px - border-top-right-radius: 12px - bottom: 0 - transform: translateY(24px) - - &.canScrollUp .scrollNavUp, - &.canScrollDown .scrollNavDown - opacity: 1 - transform: translateY(0) diff --git a/platform/ui/src/__docs__/NameSpace.js b/platform/ui/src/__docs__/NameSpace.js deleted file mode 100644 index 81e1bfa34..000000000 --- a/platform/ui/src/__docs__/NameSpace.js +++ /dev/null @@ -1,17 +0,0 @@ -import React, { Fragment } from 'react'; -import { Link } from 'docz'; -import PropTypes from 'prop-types'; - -const NameSpace = ({ name }) => ( - - The namespace used on this component was:
{name}
Check the{' '} - translation docs{' '} - to see how to override it. -
-); - -NameSpace.propTypes = { - name: PropTypes.string.isRequired, -}; - -export default NameSpace; diff --git a/platform/ui/src/__docs__/assets/github.png b/platform/ui/src/__docs__/assets/github.png deleted file mode 100644 index 7db0aacec..000000000 Binary files a/platform/ui/src/__docs__/assets/github.png and /dev/null differ diff --git a/platform/ui/src/__docs__/assets/npm.png b/platform/ui/src/__docs__/assets/npm.png deleted file mode 100644 index 4fbd0761b..000000000 Binary files a/platform/ui/src/__docs__/assets/npm.png and /dev/null differ diff --git a/platform/ui/src/__docs__/assets/react.png b/platform/ui/src/__docs__/assets/react.png deleted file mode 100644 index e307be822..000000000 Binary files a/platform/ui/src/__docs__/assets/react.png and /dev/null differ diff --git a/platform/ui/src/__docs__/assets/typescript.png b/platform/ui/src/__docs__/assets/typescript.png deleted file mode 100644 index 69a60783d..000000000 Binary files a/platform/ui/src/__docs__/assets/typescript.png and /dev/null differ diff --git a/platform/ui/src/__docs__/compatibility.mdx b/platform/ui/src/__docs__/compatibility.mdx deleted file mode 100644 index fd6b842c7..000000000 --- a/platform/ui/src/__docs__/compatibility.mdx +++ /dev/null @@ -1,15 +0,0 @@ ---- -name: Compatibility -route: /compatibility ---- - -# Compatibility - -## Browser Support - -`@ohif/ui` relies on -[browsers supported by Styled Components](https://www.styled-components.com/docs/faqs#which-browsers-are-supported) -or browsers supported by emotion. - -Supported Browsers: IE11, IE 9+ (with Map + Set polyfills), Chrome, Firefox (and -derivatives), Edge, and Safari. diff --git a/platform/ui/src/__docs__/config/Wrapper.js b/platform/ui/src/__docs__/config/Wrapper.js deleted file mode 100644 index e69de29bb..000000000 diff --git a/platform/ui/src/__docs__/docs-settings.mdx b/platform/ui/src/__docs__/docs-settings.mdx deleted file mode 100644 index 200133a85..000000000 --- a/platform/ui/src/__docs__/docs-settings.mdx +++ /dev/null @@ -1,13 +0,0 @@ ---- -name: Docs Settings -route: /docs-settings ---- - -import LanguageSwitcher from '../components/languageSwitcher'; - -# Components Language - -You can change the language of the components displayed in this documentation by -choosing an option in the selector below: - - diff --git a/platform/ui/src/__docs__/getting-started.mdx b/platform/ui/src/__docs__/getting-started.mdx deleted file mode 100644 index eea8c528d..000000000 --- a/platform/ui/src/__docs__/getting-started.mdx +++ /dev/null @@ -1,76 +0,0 @@ ---- -name: Getting Started -route: /getting-started ---- - -# Getting Started - -## Installation - -> This component library is pre- v1.0. All realeases until a v1.0 have the -> possibility of introducing breaking changes. Please depend on an "exact" -> version in your projects to prevent issues caused by loose versioning. - -Install `@ohif/ui` from npm: - -```shell -// with npm -npm i @ohif/ui --save-exact - -// with yarn -yarn add @ohif/ui --exact -``` - -## Usage - -There is some setup required for `@ohif/ui`. We are working to eliminate these -requirements with the goal of providing ready to use components. - -### External Dependencies - -We have tried to keep the number of external dependencies limited to make setup -as easy as possible. You will, however, need to include either the default font -or the font you set for your theme: - -```js -// Google Fonts, Roboto -'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700&display=swap'; -``` - -`@ohif/ui` also looks for theme CSS variabled defined on `:root`. You can find a -list of variables [on the theming page](/styling-and-theming) - -### Import & Use - -You can use components in your React app: - -```js -import React, { Component } from 'react'; -import { LayoutButton } from '@ohif/ui'; - -class Example extends Component { - constructor(props) { - super(props); - - this.state = { - selectedCell: { - className: 'hover', - col: 1, - row: 1, - }, - }; - } - - render() { - return ( - this.setState({ selectedCell: cell })} - /> - ); - } -} -``` - -> NOTE: It is heavily recommended that you use a CSS reset or normalize. As well -> as the following style: `* { Box-sizing: Border-box }` diff --git a/platform/ui/src/__docs__/index.html b/platform/ui/src/__docs__/index.html deleted file mode 100644 index 7920139aa..000000000 --- a/platform/ui/src/__docs__/index.html +++ /dev/null @@ -1,83 +0,0 @@ - - - - - - - - - - {{ title }} - - - - - - - {{ head }} - - - -
- {{ footer }} - - - diff --git a/platform/ui/src/__docs__/introduction.mdx b/platform/ui/src/__docs__/introduction.mdx deleted file mode 100644 index 061928b0a..000000000 --- a/platform/ui/src/__docs__/introduction.mdx +++ /dev/null @@ -1,76 +0,0 @@ ---- -name: Introduction -route: / ---- - -import { Playground, Props } from 'docz'; -import { State } from 'react-powerplug'; -import { TableList, TableListItem } from './../index.js'; - -# Introduction - -**@ohif/ui is a collection of components and utilities** that power OHIF's -[zero-footprint DICOM viewer](https://github.com/OHIF/Viewers) -([demo][demo-url]). We maintain them as a separate component library to: - -- Decouple presentation from business logic -- Test and develop components in isolation -- Provide well documented, reusable components -- Aid rapid application development for context specific viewers - -## Quick Example - -> This component library is pre- v1.0. All realeases until a v1.0 have the -> possibility of introducing breaking changes. Please depend on an "exact" -> version in your projects to prevent issues caused by loose versioning. - -```js -// Add '@ohif/ui' as a dependency -yarn add @ohif/ui - -// Import and use components -import { TableList } from '@ohif/ui' -``` - - - - {({ state, setState }) => ( - - {state.listItems.map((item, index) => { - return ( - alert('item clicked')} - > - - - ); - })} - - )} - - - -## FAQ - -... - - - - -[demo-url]: https://docs.ohif.org/demo/ - diff --git a/platform/ui/src/__docs__/styling-and-theming.mdx b/platform/ui/src/__docs__/styling-and-theming.mdx deleted file mode 100644 index ce98dcde0..000000000 --- a/platform/ui/src/__docs__/styling-and-theming.mdx +++ /dev/null @@ -1,56 +0,0 @@ ---- -name: Styling & Theming -route: /styling-and-theming ---- - -# Styling & Theming - -```css -:root { - /* Interface UI Colors */ - --default-color: #9ccef9; - --hover-color: #ffffff; - --active-color: #20a5d6; - --ui-border-color: #44626f; - --ui-border-color-dark: #3c5d80; - --ui-border-color-active: #00a4d9; - --primary-background-color: #000000; - --box-background-color: #3e5975; - - --text-primary-color: #ffffff; - --text-secondary-color: #91b9cd; - --input-background-color: #2c363f; - --input-placeholder-color: #d3d3d3; - - --table-hover-color: #2c363f; - --table-text-primary-color: #ffffff; - --table-text-secondary-color: #91b9cd; - - --large-numbers-color: #6fbde2; - - --state-error: #ffcccc; - --state-error-border: #ffcccc; - --state-error-text: #ffcccc; - - /* Common palette */ - --ui-yellow: #e29e4a; - --ui-sky-blue: #6fbde2; - - /* State palette */ - --ui-state-error: #ffcccc; - --ui-state-error-border: #993333; - --ui-state-error-text: #661111; - --ui-gray-lighter: #436270; - --ui-gray-light: #516873; - --ui-gray: #263340; - --ui-gray-dark: #16202b; - --ui-gray-darker: #151a1f; - --ui-gray-darkest: #14202a; - - --calendar-day-color: #d3d3d3; - --calendar-day-border-color: #d3d3d3; - --calendar-day-active-hover-background-color: #516873; - --calendar-main-color: #263340; - --viewport-border-thickness: 1px; -} -``` diff --git a/platform/ui/src/__docs__/translating.mdx b/platform/ui/src/__docs__/translating.mdx deleted file mode 100644 index 194ad0c80..000000000 --- a/platform/ui/src/__docs__/translating.mdx +++ /dev/null @@ -1,87 +0,0 @@ ---- -name: Translating -route: /translating ---- - -# Translating - -**React Viewerbase** supports internationalization using -[i18next](https://www.i18next.com/) through the npm package -[@ohif/i18n](https://www.npmjs.com/package/@ohif/i18n), where is the main -instance of i18n containing several languages and tools. - -## How to translate components - -All you need is to use the internal custom superset of -[withTranslation HOC](https://react.i18next.com/latest/withtranslation-hoc), -available at `src/utils/LanguageProvider.js` - -e.g.: - -```js -import React from 'react'; -import { withTranslation } from '../utils/LanguageProvider.js'; - -function MyComponent({ t }) { - return

{t('my translated text')}

; -} - -export default withTranslation('MyNameSpace')(MyComponent); -``` - ---- - -## Namespaces - -For further information about namespaces and how they work, please visit -[OHIF Namespaces docs](https://docs.ohif.org/viewer/internationalization.html#namespaces). - -### How to get right the Namespace of a `@ohif/ui` component? - -Check the component's page in this site, the Namespace information should be on -the bottom line. - -Also, a nameSpace is defined when exporting a component, this information can be -found on exports trough the code, in case of missing in docs. - -E.g. - -``` -export default withTranslation('TheNamespaceYouAreLookingFor')(TheComponentYouWantToUse); -``` - -### How to use another Namespace inside the current Namespace? - -i18next provides a parsing feature able to get translations strings from any -Namespace, like this following example getting data from `InnerSpace` Namespace: - -``` -$t(InnerSpace:Reset) -export default withTranslation('OuterSpace')(TheComponent); -``` - ---- - -## I18next Provider - -**@ohif/ui** pass down the `t` function trough the custom -[withTranslation HOC](https://github.com/OHIF/Viewers/blob/master/platform/ui/src/utils/LanguageProvider.js). - ---- - -## Extending and Overriding languages - -[How to Extend languages with @ohif/i18n](https://docs.ohif.org/viewer/internationalization.html#extending-languages-in-ohifi18n) - -## Changing the language - -The language choosing method is the same implemented in -[OHIF Viewers](https://docs.ohif.org/viewer/internationalization.html#changing-the-language) - -> You can also change the language of the components displayed in this -> documentation by choosing an option in the -> [Docs Settings](https://react.ohif.org/docs-settings) section. - -## Debugging translations - -[How to Debug @ohif/i18n](https://docs.ohif.org/viewer/internationalization.html#debugging-translations) diff --git a/platform/ui/src/__docs__/wrapper.js b/platform/ui/src/__docs__/wrapper.js deleted file mode 100644 index 0e94c5559..000000000 --- a/platform/ui/src/__docs__/wrapper.js +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; - -import PropTypes from 'prop-types'; -import LanguageSwitcher from '../components/languageSwitcher'; - -import './wrapper.styl'; - -const Wrapper = ({ children }) => ( - -
- Display components in: - -
- {children} -
-); - -Wrapper.propTypes = { - children: PropTypes.node.isRequired, -}; - -export default Wrapper; diff --git a/platform/ui/src/__docs__/wrapper.styl b/platform/ui/src/__docs__/wrapper.styl deleted file mode 100644 index b1a4dae6d..000000000 --- a/platform/ui/src/__docs__/wrapper.styl +++ /dev/null @@ -1,15 +0,0 @@ -[class*="Sidebar__Menus"] - @media (min-width: 1120px) - margin-top: 80px - -.sidebarLanguageSwitcher - position: fixed - top: 155px - left 0 - z-index: 1049 - padding: 0 24px 20px - border-bottom: 1px dotted #CED4DE - background: #F5F6F7 - transition: all 200ms ease - @media (max-width: 1119px) - left -100% diff --git a/platform/ui/src/components/Alert.jsx b/platform/ui/src/components/Alert.jsx new file mode 100644 index 000000000..361dc16bc --- /dev/null +++ b/platform/ui/src/components/Alert.jsx @@ -0,0 +1,34 @@ +import React from 'react'; +import t from 'prop-types'; + +const kinds = { + info: '#5352ED', + positive: '#2ED573', + negative: '#FF4757', + warning: '#FFA502', +}; + +export const Alert = ({ children, kind, ...rest }) => ( +
+ {children} +
+); + +Alert.propTypes = { + /** + * The kind prop is used to set the alert's background color + */ + kind: t.oneOf(['info', 'positive', 'negative', 'warning']), +}; + +Alert.defaultProps = { + kind: 'info', +}; diff --git a/platform/ui/src/components/Alert.mdx b/platform/ui/src/components/Alert.mdx new file mode 100644 index 000000000..c0eab1417 --- /dev/null +++ b/platform/ui/src/components/Alert.mdx @@ -0,0 +1,28 @@ +--- +name: Alert +menu: Components +--- + +import { Playground, Props } from 'docz' +import { Alert } from './Alert' + +# Alert + +## Properties + + + +## Basic usage + + + Some message + + +## Using different kinds + + + Some message + Some message + Some message + Some message + diff --git a/platform/ui/src/components/Button/Button.jsx b/platform/ui/src/components/Button/Button.jsx new file mode 100644 index 000000000..391b9fbd0 --- /dev/null +++ b/platform/ui/src/components/Button/Button.jsx @@ -0,0 +1,124 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const Button = ({ + children, + variant = defaults.variant, + color = defaults.color, + size = defaults.size, + radius = defaults.radius, + disabled = defaults.disabled, + elevation, + type = defaults.type, + startIcon: startIconProp, + endIcon: endIconProp, + className, + ...rest +}) => { + const hasIcon = startIconProp || endIconProp; + const getClasses = () => { + const classes = []; + let buttonElevation; + + if (variant === 'text') { + if (elevation) { + buttonElevation = elevation; + } else { + buttonElevation = false; + } + } else { + buttonElevation = defaults.elevation; + } + + classes.push(variantClasses[variant][color]); + classes.push(radiusClasses[radius]); + classes.push(sizeClasses[size]); + classes.push(disabledClasses[disabled]); + classes.push(elevationClasses[buttonElevation]); + classes.push(className); + + if (hasIcon) { + classes.push(baseIconClasses); + } + + return classes.join(' '); + }; + + const baseIconClasses = 'inline-flex items-center'; + const baseClasses = + 'outline-none transition duration-300 ease-in-out rounded font-bold focus:outline-none'; + + const startIcon = startIconProp && ( +
{startIconProp}
+ ); + + const endIcon = endIconProp &&
{endIconProp}
; + + return ( + + ); +}; + +const defaults = { + variant: 'outlined', + color: 'default', + size: 'medium', + radius: 'medium', + disabled: false, + elevation: true, + type: 'button', +}; + +const radiusClasses = { + small: 'rounded-sm', + medium: 'rounded-md', + large: 'rounded-lg', + full: 'rounded-full', +}; + +const disabledClasses = { + true: 'cursor-not-allowed', + false: '', +}; + +const elevationClasses = { + true: 'shadow', + false: 'shadow-none', +}; + +const variantClasses = { + text: { + default: 'hover:bg-gray-200 text-black', + primary: 'hover:bg-blue-100 text-blue-900', + secondary: 'hover:bg-blue-100 text-blue-300', + }, + outlined: { + default: 'border border-black text-black hover:bg-gray-200', + primary: 'border border-blue-900 text-blue-900 hover:bg-blue-100', + secondary: 'border border-blue-300 text-blue-300 hover:bg-blue-100', + }, + contained: { + default: 'bg-black hover:bg-gray-800 text-white', + primary: 'bg-blue-900 hover:bg-blue-800 text-white', + secondary: 'bg-blue-300 hover:bg-blue-500 text-black', + }, +}; + +const sizeClasses = { + small: 'py-1 px-2 text-sm', + medium: 'py-2 px-4 text-base', + large: 'py-3 px-6 text-lg', +}; + +Button.propTypes = { + size: PropTypes.oneOf(['small', 'medium', 'large']), + radius: PropTypes.oneOf(['small', 'medium', 'large', 'full']), + variant: PropTypes.oneOf(['text', 'outlined', 'contained']), + color: PropTypes.oneOf(['default', 'primary', 'secondary']), +}; + +export default Button; diff --git a/platform/ui/src/components/Button/Button.mdx b/platform/ui/src/components/Button/Button.mdx new file mode 100644 index 000000000..8f0e45713 --- /dev/null +++ b/platform/ui/src/components/Button/Button.mdx @@ -0,0 +1,180 @@ +--- +name: Button +menu: Components +route: components/button +--- + +import { Playground, Props } from 'docz'; +import Button from './'; + +# Button + +Buttons are used to execute actions when users interacts with them. + +## Properties + + + +## Contained Buttons + + + <> + + + + + + +## Outlined Buttons + + + <> + + + + + + +## Text Buttons + + + <> + + + + + + +## Sizes + + + <> +
+ + + +
+
+ + + +
+
+ + + +
+ + + +
+ +## Buttons with icons + + +{() => { + return ( +
+ + +
+ ) + }} + +
diff --git a/platform/ui/src/components/Button/index.js b/platform/ui/src/components/Button/index.js new file mode 100644 index 000000000..4ae846f77 --- /dev/null +++ b/platform/ui/src/components/Button/index.js @@ -0,0 +1,2 @@ +import Button from './Button'; +export default Button; diff --git a/platform/ui/src/components/Input/Input.jsx b/platform/ui/src/components/Input/Input.jsx new file mode 100644 index 000000000..d2954ef23 --- /dev/null +++ b/platform/ui/src/components/Input/Input.jsx @@ -0,0 +1,17 @@ +import React from 'react'; +import Label from '../Label'; + +const Input = ({ label, ...rest }) => { + return ( + <> + + + ); +}; + +export default Input; diff --git a/platform/ui/src/components/Input/Input.mdx b/platform/ui/src/components/Input/Input.mdx new file mode 100644 index 000000000..0124f4a6d --- /dev/null +++ b/platform/ui/src/components/Input/Input.mdx @@ -0,0 +1,30 @@ +--- +name: Input +menu: Components +route: components/input +--- + +import { Playground, Props } from 'docz'; +import Input from './'; + +# Input + +## Properties + + + +## Basic usage + + + {() => { + const [inputValue, setInputValue] = React.useState(''); + return ( + setInputValue(e.target.value)} + /> + ); + }} + diff --git a/platform/ui/src/components/Input/index.js b/platform/ui/src/components/Input/index.js new file mode 100644 index 000000000..edaf55496 --- /dev/null +++ b/platform/ui/src/components/Input/index.js @@ -0,0 +1,2 @@ +import Input from './Input'; +export default Input; diff --git a/platform/ui/src/components/Label/Label.jsx b/platform/ui/src/components/Label/Label.jsx new file mode 100644 index 000000000..7721a8b96 --- /dev/null +++ b/platform/ui/src/components/Label/Label.jsx @@ -0,0 +1,34 @@ +import React from 'react'; +import t from 'prop-types'; + +const Label = ({ children, spacing, className, text, ...rest }) => { + const baseClasses = 'block text-gray-700 text-sm font-bold'; + + const getClasses = () => { + const classes = []; + classes.push(baseClasses); + classes.push(className); + return classes.join(' '); + }; + + return ( +
+ +
+ ); +}; + +const spacing = { + small: 'mb-1', + medium: 'mb-2', + large: 'mb-3', +}; + +Label.defaultProps = {}; + +Label.prototypes = {}; + +export default Label; diff --git a/platform/ui/src/components/Label/Label.mdx b/platform/ui/src/components/Label/Label.mdx new file mode 100644 index 000000000..07664b61f --- /dev/null +++ b/platform/ui/src/components/Label/Label.mdx @@ -0,0 +1,20 @@ +--- +name: Label +menu: Components +route: components/label +--- + +import { Playground, Props } from 'docz'; +import Label from './'; + +# Label + +## Properties + + + +## Basic usage + + + diff --git a/platform/ui/src/components/Label/index.js b/platform/ui/src/components/Label/index.js new file mode 100644 index 000000000..614295c24 --- /dev/null +++ b/platform/ui/src/components/Label/index.js @@ -0,0 +1,2 @@ +import Label from './Label'; +export default Label; diff --git a/platform/ui/src/components/checkbox/__docs__/checkbox.mdx b/platform/ui/src/components/checkbox/__docs__/checkbox.mdx deleted file mode 100644 index dd74a6af5..000000000 --- a/platform/ui/src/components/checkbox/__docs__/checkbox.mdx +++ /dev/null @@ -1,42 +0,0 @@ ---- -name: Checkbox -menu: Elements -route: /components/checkbox ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { Checkbox } from './../index' -import NameSpace from '../../../__docs__/NameSpace' - -# Checkbox - -## Basic usage - - - - {({ state, setState }) => ( - -
-
{JSON.stringify(state, null, 2)}
-
-
- -
-
- )} -
-
- -## API - - - -## Translation Namespace - - \ No newline at end of file diff --git a/platform/ui/src/components/checkbox/checkbox.css b/platform/ui/src/components/checkbox/checkbox.css deleted file mode 100644 index 96311b6fd..000000000 --- a/platform/ui/src/components/checkbox/checkbox.css +++ /dev/null @@ -1,56 +0,0 @@ -.ohif-check-container { - --check-button-dim: 15px; -} - -.ohif-check-container input { - position: absolute; - opacity: 0; - height: inherit; - width: inherit; - cursor: default; -} - -.ohif-check-container { - display: block; - position: relative; - padding-left: 35px; - margin-bottom: 12px; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.ohif-checkbox { - width: var(--check-button-dim); - height: var(--check-button-dim); - position: absolute; - top: 20%; - left: 5%; - cursor: pointer; - background-color: var(--ui-gray-lighter); -} - -.ohif-checkbox:hover { - background-color: var(--default-color); -} - -.ohif-checkbox:after { - content: ''; - position: absolute; - width: 70%; - height: 70%; -} - -.ohif-checkbox.ohif-checked:after { - display: block; - top: 14%; - left: 14%; - background: white; -} - -.ohif-check-label { - font-size: 12px; - font-weight: 500; -} diff --git a/platform/ui/src/components/checkbox/checkbox.js b/platform/ui/src/components/checkbox/checkbox.js deleted file mode 100644 index 0315bab02..000000000 --- a/platform/ui/src/components/checkbox/checkbox.js +++ /dev/null @@ -1,58 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import './checkbox.css'; - -export class Checkbox extends Component { - static propTypes = { - label: PropTypes.string.isRequired, - checked: PropTypes.bool, - onChange: PropTypes.func, - }; - - constructor(props) { - super(props); - this.state = { checked: !!props.checked, label: props.label }; - } - - handleChange(e) { - const checked = e.target.checked; - this.setState({ checked }); - if (this.props.onChange) this.props.onChange(checked); - } - - componentDidUpdate(props) { - const { checked = false, label } = props; - - if (this.state.checked !== checked || this.state.label !== label) { - this.setState({ - checked, - label, - }); - } - } - - render() { - let checkbox; - if (this.state.checked) { - checkbox = ; - } else { - checkbox = ; - } - - return ( -
-
- -
-
- ); - } -} diff --git a/platform/ui/src/components/checkbox/index.js b/platform/ui/src/components/checkbox/index.js deleted file mode 100644 index 9d1514175..000000000 --- a/platform/ui/src/components/checkbox/index.js +++ /dev/null @@ -1 +0,0 @@ -export { Checkbox } from './checkbox.js'; diff --git a/platform/ui/src/components/cineDialog/CineDialog.js b/platform/ui/src/components/cineDialog/CineDialog.js deleted file mode 100644 index e64d94aa7..000000000 --- a/platform/ui/src/components/cineDialog/CineDialog.js +++ /dev/null @@ -1,197 +0,0 @@ -import './CineDialog.styl'; - -import React, { PureComponent } from 'react'; -import { withTranslation } from '../../contextProviders'; -import { Icon } from './../../elements/Icon'; -import PropTypes from 'prop-types'; - -class CineDialog extends PureComponent { - constructor(props) { - super(props); - - this.state = { - cineFrameRate: props.cineFrameRate, - isPlaying: props.isPlaying, - }; - } - - static propTypes = { - /** Minimum value for range slider */ - cineMinFrameRate: PropTypes.number.isRequired, - /** Maximum value for range slider */ - cineMaxFrameRate: PropTypes.number.isRequired, - /** Increment range slider can "step" in either direction. */ - cineStepFrameRate: PropTypes.number.isRequired, - cineFrameRate: PropTypes.number.isRequired, - /** 'True' if playing, 'False' if paused. */ - isPlaying: PropTypes.bool.isRequired, - onPlayPauseChanged: PropTypes.func, - onFrameRateChanged: PropTypes.func, - onClickNextButton: PropTypes.func, - onClickBackButton: PropTypes.func, - onClickSkipToStart: PropTypes.func, - onClickSkipToEnd: PropTypes.func, - /** i18next translation function */ - t: PropTypes.func.isRequired, - }; - - static defaultProps = { - cineMinFrameRate: 1, - cineMaxFrameRate: 90, - cineStepFrameRate: 1, - cineFrameRate: 24, - isPlaying: false, - }; - - componentDidUpdate(prevProps) { - // TODO: Not sure if we should just switch this to a stateless - // fully-controlled component instead - if ( - this.props.isPlaying !== prevProps.isPlaying || - this.props.isPlaying !== this.state.isPlaying - ) { - this.setState({ - isPlaying: this.props.isPlaying, - }); - } - - if ( - this.props.cineFrameRate !== prevProps.cineFrameRate || - this.props.cineFrameRate !== this.state.cineFrameRate - ) { - this.setState({ - cineFrameRate: this.props.cineFrameRate, - }); - } - } - - handleInputChange = event => { - const target = event.target; - - let value = target.value; - - if (target.type === 'range') { - value = parseFloat(target.value); - } - - const name = target.name; - - this.setState({ - [name]: value, - }); - - if (name === 'cineFrameRate' && this.props.onFrameRateChanged) { - this.props.onFrameRateChanged(parseFloat(value)); - } - }; - - onClickPlayPause = () => { - const value = !this.state.isPlaying; - - this.setState({ - isPlaying: value, - }); - - if (this.props.onPlayPauseChanged) { - this.props.onPlayPauseChanged(value); - } - }; - - onClickNextButton = event => { - if (this.props.onClickNextButton) { - this.props.onClickNextButton(event); - } - }; - - onClickBackButton = event => { - if (this.props.onClickBackButton) { - this.props.onClickBackButton(event); - } - }; - - onClickSkipToStart = event => { - if (this.props.onClickSkipToStart) { - this.props.onClickSkipToStart(event); - } - }; - - onClickSkipToEnd = event => { - if (this.props.onClickSkipToEnd) { - this.props.onClickSkipToEnd(event); - } - }; - - render() { - const { t } = this.props; - return ( -
-
-
-
- - - - - -
-
-
-
- -
- - {this.state.cineFrameRate.toFixed(1)} {t('fps')} - -
-
-
- ); - } -} - -const connectedComponent = withTranslation('CineDialog')(CineDialog); -export { connectedComponent as CineDialog }; -export default connectedComponent; diff --git a/platform/ui/src/components/cineDialog/CineDialog.styl b/platform/ui/src/components/cineDialog/CineDialog.styl deleted file mode 100644 index 67b59cff3..000000000 --- a/platform/ui/src/components/cineDialog/CineDialog.styl +++ /dev/null @@ -1,172 +0,0 @@ -@import './../../design/styles/common/global.styl' -@import './../../design/styles/common/form.styl' - -.CineDialog - background: var(--ui-gray-darkest); - color: var(--text-secondary-color); - filter: drop-shadow(0 0 3px var(--ui-gray-darkest)) - border: none - border-radius: 8px - width: inherit; - - h5 - font-size: 20px - line-height: 35px - margin: 0 - - h5, label - font-weight: 400 - - .cine-navigation, .cine-controls, .cine-options - cursor: default - - .fps-section - input[type="range"] - background-color: transparent - border: 0 none - outline: 0 none - - &::-ms-tooltip - display: none - - .double-row-style - box-sizing: border-box - width: 290px - height: 70px - padding: 10px - top: 2% - left: 35% - - .cine-navigation - position: absolute - right: 16px - top: 10px - - .btn - padding: 0 4px - - i - font-size: 32px - line-height: 32px - - .cine-controls - left: 0px - - .cine-options - padding: 0px 0 - - .fps-section - width: 175px - float: left - - .fps - float: right - - - .single-row-style - box-sizing: content-box - width: 425px - height: 45px - padding: 4px 8px - top: 2% - left: 35% - - .cine-navigation - float: right - overflow: hidden - padding-right: 12px - position: relative - - .btn - padding: 0 2px - margin: 0 0 0 2px - border: 0 none - &:first-of-type - margin-left: 0 - - i - font-size: 32px - line-height: 45px - - .cine-controls - position: relative - float: left - overflow: hidden - - .btn - font-size: 22px - line-height: 45px - min-width: 28px - padding: 0 0px - margin: 0 4px - border: 0 none - - .cine-options - display: block - position: relative - width: 150px - float: left - overflow: hidden - padding: 0 - margin: 0 0 0 10px - - .fps-section - display: block - float: left - width: 80px - input[type="range"] - line-height: 45px - height: 45px - - .fps - display: block - width: 68px - float: left - padding: 0 - margin: 0 0 0 2px - text-align: center - line-height: 45px - font-size: 14px; - line-height: 1.42857143; - - .btn - color: var(--text-secondary-color); - background-color: transparent - border: 0 - border-radius: 4px - font-size: 15px - width: 45px - font-weight: normal - height: 37px - line-height: 37px - padding: 0 12px - - &:hover, &:active, &.active - color: var(--hover-color); - - &[disabled] - &:hover - color: inherit - &:active - color: var(--text-secondary-color); - - &.btn-primary, &.btn-secondary, &.btn-danger - transition: background-color 0.3s ease - - &:hover, &:active, &:focus - opacity: 0.8 - - &.btn-primary - background-color: var(--active-color); - color: var(--primary-background-color) - - &.btn-secondary - background-color: var(--text-secondary-color); - color: var(--primary-background-color) - - &.btn-danger - background-color: var(--text-destructive-color); - color: var(--text-primary-color); - - &.active - box-shadow: inset 1px 1px 2px var(--ui-gray-darkest) diff --git a/platform/ui/src/components/cineDialog/__docs__/cineDialog.mdx b/platform/ui/src/components/cineDialog/__docs__/cineDialog.mdx deleted file mode 100644 index 48ecfa0fd..000000000 --- a/platform/ui/src/components/cineDialog/__docs__/cineDialog.mdx +++ /dev/null @@ -1,57 +0,0 @@ ---- -name: CINE Dialog -menu: Components -route: /components/cine-dialog ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { CineDialog } from './../index' -import NameSpace from '../../../__docs__/NameSpace' - -# CINE Dialog - -## Basic usage - - - - {({ state, setState }) => ( - -
-
{JSON.stringify(state, null, 2)}
-
-
- - setState({ lastChange: 'Clicked SkipToStart' }) - } - onClickSkipToEnd={() => - setState({ lastChange: 'Clicked SkipToEnd' }) - } - onClickNextButton={() => setState({ lastChange: 'Clicked Next' })} - onClickBackButton={() => setState({ lastChange: 'Clicked Back' })} - onLoopChanged={value => setState({ isLoopEnabled: value })} - onFrameRateChanged={value => setState({ cineFrameRate: value })} - onPlayPauseChanged={() => setState({ isPlaying: !state.isPlaying })} - /> -
-
- )} -
-
- -## API - - - -## Translation Namespace - - diff --git a/platform/ui/src/components/cineDialog/index.js b/platform/ui/src/components/cineDialog/index.js deleted file mode 100644 index 5827ce588..000000000 --- a/platform/ui/src/components/cineDialog/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import CineDialog from './CineDialog'; -export { CineDialog }; diff --git a/platform/ui/src/components/content/aboutContent/AboutContent.js b/platform/ui/src/components/content/aboutContent/AboutContent.js deleted file mode 100644 index 9f38e8974..000000000 --- a/platform/ui/src/components/content/aboutContent/AboutContent.js +++ /dev/null @@ -1,107 +0,0 @@ -import React from 'react'; -import detect from 'browser-detect'; -import { useTranslation } from 'react-i18next'; - -import './AboutContent.styl'; - -const AboutContent = () => { - const { t } = useTranslation('AboutContent'); - - const { os, version, name } = detect(); - const capitalize = s => - s.substr(0, 1).toUpperCase() + s.substr(1).toLowerCase(); - - const itemsPreset = () => { - return [ - { - name: t('Repository URL'), - value: 'https://github.com/OHIF/Viewers/', - link: 'https://github.com/OHIF/Viewers/', - }, - { - name: t('Latest Master Commits'), - value: 'https://github.com/OHIF/Viewers/commits/master', - link: 'https://github.com/OHIF/Viewers/commits/master', - }, - { - name: 'Version Number', - value: process.env.VERSION_NUMBER, - }, - { - name: t('Build Number'), - value: process.env.BUILD_NUM, - }, - { - name: t('Browser'), - value: `${capitalize(name)} ${version}`, - }, - { - name: t('OS'), - value: os, - }, - ]; - }; - - const renderTableRow = ({ name, value, link }) => ( - - {name} - - {link ? ( - - {value} - - ) : ( - value - )} - - - ); - - return ( -
- -
-

{t('Version Information')}

- - - - - - - - {itemsPreset().map(item => renderTableRow(item))} -
{t('Name')}{t('Value')}
-
-
- ); -}; - -export { AboutContent }; -export default AboutContent; diff --git a/platform/ui/src/components/content/aboutContent/AboutContent.styl b/platform/ui/src/components/content/aboutContent/AboutContent.styl deleted file mode 100644 index 08d7ff6a9..000000000 --- a/platform/ui/src/components/content/aboutContent/AboutContent.styl +++ /dev/null @@ -1,20 +0,0 @@ -@import '../../../design/styles/common/button.styl' -@import '../../../design/styles/common/table.styl' - -.AboutContent - .btn - border-color: #ccc; - - .table - thead:first-child - tr:first-child - th, td - border-top: 0; - - thead, tbody, tfoot - tr - th, td - padding: 8px; - line-height: 1.42857143; - vertical-align: top; - border-top: 1px solid #ddd; diff --git a/platform/ui/src/components/content/viewportDownloadForm/ViewportDownloadForm.js b/platform/ui/src/components/content/viewportDownloadForm/ViewportDownloadForm.js deleted file mode 100644 index 367d66243..000000000 --- a/platform/ui/src/components/content/viewportDownloadForm/ViewportDownloadForm.js +++ /dev/null @@ -1,431 +0,0 @@ -import React, { - useRef, - useCallback, - useEffect, - useState, - createRef, -} from 'react'; -import PropTypes from 'prop-types'; -import { useTranslation } from 'react-i18next'; - -import './ViewportDownloadForm.styl'; -import { TextInput, Select, Icon } from '@ohif/ui'; -import classnames from 'classnames'; - -const FILE_TYPE_OPTIONS = [ - { - key: 'jpg', - value: 'jpg', - }, - { - key: 'png', - value: 'png', - }, -]; - -const DEFAULT_FILENAME = 'image'; -const REFRESH_VIEWPORT_TIMEOUT = 1000; - -const ViewportDownloadForm = ({ - activeViewport, - onClose, - updateViewportPreview, - enableViewport, - disableViewport, - toggleAnnotations, - loadImage, - downloadBlob, - defaultSize, - minimumSize, - maximumSize, - canvasClass, -}) => { - const [t] = useTranslation('ViewportDownloadForm'); - - const [filename, setFilename] = useState(DEFAULT_FILENAME); - const [fileType, setFileType] = useState('jpg'); - - const [dimensions, setDimensions] = useState({ - width: defaultSize, - height: defaultSize, - }); - - const [showAnnotations, setShowAnnotations] = useState(true); - - const [keepAspect, setKeepAspect] = useState(true); - const [aspectMultiplier, setAspectMultiplier] = useState({ - width: 1, - height: 1, - }); - - const [viewportElement, setViewportElement] = useState(); - const [viewportElementDimensions, setViewportElementDimensions] = useState({ - width: defaultSize, - height: defaultSize, - }); - - const [downloadCanvas, setDownloadCanvas] = useState({ - ref: createRef(), - width: defaultSize, - height: defaultSize, - }); - - const [viewportPreview, setViewportPreview] = useState({ - src: null, - width: defaultSize, - height: defaultSize, - }); - - const [error, setError] = useState({ - width: false, - height: false, - filename: false, - }); - - const hasError = Object.values(error).includes(true); - - const refreshViewport = useRef(null); - - const downloadImage = () => { - downloadBlob( - filename || DEFAULT_FILENAME, - fileType, - viewportElement, - downloadCanvas.ref.current - ); - }; - - /** - * @param {object} event - Input change event - * @param {string} dimension - "height" | "width" - */ - const onDimensionsChange = (event, dimension) => { - const oppositeDimension = dimension === 'height' ? 'width' : 'height'; - const sanitizedTargetValue = event.target.value.replace(/\D/, ''); - const isEmpty = sanitizedTargetValue === ''; - const newDimensions = { ...dimensions }; - const updatedDimension = isEmpty - ? '' - : Math.min(sanitizedTargetValue, maximumSize); - - if (updatedDimension === dimensions[dimension]) { - return; - } - - newDimensions[dimension] = updatedDimension; - - if (keepAspect && newDimensions[oppositeDimension] !== '') { - newDimensions[oppositeDimension] = Math.round( - newDimensions[dimension] * aspectMultiplier[oppositeDimension] - ); - } - - // In current code, keepAspect is always `true` - // And we always start w/ a square width/height - setDimensions(newDimensions); - - // Only update if value is non-empty - if (!isEmpty) { - setViewportElementDimensions(newDimensions); - setDownloadCanvas(state => ({ - ...state, - ...newDimensions, - })); - } - }; - - const error_messages = { - width: t('minWidthError'), - height: t('minHeightError'), - filename: t('emptyFilenameError'), - }; - - const renderErrorHandler = errorType => { - if (!error[errorType]) { - return null; - } - - return
{error_messages[errorType]}
; - }; - - const onKeepAspectToggle = () => { - const { width, height } = dimensions; - const aspectMultiplier = { ...aspectMultiplier }; - if (!keepAspect) { - const base = Math.min(width, height); - aspectMultiplier.width = width / base; - aspectMultiplier.height = height / base; - setAspectMultiplier(aspectMultiplier); - } - - setKeepAspect(!keepAspect); - }; - - const validSize = value => (value >= minimumSize ? value : minimumSize); - const loadAndUpdateViewports = useCallback(async () => { - const { width: scaledWidth, height: scaledHeight } = await loadImage( - activeViewport, - viewportElement, - dimensions.width, - dimensions.height - ); - - toggleAnnotations(showAnnotations, viewportElement); - - const scaledDimensions = { - height: validSize(scaledHeight), - width: validSize(scaledWidth), - }; - - setViewportElementDimensions(scaledDimensions); - setDownloadCanvas(state => ({ - ...state, - ...scaledDimensions, - })); - - const { - dataUrl, - width: viewportElementWidth, - height: viewportElementHeight, - } = await updateViewportPreview( - viewportElement, - downloadCanvas.ref.current, - fileType - ); - - setViewportPreview(state => ({ - ...state, - src: dataUrl, - width: validSize(viewportElementWidth), - height: validSize(viewportElementHeight), - })); - }, [ - activeViewport, - viewportElement, - showAnnotations, - loadImage, - toggleAnnotations, - updateViewportPreview, - fileType, - downloadCanvas.ref, - minimumSize, - maximumSize, - viewportElementDimensions, - ]); - - useEffect(() => { - enableViewport(viewportElement); - - return () => { - disableViewport(viewportElement); - }; - }, [disableViewport, enableViewport, viewportElement]); - - useEffect(() => { - if (refreshViewport.current !== null) { - clearTimeout(refreshViewport.current); - } - - refreshViewport.current = setTimeout(() => { - refreshViewport.current = null; - loadAndUpdateViewports(); - }, REFRESH_VIEWPORT_TIMEOUT); - }, [ - activeViewport, - viewportElement, - showAnnotations, - dimensions, - loadImage, - toggleAnnotations, - updateViewportPreview, - fileType, - downloadCanvas.ref, - minimumSize, - maximumSize, - ]); - - useEffect(() => { - const { width, height } = dimensions; - const hasError = { - width: width < minimumSize, - height: height < minimumSize, - filename: !filename, - }; - - setError({ ...hasError }); - }, [dimensions, filename, minimumSize]); - - return ( -
-
{t('formTitle')}
- -
-
-
-
- onDimensionsChange(evt, 'width')} - data-cy="image-width" - /> - {renderErrorHandler('width')} -
-
- onDimensionsChange(evt, 'height')} - data-cy="image-height" - /> - {renderErrorHandler('height')} -
-
-
- -
-
- -
-
- setFilename(event.target.value)} - label={t('filename')} - id="file-name" - /> - {renderErrorHandler('filename')} -
-
- setShowAnnotations(event.target.checked)} - /> - {t('showAnnotations')} - -
-
-
- -
setViewportElement(ref)} - > - -
- - {viewportPreview.src ? ( -
-
{t('imagePreview')}
- {t('imagePreview')} -
- ) : ( -
- - {t('loadingPreview')} -
- )} - -
-
- -
-
- -
-
-
- ); -}; - -ViewportDownloadForm.propTypes = { - onClose: PropTypes.func.isRequired, - activeViewport: PropTypes.object, - updateViewportPreview: PropTypes.func.isRequired, - enableViewport: PropTypes.func.isRequired, - disableViewport: PropTypes.func.isRequired, - toggleAnnotations: PropTypes.func.isRequired, - loadImage: PropTypes.func.isRequired, - downloadBlob: PropTypes.func.isRequired, - /** A default width & height, between the minimum and maximum size */ - defaultSize: PropTypes.number.isRequired, - minimumSize: PropTypes.number.isRequired, - maximumSize: PropTypes.number.isRequired, - canvasClass: PropTypes.string.isRequired, -}; - -export default ViewportDownloadForm; diff --git a/platform/ui/src/components/content/viewportDownloadForm/ViewportDownloadForm.styl b/platform/ui/src/components/content/viewportDownloadForm/ViewportDownloadForm.styl deleted file mode 100644 index 1ec488623..000000000 --- a/platform/ui/src/components/content/viewportDownloadForm/ViewportDownloadForm.styl +++ /dev/null @@ -1,140 +0,0 @@ -@import '../../../design/styles/common/global.styl' -@import '../../../design/styles/common/form.styl' -@import '../../../design/styles/common/button.styl' - -.ViewportDownloadForm - display: flex; - flex-direction: column; - z-index: 1080 !important; - - input, select - max-height: 30px; - - #keep-aspect svg - margin-top: 3px; - - .title - margin: 0; - font-weight: bold; - - .file-info-container - display: flex; - flex-direction: row; - justify-content: space-around; - margin: 20px 0; - border-radius: 5px; - padding: 20px 10px; - background-color: var(--ui-gray-dark); - - @media screen and (max-width: 1023px) - flex-direction: column; - align-items: flex-start; - - .width, - .height, - .file-name, - .file-type - height: 56px; - - .input-ohif - margin: 0 5px; - - .file-name, - .file-type - .select-ohif, .input-ohif - width: 170px; - - .input-ohif-label, .select-ohif-label - width: 90px; - display: inline-block; - @media screen and (max-width: 1023px) - width: 120px; - - .dimension-wrapper - display: flex; - flex-direction: row; - - .dimensions - display: flex; - flex-direction: column; - - .input-ohif-label - width: 120px; - display: inline-block; - - .input-ohif - @media screen and (max-width: 1023px) - width: 170px; - - .keep-aspect-wrapper - display: flex; - justify-content: center; - align-items: center; - padding: 0 10px; - height: 86px; - - .show-annotations - font-weight: bold; - line-height: 30px; - input - margin-right: 7px; - vertical-align: middle; - label - display: flex; - justify-content: center; - align-items: center; - - .loading-image - height: 580px; - display: flex; - justify-content: center; - align-items: center; - color: var(--active-color); - font-size: 20px; - - .icon-spin - margin-right: 15px; - - .preview - display: flex; - flex-direction: column; - background-color: var(--ui-gray-dark); - padding: 10px; - border-radius: 5px; - justify-content: flex-start; - align-items: center; - height: 580px; - - .viewport-preview - max-height: 512px; - max-width: 512px; - - .preview-header - width: 100%; - text-align center; - font-size: 1.3em; - margin: 0 0 10px; - - .actions - display: flex; - flex-wrap: nowrap; - justify-content: flex-end; - align-items: center; - margin-top: 20px; - - .btn - margin: 0 10px; - - .input-error - font-size: 12px; - color: red; - text-align: center; - margin: 3px 0; - - -.modal-dialog - height: 100%; - - .modal-body - display: flex; - flex-direction: column; diff --git a/platform/ui/src/components/content/viewportDownloadForm/__docs__/viewportDownloadForm.mdx b/platform/ui/src/components/content/viewportDownloadForm/__docs__/viewportDownloadForm.mdx deleted file mode 100644 index f5c1422c3..000000000 --- a/platform/ui/src/components/content/viewportDownloadForm/__docs__/viewportDownloadForm.mdx +++ /dev/null @@ -1,39 +0,0 @@ ---- -name: Viewport Download Form -menu: Components -route: /components/viewport-download-form ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { ViewportDownloadForm } from './../index' -import NameSpace from '../../../__docs__/NameSpace' - -# Viewport Download Form - -## Basic usage - - - - {({ state, setState }) => ( - -
-
{JSON.stringify(state, null, 2)}
-
-
- -
-
- )} -
-
- -## API - - - -## Translation Namespace - - diff --git a/platform/ui/src/components/content/viewportDownloadForm/index.js b/platform/ui/src/components/content/viewportDownloadForm/index.js deleted file mode 100644 index b7026641f..000000000 --- a/platform/ui/src/components/content/viewportDownloadForm/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import ViewportDownloadForm from './ViewportDownloadForm'; -export { ViewportDownloadForm }; diff --git a/platform/ui/src/components/contextMenu/ContextMenu.css b/platform/ui/src/components/contextMenu/ContextMenu.css deleted file mode 100644 index 4facf3c41..000000000 --- a/platform/ui/src/components/contextMenu/ContextMenu.css +++ /dev/null @@ -1,33 +0,0 @@ -.ContextMenu { - position: relative; - background-color: white; - border-radius: 5px; - z-index: 1000; - display: block; - width: 170px; -} - -.ContextMenu>ul { - list-style-type: none; - padding-left: 0; - margin: 0; -} - -.ContextMenu>ul>li>button { - padding: 10px; - font-size: 14px; - border: none; - color: #516873; - border-radius: 3px; - outline: none; - cursor: pointer; - background: none; -} - -.ContextMenu>ul>li>button:hover { - color: #16202b; -} - -.ContextMenu>ul>li>button:active { - color: #79f9fe; -} diff --git a/platform/ui/src/components/contextMenu/index.js b/platform/ui/src/components/contextMenu/index.js deleted file mode 100644 index 5cb9a3ad5..000000000 --- a/platform/ui/src/components/contextMenu/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as ContextMenu } from './ContextMenu.js'; diff --git a/platform/ui/src/components/languageSwitcher/LanguageSwitcher.styl b/platform/ui/src/components/languageSwitcher/LanguageSwitcher.styl deleted file mode 100644 index 51284c874..000000000 --- a/platform/ui/src/components/languageSwitcher/LanguageSwitcher.styl +++ /dev/null @@ -1,4 +0,0 @@ -.language-select - color: var(--primary-background-color) - display: block - min-width: 150px diff --git a/platform/ui/src/components/layoutButton/LayoutButton.js b/platform/ui/src/components/layoutButton/LayoutButton.js deleted file mode 100644 index fd6bdee6a..000000000 --- a/platform/ui/src/components/layoutButton/LayoutButton.js +++ /dev/null @@ -1,64 +0,0 @@ -import React, { PureComponent } from 'react'; - -import { LayoutChooser } from './LayoutChooser.js'; -import PropTypes from 'prop-types'; -import ToolbarButton from '../../viewer/ToolbarButton'; - -export class LayoutButton extends PureComponent { - static defaultProps = { - dropdownVisible: false, - }; - - static propTypes = { - dropdownVisible: PropTypes.bool.isRequired, - /** Called with the selectedCell number when grid sell is selected */ - onChange: PropTypes.func, - /** The cell to show as selected */ - selectedCell: PropTypes.object, - }; - - state = { - dropdownVisible: this.props.dropdownVisible, - }; - - componentDidUpdate(prevProps) { - if (this.props.dropdownVisible !== prevProps.dropdownVisible) { - this.setState({ - dropdownVisible: this.props.dropdownVisible, - }); - } - } - - onClick = () => { - this.setState({ - dropdownVisible: !this.state.dropdownVisible, - }); - }; - - onChange = selectedCell => { - if (this.props.onChange) { - this.props.onChange(selectedCell); - } - }; - - render() { - return ( -
- - -
- ); - } -} - -export default LayoutButton; diff --git a/platform/ui/src/components/layoutButton/LayoutChooser.styl b/platform/ui/src/components/layoutButton/LayoutChooser.styl deleted file mode 100644 index aeb77018d..000000000 --- a/platform/ui/src/components/layoutButton/LayoutChooser.styl +++ /dev/null @@ -1,47 +0,0 @@ -@import './../../design/styles/common/button.styl' -@import './../../design/styles/common/global.styl' - -$borderColor = rgba(77, 99, 110, 0.81) - -.layoutChooser-dropdown-menu - position: absolute; - top: 100%; - left: 0; - z-index: 1000; - display: none; - float: left; - min-width: 160px; - padding: 5px 0; - margin: 2px 0 0; - font-size: 14px; - text-align: left; - list-style: none; - background-color: #fff; - -webkit-background-clip: padding-box; - background-clip: padding-box; - border: 1px solid #ccc; - border: 1px solid rgba(0,0,0,.15); - border-radius: 4px; - -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); - box-shadow: 0 6px 12px rgba(0,0,0,.175); - -.layoutChooser - .selectedBefore - background-color: #5cc3eb - - border: 1px solid $borderColor; - border-radius: 8px - padding: 5px 0; - position: absolute; - z-index: 5000 - - table - margin: 0 auto - border-spacing: 0; - border-collapse: collapse; - td - cursor: pointer - transition(background-color 0.1s ease) - - &:hover, &.hover // Add the hover class here to be triggered by mouseenter/mouseleave - background-color: #209ac9 diff --git a/platform/ui/src/components/layoutButton/__docs__/layoutButton.css b/platform/ui/src/components/layoutButton/__docs__/layoutButton.css deleted file mode 100644 index 21ec59d7e..000000000 --- a/platform/ui/src/components/layoutButton/__docs__/layoutButton.css +++ /dev/null @@ -1,10 +0,0 @@ -.LayoutExample { - background-color: var(--primary-background-color); - width: 160px; - height: 160px; -} - -.GridLayout td { - padding: 5px; - border: 1px solid black; -} diff --git a/platform/ui/src/components/layoutButton/__docs__/layoutButton.mdx b/platform/ui/src/components/layoutButton/__docs__/layoutButton.mdx deleted file mode 100644 index fc6a5a6ac..000000000 --- a/platform/ui/src/components/layoutButton/__docs__/layoutButton.mdx +++ /dev/null @@ -1,49 +0,0 @@ ---- -name: Layout Button -menu: Components -route: /components/layout-button ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { LayoutButton } from './../index.js' -import './layoutButton.css' -import NameSpace from '../../../__docs__/NameSpace' - -# Layout Button - -## Basic usage - - - - {({ state, setState }) => ( - - {/* STATE */} -
{JSON.stringify(state, null, 2) }
- - {/* COMPONENT */} -
- setState({ selectedCell: cell })} - /> -
-
- )} -
- -
- -## API - - - -## Translation Namespace - - diff --git a/platform/ui/src/components/layoutButton/index.js b/platform/ui/src/components/layoutButton/index.js deleted file mode 100644 index b7615590a..000000000 --- a/platform/ui/src/components/layoutButton/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { LayoutButton } from './LayoutButton.js'; -export { LayoutChooser } from './LayoutChooser.js'; diff --git a/platform/ui/src/components/measurementTable/MeasurementTable.js b/platform/ui/src/components/measurementTable/MeasurementTable.js deleted file mode 100644 index 47bbe1adf..000000000 --- a/platform/ui/src/components/measurementTable/MeasurementTable.js +++ /dev/null @@ -1,218 +0,0 @@ -import './MeasurementTable.styl'; - -import React, { Component } from 'react'; -import { withTranslation } from '../../contextProviders'; - -import { Icon } from './../../elements/Icon'; -import { MeasurementTableItem } from './MeasurementTableItem.js'; -import { OverlayTrigger } from './../overlayTrigger'; -import PropTypes from 'prop-types'; -import { ScrollableArea } from './../../ScrollableArea/ScrollableArea.js'; -import { TableList } from './../tableList'; -import { Tooltip } from './../tooltip'; - -class MeasurementTable extends Component { - static propTypes = { - measurementCollection: PropTypes.array.isRequired, - timepoints: PropTypes.array.isRequired, - overallWarnings: PropTypes.object.isRequired, - readOnly: PropTypes.bool, - onItemClick: PropTypes.func, - onRelabelClick: PropTypes.func, - onDeleteClick: PropTypes.func, - onEditDescriptionClick: PropTypes.func, - selectedMeasurementNumber: PropTypes.number, - t: PropTypes.func, - saveFunction: PropTypes.func, - onSaveComplete: PropTypes.func, - }; - - static defaultProps = { - overallWarnings: { - warningList: [], - }, - readOnly: false, - }; - - state = { - selectedKey: null, - }; - - render() { - const { overallWarnings, saveFunction, t } = this.props; - const hasOverallWarnings = overallWarnings.warningList.length > 0; - - return ( -
-
- {hasOverallWarnings && ( - -
- {t('Criteria nonconformities')} -
-
- {this.getWarningContent()} -
- - } - > - - - - - -
- )} - {this.getTimepointsHeader()} -
- -
{this.getMeasurementsGroups()}
-
-
- {saveFunction && ( - - )} -
-
- ); - } - - saveFunction = async event => { - const { saveFunction, onSaveComplete } = this.props; - if (saveFunction) { - try { - const result = await saveFunction(); - if (onSaveComplete) { - onSaveComplete({ - title: 'STOW SR', - message: result.message, - type: 'success', - }); - } - } catch (error) { - if (onSaveComplete) { - onSaveComplete({ - title: 'STOW SR', - message: error.message, - type: 'error', - }); - } - } - } - }; - - getMeasurementsGroups = () => { - return this.props.measurementCollection.map((measureGroup, index) => { - return ( - - {this.getMeasurements(measureGroup)} - - ); - }); - }; - - getMeasurements = measureGroup => { - const selectedKey = this.props.selectedMeasurementNumber - ? this.props.selectedMeasurementNumber - : this.state.selectedKey; - return measureGroup.measurements.map((measurement, index) => { - const key = measurement.measurementNumber; - const itemIndex = measurement.itemNumber || index + 1; - const itemClass = - selectedKey === key && !this.props.readOnly ? 'selected' : ''; - - return ( - - ); - }); - }; - - onItemClick = (event, measurementData) => { - if (this.props.readOnly) return; - - this.setState({ - selectedKey: measurementData.measurementNumber, - }); - - if (this.props.onItemClick) { - this.props.onItemClick(event, measurementData); - } - }; - - getCustomHeader = measureGroup => { - return ( - -
- {this.props.t(measureGroup.groupName)} -
- {measureGroup.maxMeasurements && ( -
- {this.props.t('MAX')} {measureGroup.maxMeasurements} -
- )} -
{measureGroup.measurements.length}
-
- ); - }; - - getTimepointsHeader = () => { - const { timepoints, t } = this.props; - - return timepoints.map((timepoint, index) => { - return ( -
-
{t(timepoint.key)}
-
{timepoint.date}
-
- ); - }); - }; - - getWarningContent = () => { - const { warningList = '' } = this.props.overallWarnings; - - if (Array.isArray(warningList)) { - const listedWarnings = warningList.map((warn, index) => { - return
  • {warn}
  • ; - }); - - return
      {listedWarnings}
    ; - } else { - return {warningList}; - } - }; -} - -const connectedComponent = withTranslation(['MeasurementTable', 'Common'])( - MeasurementTable -); -export { connectedComponent as MeasurementTable }; -export default connectedComponent; diff --git a/platform/ui/src/components/measurementTable/MeasurementTable.styl b/platform/ui/src/components/measurementTable/MeasurementTable.styl deleted file mode 100644 index 42150d84f..000000000 --- a/platform/ui/src/components/measurementTable/MeasurementTable.styl +++ /dev/null @@ -1,116 +0,0 @@ -.measurementTable - background-color: var(--primary-background-color) - height: 100% - width: 100% - display: flex - flex-direction: column - - .maxMeasurements - border-radius: 3px - color: var(--primary-background-color) - font-size: 12px - font-weight: 500 - height: 19px - line-height: 17px - margin-top: 22px - margin-right: 15px - padding: 2px 6px 0 - text-transform: uppercase - transition: all 0.3s ease - background-color: var(--default-color) - - .measurementTableHeader - padding-left: 45px - - .measurementTableHeaderItem - display: inline-block - margin-top: 9px - margin-left: 9px - padding-left: 9px - width: 90px - font-size: 14px - line-height: 20px - border-left: 1px solid var(--text-secondary-color) - color: var(--text-primary-color) - - .timepointLabel - color: var(--text-secondary-color) - font-size: 12px - - .warning-status - display: block - position: absolute - width: 50px - height: 40px - padding-left: 7px - left: 15px - top: 7px - - .warning-border - display: block - border: 2px solid #e29e4a - border-radius: 36px - padding: 6px 7px - width: 40px - height: 40px - - svg - color: #e29e4a - width: 22px - height: 20px - pointer-events: inherit - - .measurementTableFooter - padding: 10px - color: #fff - text-align: center - z-index: 1 - - .saveBtn - border: 1px solid var(--ui-border-color-active) - border-radius: 25px - background-color: var(--active-color) - color: var(--ui-gray-dark) - line-height: 25px - padding: 0 20px - outline: none - cursor: pointer - - &:hover, &:active - background-color: var(--ui-sky-blue) - - svg - margin-right: 4px - position: relative - top: 2px - -.tooltip-warning - &.in - opacity 1 - - .tooltip-inner - padding: 0 - - .warningTitle - text-align: left - background-color: var(--ui-gray-darkest) - padding: 7px 15px - border-top-left-radius: 7px - border-top-right-radius: 7px - - .warningContent - text-align center - background-color: var(--ui-gray) - border-bottom-left-radius: 7px - border-bottom-right-radius: 7px - - ol - margin-top: auto - padding-inline-start: 20px - padding-top: 10px - padding-bottom: 10px - padding-left: 25px - text-align: left - - li - padding-right: 10px diff --git a/platform/ui/src/components/measurementTable/MeasurementTableItem.js b/platform/ui/src/components/measurementTable/MeasurementTableItem.js deleted file mode 100644 index bb0c3ada8..000000000 --- a/platform/ui/src/components/measurementTable/MeasurementTableItem.js +++ /dev/null @@ -1,165 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import { withTranslation } from '../../contextProviders'; - -import { Icon } from './../../elements/Icon'; -import { OverlayTrigger } from './../overlayTrigger'; -import { Tooltip } from './../tooltip'; -import { TableListItem } from './../tableList/TableListItem.js'; - -import './MeasurementTableItem.styl'; - -class MeasurementTableItem extends Component { - static propTypes = { - measurementData: PropTypes.object.isRequired, - onItemClick: PropTypes.func.isRequired, - onRelabel: PropTypes.func, - onDelete: PropTypes.func, - onEditDescription: PropTypes.func, - itemClass: PropTypes.string, - itemIndex: PropTypes.number, - t: PropTypes.func, - }; - - render() { - const { warningTitle = '', hasWarnings } = this.props.measurementData; - - return ( - - {hasWarnings ? ( - -
    {this.props.t(warningTitle)}
    -
    {this.getWarningContent()}
    - - } - > -
    {this.getTableListItem()}
    -
    - ) : ( - {this.getTableListItem()} - )} -
    - ); - } - - getActionButton = (btnLabel, onClickCallback) => { - return ( - - ); - }; - - getTableListItem = () => { - const hasWarningClass = this.props.measurementData.hasWarnings - ? 'hasWarnings' - : ''; - - const actionButtons = []; - - if (typeof this.props.onRelabel === 'function') { - const relabelButton = this.getActionButton( - 'Relabel', - this.onRelabelClick - ); - actionButtons.push(relabelButton); - } - if (typeof this.props.onEditDescription === 'function') { - const descriptionButton = this.getActionButton( - 'Description', - this.onEditDescriptionClick - ); - actionButtons.push(descriptionButton); - } - if (typeof this.props.onDelete === 'function') { - const deleteButton = this.getActionButton('Delete', this.onDeleteClick); - actionButtons.push(deleteButton); - } - - return ( - -
    -
    - {this.props.t(this.props.measurementData.label, { - keySeparator: '>', - nsSeparator: '|', - })} -
    -
    {this.getDataDisplayText()}
    -
    {actionButtons}
    -
    -
    - ); - }; - - onItemClick = event => { - this.props.onItemClick(event, this.props.measurementData); - }; - - onRelabelClick = event => { - // Prevent onItemClick from firing - event.stopPropagation(); - - this.props.onRelabel(event, this.props.measurementData); - }; - - onEditDescriptionClick = event => { - // Prevent onItemClick from firing - event.stopPropagation(); - - this.props.onEditDescription(event, this.props.measurementData); - }; - - onDeleteClick = event => { - // Prevent onItemClick from firing - event.stopPropagation(); - - this.props.onDelete(event, this.props.measurementData); - }; - - getDataDisplayText = () => { - return this.props.measurementData.data.map((data, index) => { - return ( -
    - {data.displayText ? data.displayText : '...'} -
    - ); - }); - }; - - getWarningContent = () => { - const { warningList = '' } = this.props.measurementData; - - if (Array.isArray(warningList)) { - const listedWarnings = warningList.map((warn, index) => { - return
  • {warn}
  • ; - }); - - return
      {listedWarnings}
    ; - } else { - return {warningList}; - } - }; -} - -const connectedComponent = withTranslation('MeasurementTable')( - MeasurementTableItem -); -export { connectedComponent as MeasurementTableItem }; -export default connectedComponent; diff --git a/platform/ui/src/components/measurementTable/__docs__/measurementTable.mdx b/platform/ui/src/components/measurementTable/__docs__/measurementTable.mdx deleted file mode 100644 index d85d87490..000000000 --- a/platform/ui/src/components/measurementTable/__docs__/measurementTable.mdx +++ /dev/null @@ -1,49 +0,0 @@ ---- -name: Measurement Table -menu: Components -route: /components/measurement-table ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { MeasurementTable } from './../index.js' -import NameSpace from '../../../__docs__/NameSpace' -// -import measurements from './measurements.js' -import timepoints from './timepoints.js' -import warnings from './warnings.js' - -# Measurement Table - -## Basic usage - - - - {({ state, setState }) => ( -
    - alert('onItemClick')} - onRelabelClick={() => alert('onRelabelClick')} - onDeleteClick={() => alert('onDeleteClick')} - onEditDescriptionClick={() => alert('onEditDescriptionClick')} - /> -
    - )} -
    -
    - -## API - - - -## Translation Namespace - - diff --git a/platform/ui/src/components/measurementTable/__docs__/measurements.js b/platform/ui/src/components/measurementTable/__docs__/measurements.js deleted file mode 100644 index 2a0507902..000000000 --- a/platform/ui/src/components/measurementTable/__docs__/measurements.js +++ /dev/null @@ -1,93 +0,0 @@ -export default [ - { - maxMeasurements: 5, - groupName: 'Targets', - measurements: [ - { - measurementId: '123', - measurementNumber: '123', - itemNumber: 1, - label: 'Chest Wall Posterior', - hasWarnings: true, - warningTitle: 'Criteria nonconformities', - isSplitLesion: false, - warningList: [ - 'All measurements should have a location', - 'Nodal lesions must be >= 15mm short axis AND >= double the acquisition slice thickness by CT and MR', - ], - data: [ - { - displayText: '25.7 x 12.9', - }, - { - displayText: '24.7 x 11.5', - }, - {}, - ], - }, - { - measurementId: '124', - measurementNumber: '124', - itemNumber: 2, - label: 'Bone Extremity', - data: [ - { - displayText: '24.7 x 11.1', - }, - { - displayText: '21.2 x 10.9', - }, - {}, - ], - }, - ], - }, - { - maxMeasurements: 3, - groupName: 'NonTargets', - measurements: [ - { - measurementId: '125', - measurementNumber: '125', - itemNumber: 1, - label: 'Chest Wall Single Site', - data: [ - { - displayText: 'MD', - }, - { - displayText: 'NM', - }, - {}, - ], - }, - { - measurementId: '126', - measurementNumber: '126', - itemNumber: 2, - label: 'Extremity Multiple Sites', - data: [ - { - displayText: 'CR', - }, - {}, - {}, - ], - }, - { - measurementId: '127', - measurementNumber: '127', - label: 'Extremity Site', - data: [ - { - displayText: 'CR', - }, - {}, - { - displayText: 'NM', - }, - ], - }, - ], - }, -]; diff --git a/platform/ui/src/components/measurementTable/__docs__/timepoints.js b/platform/ui/src/components/measurementTable/__docs__/timepoints.js deleted file mode 100644 index e42b44156..000000000 --- a/platform/ui/src/components/measurementTable/__docs__/timepoints.js +++ /dev/null @@ -1,14 +0,0 @@ -export default [ - { - label: 'Follow-up 2', - date: '20-Dec-18', - }, - { - label: 'Follow-up 1', - date: '15-Jun-18', - }, - { - label: 'Baseline', - date: '10-Apr-18', - }, -]; diff --git a/platform/ui/src/components/measurementTable/__docs__/warnings.js b/platform/ui/src/components/measurementTable/__docs__/warnings.js deleted file mode 100644 index a2da7f90d..000000000 --- a/platform/ui/src/components/measurementTable/__docs__/warnings.js +++ /dev/null @@ -1,6 +0,0 @@ -export default { - warningList: [ - 'All measurements should have a location', - 'Nodal lesions must be >= 15mm short axis AND >= double the acquisition slice thickness by CT and MR', - ], -}; diff --git a/platform/ui/src/components/measurementTable/index.js b/platform/ui/src/components/measurementTable/index.js deleted file mode 100644 index e70bd51eb..000000000 --- a/platform/ui/src/components/measurementTable/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { MeasurementTable } from './MeasurementTable.js'; -export { MeasurementTableItem } from './MeasurementTableItem.js'; diff --git a/platform/ui/src/components/ohifModal/OHIFModal.js b/platform/ui/src/components/ohifModal/OHIFModal.js deleted file mode 100644 index 3f9302ced..000000000 --- a/platform/ui/src/components/ohifModal/OHIFModal.js +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import Modal from 'react-modal'; -import classNames from 'classnames'; - -import './OHIFModal.styl'; - -const customStyle = { - overlay: { - zIndex: 1071, - backgroundColor: 'rgb(0, 0, 0, 0.5)', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - }, -}; - -Modal.setAppElement(document.getElementById('root')); - -const OHIFModal = ({ - className, - closeButton, - shouldCloseOnEsc, - isOpen, - title, - onClose, - children, -}) => { - const renderHeader = () => { - return ( - title && ( -
    -

    {title}

    - {closeButton && ( - - )} -
    - ) - ); - }; - - return ( - - <> - {renderHeader()} -
    - {children} -
    - -
    - ); -}; - -OHIFModal.propTypes = { - className: PropTypes.string, - closeButton: PropTypes.bool, - shouldCloseOnEsc: PropTypes.bool, - isOpen: PropTypes.bool, - title: PropTypes.string, - onClose: PropTypes.func, - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node, - ]).isRequired, -}; - -export default OHIFModal; diff --git a/platform/ui/src/components/ohifModal/OHIFModal.styl b/platform/ui/src/components/ohifModal/OHIFModal.styl deleted file mode 100644 index 0118e7809..000000000 --- a/platform/ui/src/components/ohifModal/OHIFModal.styl +++ /dev/null @@ -1,67 +0,0 @@ -.OHIFModal - background-color: var(--ui-gray-darker) - border-color: var(--ui-border-color) - color: var(--text-secondary-color) - border-radius: 6px - border: 0 - color: var(--text-primary-color) - position: relative - -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5) - box-shadow: 0 3px 9px rgba(0,0,0,.5); - background-clip: padding-box - outline: 0 - - @media (min-width: 320px) - width: 78% - min-width: 300px - - @media (min-width: 768px) - width: 600px - - @media (min-width: 992px) - width: 900px - - &__content - padding: 20px - max-height: 90vh; - overflow-x: hidden; - overflow-y: auto; - scrollbar-width: none; - -ms-overflow-style: none; - &::-webkit-scrollbar - display: none; - - &__header - display: flex - justify-content: space-between - align-items: center - border-bottom-width: 3px - border-bottom-style: solid - border-bottom-color: #000000 - padding: 20px - position: relative - - h4 - color: var(--text-secondary-color) - font-size: 20px - font-weight: 500 - line-height: 24px - padding-right: 24px - margin: 0 - - button - cursor: pointer - margin: -10px 0 0 0 - padding: 0 - background-color: transparent - border: none - color: var(--text-secondary-color) - font-size: 25px - font-weight: lighter - - &:active, - &:focus, - &:focus:active - background-image: none - outline: 0 - box-shadow: none diff --git a/platform/ui/src/components/ohifModal/__docs__/ohifModal.mdx b/platform/ui/src/components/ohifModal/__docs__/ohifModal.mdx deleted file mode 100644 index 67bb3f054..000000000 --- a/platform/ui/src/components/ohifModal/__docs__/ohifModal.mdx +++ /dev/null @@ -1,39 +0,0 @@ ---- -name: OHIFModal -menu: Components -route: /components/ohif-modal ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { OHIFModal } from './../index' -import NameSpace from '../../../__docs__/NameSpace' - -# OHIF Modal - -## Basic usage - - - - {({ state, setState }) => ( - -
    -
    {JSON.stringify(state, null, 2)}
    -
    -
    - -
    -
    - )} -
    -
    - -## API - - - -## Translation Namespace - - diff --git a/platform/ui/src/components/ohifModal/index.js b/platform/ui/src/components/ohifModal/index.js deleted file mode 100644 index 6e9820766..000000000 --- a/platform/ui/src/components/ohifModal/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import OHIFModal from './OHIFModal'; -export { OHIFModal }; diff --git a/platform/ui/src/components/overlayTrigger/Fade.js b/platform/ui/src/components/overlayTrigger/Fade.js deleted file mode 100644 index 34a5cad79..000000000 --- a/platform/ui/src/components/overlayTrigger/Fade.js +++ /dev/null @@ -1,102 +0,0 @@ -import classNames from 'classnames'; -import React from 'react'; -import PropTypes from 'prop-types'; -import Transition, { - ENTERED, - ENTERING, -} from 'react-transition-group/Transition'; - -const propTypes = { - /** - * Show the component; triggers the fade in or fade out animation - */ - in: PropTypes.bool, - - /** - * Wait until the first "enter" transition to mount the component (add it to the DOM) - */ - mountOnEnter: PropTypes.bool, - - /** - * Unmount the component (remove it from the DOM) when it is faded out - */ - unmountOnExit: PropTypes.bool, - - /** - * Run the fade in animation when the component mounts, if it is initially - * shown - */ - appear: PropTypes.bool, - - /** - * Duration of the fade animation in milliseconds, to ensure that finishing - * callbacks are fired even if the original browser transition end events are - * canceled - */ - timeout: PropTypes.number, - - /** - * Callback fired before the component fades in - */ - onEnter: PropTypes.func, - /** - * Callback fired after the component starts to fade in - */ - onEntering: PropTypes.func, - /** - * Callback fired after the has component faded in - */ - onEntered: PropTypes.func, - /** - * Callback fired before the component fades out - */ - onExit: PropTypes.func, - /** - * Callback fired after the component starts to fade out - */ - onExiting: PropTypes.func, - /** - * Callback fired after the component has faded out - */ - onExited: PropTypes.func, -}; - -const defaultProps = { - in: false, - timeout: 300, - mountOnEnter: false, - unmountOnExit: false, - appear: false, -}; - -const fadeStyles = { - [ENTERING]: 'in', - [ENTERED]: 'in', -}; - -class Fade extends React.Component { - render() { - const { className, children, ...props } = this.props; - - return ( - - {(status, innerProps) => - React.cloneElement(children, { - ...innerProps, - className: classNames( - 'fade', - className, - children.props.className, - fadeStyles[status] - ), - }) - } - - ); - } -} - -Fade.propTypes = propTypes; -Fade.defaultProps = defaultProps; - -export default Fade; diff --git a/platform/ui/src/components/overlayTrigger/Overlay.js b/platform/ui/src/components/overlayTrigger/Overlay.js deleted file mode 100644 index 4e59ab9be..000000000 --- a/platform/ui/src/components/overlayTrigger/Overlay.js +++ /dev/null @@ -1,102 +0,0 @@ -import classNames from 'classnames'; -import React, { cloneElement } from 'react'; -import PropTypes from 'prop-types'; -import { Overlay as BaseOverlay } from 'react-overlays'; -import elementType from 'prop-types-extra/lib/elementType'; -import { withTranslation } from '../../contextProviders'; - -import Fade from './Fade'; - -const propTypes = { - /** - * Set the visibility of the Overlay - */ - show: PropTypes.bool, - /** - * Specify whether the overlay should trigger onHide when the user clicks outside the overlay - */ - rootClose: PropTypes.bool, - /** - * A callback invoked by the overlay when it wishes to be hidden. Required if - * `rootClose` is specified. - */ - onHide: PropTypes.func, - - /** - * Use animation - */ - animation: PropTypes.oneOfType([PropTypes.bool, elementType]), - - /** - * Callback fired before the Overlay transitions in - */ - onEnter: PropTypes.func, - - /** - * Callback fired as the Overlay begins to transition in - */ - onEntering: PropTypes.func, - - /** - * Callback fired after the Overlay finishes transitioning in - */ - onEntered: PropTypes.func, - - /** - * Callback fired right before the Overlay transitions out - */ - onExit: PropTypes.func, - - /** - * Callback fired as the Overlay begins to transition out - */ - onExiting: PropTypes.func, - - /** - * Callback fired after the Overlay finishes transitioning out - */ - onExited: PropTypes.func, - - /** - * Sets the direction of the Overlay. - */ - placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']), -}; - -const defaultProps = { - animation: Fade, - rootClose: false, - show: false, - placement: 'right', -}; - -class Overlay extends React.Component { - render() { - const { animation, children, ...props } = this.props; - - const transition = animation === true ? Fade : animation || null; - - let child; - - if (!transition) { - child = cloneElement(children, { - className: classNames(children.props.className, 'in'), - }); - } else { - child = children; - } - - return ( - - {child} - - ); - } -} - -Overlay.propTypes = propTypes; -Overlay.defaultProps = defaultProps; - -const connectedComponent = withTranslation()(Overlay); -export { connectedComponent as Overlay }; -export default connectedComponent; diff --git a/platform/ui/src/components/overlayTrigger/OverlayTrigger.js b/platform/ui/src/components/overlayTrigger/OverlayTrigger.js deleted file mode 100644 index b9216fcb3..000000000 --- a/platform/ui/src/components/overlayTrigger/OverlayTrigger.js +++ /dev/null @@ -1,330 +0,0 @@ -import contains from 'dom-helpers/query/contains'; -import React, { cloneElement } from 'react'; -import PropTypes from 'prop-types'; -import ReactDOM from 'react-dom'; -import warning from 'warning'; - -import { Overlay } from './Overlay'; - -import createChainedFunction from './createChainedFunction'; - -/** - * Check if value one is inside or equal to the of value - * - * @param {string} one - * @param {string|array} of - * @returns {boolean} - */ -function isOneOf(one, of) { - if (Array.isArray(of)) { - return of.indexOf(one) >= 0; - } - return one === of; -} - -const triggerType = PropTypes.oneOf(['click', 'hover', 'focus']); - -const propTypes = { - /** - * Specify which action or actions trigger Overlay visibility - */ - trigger: PropTypes.oneOfType([triggerType, PropTypes.arrayOf(triggerType)]), - - /** - * A millisecond delay amount to show and hide the Overlay once triggered - */ - delay: PropTypes.number, - /** - * A millisecond delay amount before showing the Overlay once triggered. - */ - delayShow: PropTypes.number, - /** - * A millisecond delay amount before hiding the Overlay once triggered. - */ - delayHide: PropTypes.number, - - // FIXME: This should be `defaultShow`. - /** - * The initial visibility state of the Overlay. For more nuanced visibility - * control, consider using the Overlay component directly. - */ - defaultOverlayShown: PropTypes.bool, - - /** - * An element or text to overlay next to the target. - */ - overlay: PropTypes.node.isRequired, - - /** - * A function to be called once the hide is triggered - */ - handleHide: PropTypes.func, - - /** - * @private - */ - onBlur: PropTypes.func, - /** - * @private - */ - onClick: PropTypes.func, - /** - * @private - */ - onFocus: PropTypes.func, - /** - * @private - */ - onMouseOut: PropTypes.func, - /** - * @private - */ - onMouseOver: PropTypes.func, - - // Overridden props from ``. - /** - * @private - */ - target: PropTypes.oneOf([null]), - /** - * @private - */ - onHide: PropTypes.oneOf([null]), - /** - * @private - */ - show: PropTypes.oneOf([null]), -}; - -const defaultProps = { - defaultOverlayShown: false, - trigger: ['hover', 'focus'], -}; - -class OverlayTrigger extends React.Component { - constructor(props, context) { - super(props, context); - - this.handleToggle = this.handleToggle.bind(this); - this.handleDelayedShow = this.handleDelayedShow.bind(this); - this.handleDelayedHide = this.handleDelayedHide.bind(this); - this.handleHide = createChainedFunction( - this.handleHide.bind(this), - props.handleHide - ); - - this.handleMouseOver = e => - this.handleMouseOverOut(this.handleDelayedShow, e, 'fromElement'); - this.handleMouseOut = e => - this.handleMouseOverOut(this.handleDelayedHide, e, 'toElement'); - - this._mountNode = null; - - this.state = { - show: props.defaultOverlayShown, - }; - } - - componentDidMount() { - this._mountNode = document.createElement('div'); - this.renderOverlay(); - } - - componentDidUpdate() { - this.renderOverlay(); - } - - componentWillUnmount() { - ReactDOM.unmountComponentAtNode(this._mountNode); - this._mountNode = null; - - clearTimeout(this._hoverShowDelay); - clearTimeout(this._hoverHideDelay); - } - - handleDelayedHide() { - if (this._hoverShowDelay != null) { - clearTimeout(this._hoverShowDelay); - this._hoverShowDelay = null; - return; - } - - if (!this.state.show || this._hoverHideDelay != null) { - return; - } - - const delay = - this.props.delayHide != null ? this.props.delayHide : this.props.delay; - - if (!delay) { - this.hide(); - return; - } - - this._hoverHideDelay = setTimeout(() => { - this._hoverHideDelay = null; - this.hide(); - }, delay); - } - - handleDelayedShow() { - if (this._hoverHideDelay != null) { - clearTimeout(this._hoverHideDelay); - this._hoverHideDelay = null; - return; - } - - if (this.state.show || this._hoverShowDelay != null) { - return; - } - - const delay = - this.props.delayShow != null ? this.props.delayShow : this.props.delay; - - if (!delay) { - this.show(); - return; - } - - this._hoverShowDelay = setTimeout(() => { - this._hoverShowDelay = null; - this.show(); - }, delay); - } - - handleHide() { - this.hide(); - } - - // Simple implementation of mouseEnter and mouseLeave. - // React's built version is broken: https://github.com/facebook/react/issues/4251 - // for cases when the trigger is disabled and mouseOut/Over can cause flicker - // moving from one child element to another. - handleMouseOverOut(handler, e, relatedNative) { - const target = e.currentTarget; - const related = e.relatedTarget || e.nativeEvent[relatedNative]; - - if ((!related || related !== target) && !contains(target, related)) { - handler(e); - } - } - - handleToggle() { - if (this.state.show) { - this.hide(); - } else { - this.show(); - } - } - - hide() { - this.setState({ show: false }); - } - - makeOverlay(overlay, props) { - return ( - - {overlay} - - ); - } - - show() { - this.setState({ show: true }); - } - - renderOverlay() { - ReactDOM.unstable_renderSubtreeIntoContainer( - this, - this._overlay, - this._mountNode - ); - } - - render() { - const { - trigger, - overlay, - children, - onBlur, - onClick, - onFocus, - onMouseOut, - onMouseOver, - ...props - } = this.props; - - delete props.delay; - delete props.delayShow; - delete props.delayHide; - delete props.defaultOverlayShown; - - const child = React.Children.only(children); - const childProps = child.props; - const triggerProps = {}; - - if (this.state.show) { - triggerProps['aria-describedby'] = overlay.props.id; - } - - // FIXME: The logic here for passing through handlers on this component is - // inconsistent. We shouldn't be passing any of these props through. - - triggerProps.onClick = createChainedFunction(childProps.onClick, onClick); - - if (isOneOf('click', trigger)) { - triggerProps.onClick = createChainedFunction( - triggerProps.onClick, - this.handleToggle - ); - } - - if (isOneOf('hover', trigger)) { - warning( - !(trigger === 'hover'), - '[react-bootstrap] Specifying only the `"hover"` trigger limits the ' + - 'visibility of the overlay to just mouse users. Consider also ' + - 'including the `"focus"` trigger so that touch and keyboard only ' + - 'users can see the overlay as well.' - ); - - triggerProps.onMouseOver = createChainedFunction( - childProps.onMouseOver, - onMouseOver, - this.handleMouseOver - ); - triggerProps.onMouseOut = createChainedFunction( - childProps.onMouseOut, - onMouseOut, - this.handleMouseOut - ); - } - - if (isOneOf('focus', trigger)) { - triggerProps.onFocus = createChainedFunction( - childProps.onFocus, - onFocus, - this.handleDelayedShow - ); - triggerProps.onBlur = createChainedFunction( - childProps.onBlur, - onBlur, - this.handleDelayedHide - ); - } - - this._overlay = this.makeOverlay(overlay, props); - - return cloneElement(child, triggerProps); - } -} - -OverlayTrigger.propTypes = propTypes; -OverlayTrigger.defaultProps = defaultProps; - -export { OverlayTrigger }; diff --git a/platform/ui/src/components/overlayTrigger/__docs__/OverlayTrigger.mdx b/platform/ui/src/components/overlayTrigger/__docs__/OverlayTrigger.mdx deleted file mode 100644 index 4fc48ee56..000000000 --- a/platform/ui/src/components/overlayTrigger/__docs__/OverlayTrigger.mdx +++ /dev/null @@ -1,84 +0,0 @@ ---- -name: Overlay Trigger -menu: Components -route: /components/overlay-trigger ---- - -import { Playground, Props } from 'docz' -import { Tooltip } from './../../tooltip' -import { OverlayTrigger } from './../index.js' - -# Overlay Trigger - -## Basic usage - -### On Hover - - - -
    - { - ['right', 'left', 'bottom', 'top'].map((placement) => { - return ( - - - Here I am! - - } - > - - - - ) - }) - } -
    - -
    - -### On Click - - -
    - {['right', 'left', 'bottom', 'top'].map(placement => { - return ( - - Here I am! - - } - > - - - ) - })} -
    -
    - -## API - - diff --git a/platform/ui/src/components/overlayTrigger/createChainedFunction.js b/platform/ui/src/components/overlayTrigger/createChainedFunction.js deleted file mode 100644 index c5e231bc6..000000000 --- a/platform/ui/src/components/overlayTrigger/createChainedFunction.js +++ /dev/null @@ -1,31 +0,0 @@ -/** - * Safe chained function - * - * Will only create a new function if needed, - * otherwise will pass back existing functions or null. - * - * @param {function} functions to chain - * @returns {function|null} - */ -function createChainedFunction(...funcs) { - return funcs - .filter(f => f != null) - .reduce((acc, f) => { - if (typeof f !== 'function') { - throw new Error( - 'Invalid Argument Type, must only provide functions, undefined, or null.' - ); - } - - if (acc === null) { - return f; - } - - return function chainedFunction(...args) { - acc.apply(this, args); - f.apply(this, args); - }; - }, null); -} - -export default createChainedFunction; diff --git a/platform/ui/src/components/overlayTrigger/index.js b/platform/ui/src/components/overlayTrigger/index.js deleted file mode 100644 index 68a4d0874..000000000 --- a/platform/ui/src/components/overlayTrigger/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { Overlay } from './Overlay.js'; -export { OverlayTrigger } from './OverlayTrigger.js'; diff --git a/platform/ui/src/components/quickSwitch/QuickSwitch.styl b/platform/ui/src/components/quickSwitch/QuickSwitch.styl deleted file mode 100644 index bb98b9674..000000000 --- a/platform/ui/src/components/quickSwitch/QuickSwitch.styl +++ /dev/null @@ -1,209 +0,0 @@ -.series-quick-switch - position: relative; - - &:before - box-shadow: 0 0 0 5000px rgba(0, 0, 0, 0.8) - transition: opacity 0.3s ease - opacity: 0 - content: '' - - &:hover - z-index: 50 - - &:before - display: table; - opacity: 1 - content: '' - - &:not(.left):not(.right) - left: 50% - transform: translateX(-50%) - - &.left - border-right: 1px solid var(--ui-border-color) - right: 0 - - &.right - left: 0 - - .series-switch - float: right - - .study-switch - float: left - - .study-browser - left: auto - right: 0 - transform-origin: calc(100% - 1em) calc(1em + 17px) - - .series-browser - left: 0 - right: auto - transform-origin: 1em calc(1em + 15px) - - .thumbnails-wrapper - transform-origin: 0% 0% - - .thumbnail - float: left - - .series-item - float: left - - .title-label - color: var(--text-secondary-color) - font-size: 12px - font-weight: 500 - line-height: 12px - opacity: 1 - padding-bottom: 3px - text-align: center - transition: opacity 0.3s ease - - .series-switch - padding-right: 10px; - - .series-switch, - .study-switch - float: left - position: relative - - .study-switch:hover:after - content: '' - display: block - height: 100px - left: 0 - position: absolute - top: 0 - width: 300px - - .study-browser - left: 0 - padding-top: 60px; - max-height: calc(100vh - 60px); - transform-origin: 1em calc(1em + 17px) - width: 300px - - .study-browser-list - padding: 0 10px - - .series-browser - max-height: 100vh - max-width: 720px - right: 0 - transform-origin: calc(100% - 1em) calc(1em + 15px) - - .thumbnails-wrapper - transition: transform 0.3s ease - transform-origin: 100% 0% - - .thumbnail - float: right - - .series-details - opacity: 0 - transform: translateY(-100%) - transition: transform 0.3s ease, opacity 0.3s ease - - .scrollable - padding-top: 15px - transition: padding-bottom 0.3s ease - - .study-browser-series { - overflow hidden - } - - .series-browser, - .study-browser - min-height: 120px - opacity: 0 - position: absolute - top: 0 - transform: scale(0) - transition: transform 0.3s ease , opacity 0.3s ease - z-index: 3 - - .series-box, - .study-box - height: 57px - width: 57px - - .study-box - background-color: var(--ui-gray-dark) - border: solid 2px var(--ui-border-color-dark) - border-radius: 11px - - .series-item - background-color: var(--box-background-color) - border-radius: 3px - float: right - height: 15px - margin: 2px - transition: opacity 0.3s ease - width: 15px - - &.count - color: var(--text-primary-color) - background-color: transparent - font-size: 12px - font-weight: 500 - line-height: 17px - text-align: center - - &.active - background-color: var(--active-color) - - &.series-triggered .series-browser, - .series-switch:hover .series-browser, - .study-switch:hover .study-browser - opacity: 1 - transform: scale(1) - - &.series-triggered .series-item, - .series-switch:hover .title-label - opacity: 0 - - &.series-triggered - .thumbnails-wrapper - transform: scale(0.9) translateY(80px) - - .series-browser:not(:hover) - &>.scrollable - padding-bottom: 80px - - &>.scrollNav - opacity: 0 - - .series-switch:hover .series-browser - .thumbnails-wrapper - transform: scale(1) translateY(0) - - .thumbnail .series-details - opacity: 1 - transform: translateY(0) - transition-delay: 0.3s - - .study-browser-item.active .study-item-box - box-shadow: inset 0 0 0 3px var(--active-color) - -@media screen and (max-width: 1599px) - .series-quick-switch - - .series-box, - .study-box - width: 36px - height: 36px - - .study-box - border-radius: 7px - - .series-item - height: 10px - margin: 1px - width: 10px - - &.count - font-size: 10px - font-weight: 300 - line-height: 10px diff --git a/platform/ui/src/components/quickSwitch/SeriesList.styl b/platform/ui/src/components/quickSwitch/SeriesList.styl deleted file mode 100644 index e69de29bb..000000000 diff --git a/platform/ui/src/components/quickSwitch/StudiesList.styl b/platform/ui/src/components/quickSwitch/StudiesList.styl deleted file mode 100644 index e69de29bb..000000000 diff --git a/platform/ui/src/components/quickSwitch/index.js b/platform/ui/src/components/quickSwitch/index.js deleted file mode 100644 index c92ec79d5..000000000 --- a/platform/ui/src/components/quickSwitch/index.js +++ /dev/null @@ -1 +0,0 @@ -export { QuickSwitch } from './QuickSwitch.js'; diff --git a/platform/ui/src/components/radioButtonList/RadioButtonList.css b/platform/ui/src/components/radioButtonList/RadioButtonList.css deleted file mode 100644 index d7c6305dc..000000000 --- a/platform/ui/src/components/radioButtonList/RadioButtonList.css +++ /dev/null @@ -1,62 +0,0 @@ -.ohif-radio-button-container { - --radio-button-dim: 20px; -} - -.ohif-radio-button-container input { - position: absolute; - opacity: 0; - z-index: 10000; - cursor: pointer; - height: inherit; - width: inherit; -} - -.ohif-radio-button-container { - display: block; - position: relative; - padding-left: 35px; - margin-bottom: 12px; - cursor: pointer; - font-size: 22px; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.ohif-radio-button { - width: var(--radio-button-dim); - height: var(--radio-button-dim); - position: absolute; - top: 25%; - left: 0; - background-color: var(--ui-gray-lighter); - border-radius: 50%; - z-index: 1; -} - -.ohif-radio-button:hover { - background-color: var(--default-color); - border-radius: 100%; -} - -.ohif-radio-button:after { - content: ''; - position: absolute; - display: none; - width: 70%; - height: 70%; -} - -.ohif-radio-button-container .ohif-radio-button.ohif-selected:after { - display: block; - top: 14%; - left: 14%; - border-radius: 50%; - background: white; -} - -.ohif-radio-button-label { - font-size: 12px; - font-weight: 500; -} diff --git a/platform/ui/src/components/radioButtonList/RadioButtonList.js b/platform/ui/src/components/radioButtonList/RadioButtonList.js deleted file mode 100644 index 0bbcf8b59..000000000 --- a/platform/ui/src/components/radioButtonList/RadioButtonList.js +++ /dev/null @@ -1,74 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import './RadioButtonList.css'; - -export class RadioButtonList extends Component { - static className = 'RadioButtonList'; - - //TODO: Add fields to propTypes.description? - //These would be label (required), id (required), and checked (optional). - static propTypes = { - description: PropTypes.arrayOf( - PropTypes.shape({ - label: PropTypes.string.isRequired, - id: PropTypes.string.isRequired, - checked: PropTypes.bool, - }) - ), - }; - - constructor(props) { - super(props); - this.state = {}; - - for (let button of props.description) { - if (button.checked) { - this.state.checked = button.id; - } - } - } - - handleChange(e) { - this.setState({ checked: e.target.value }); - } - - render() { - let buttons = this.props.description.map(button => { - let input = ( - { - this.handleChange(e); - }} - value={button.id} - /> - ); - - //needed to style the custom radio check - let inputSpan; - if (this.state.checked === button.id) { - inputSpan = ( - {input} - ); - } else { - inputSpan = {input}; - } - - return ( - - - - ); - }); - - return ( -
    -
    {buttons}
    -
    - ); - } -} diff --git a/platform/ui/src/components/radioButtonList/__docs__/radioButtonList.mdx b/platform/ui/src/components/radioButtonList/__docs__/radioButtonList.mdx deleted file mode 100644 index 2ad2b205d..000000000 --- a/platform/ui/src/components/radioButtonList/__docs__/radioButtonList.mdx +++ /dev/null @@ -1,74 +0,0 @@ ---- -name: Radio Button List -menu: Elements -route: /components/radio-button-list ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { RadioButtonList } from './../index' -import NameSpace from '../../../__docs__/NameSpace' - -#Radio Button List - -## Basic usage - - - - {({ state, setState }) => ( - -
    -
    {JSON.stringify(state, null, 2)}
    -
    -
    - -
    -
    - )} -
    -
    - -## API - - - -## Translation Namespace - - \ No newline at end of file diff --git a/platform/ui/src/components/radioButtonList/index.js b/platform/ui/src/components/radioButtonList/index.js deleted file mode 100644 index f8361a3b0..000000000 --- a/platform/ui/src/components/radioButtonList/index.js +++ /dev/null @@ -1 +0,0 @@ -export { RadioButtonList } from './RadioButtonList.js'; diff --git a/platform/ui/src/components/roundedButtonGroup/RoundedButtonGroup.js b/platform/ui/src/components/roundedButtonGroup/RoundedButtonGroup.js deleted file mode 100644 index cd861f146..000000000 --- a/platform/ui/src/components/roundedButtonGroup/RoundedButtonGroup.js +++ /dev/null @@ -1,84 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import classnames from 'classnames'; -import { Icon } from './../../elements/Icon'; -import './RoundedButtonGroup.css'; - -// TODO: Rename to Toggle? -class RoundedButtonGroup extends Component { - static className = 'RoundedButtonGroup'; - - static propTypes = { - options: PropTypes.arrayOf( - PropTypes.shape({ - value: PropTypes.any, - label: PropTypes.string, - icon: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.shape({ - name: PropTypes.string.isRequired, - }), - ]), - }) - ), - value: PropTypes.string, - onValueChanged: PropTypes.func, - }; - - static defaultProps = { - options: [], - value: null, - }; - - onClickOption = value => { - let newValue = value; - if (this.props.value === value) { - newValue = null; - } - - if (this.props.onValueChanged) { - this.props.onValueChanged(newValue); - } - }; - - render() { - let className = classnames( - RoundedButtonGroup.className, - 'clearfix center-table' - ); - - const buttons = this.props.options.map((option, index) => { - const className = classnames({ - roundedButtonWrapper: true, - noselect: true, - active: this.props.value === option.value, - }); - - const optionText = option.label && {option.label}; - const iconProps = - typeof option.icon === 'string' ? { name: option.icon } : option.icon; - - const bottomLabel = option.bottomLabel && ( -
    {option.bottomLabel}
    - ); - - return ( -
    this.onClickOption(option.value)} - > -
    - {optionText} - {iconProps && } -
    - {bottomLabel} -
    - ); - }); - - return
    {buttons}
    ; - } -} - -export { RoundedButtonGroup }; diff --git a/platform/ui/src/components/roundedButtonGroup/__docs__/roundedButtonGroup.mdx b/platform/ui/src/components/roundedButtonGroup/__docs__/roundedButtonGroup.mdx deleted file mode 100644 index 5d00b32fc..000000000 --- a/platform/ui/src/components/roundedButtonGroup/__docs__/roundedButtonGroup.mdx +++ /dev/null @@ -1,51 +0,0 @@ ---- -name: Rounded Button Group -menu: Components -route: /components/rounded-button-group ---- - -import { Playground, Props } from 'docz'; -import { State } from 'react-powerplug'; -import { RoundedButtonGroup } from './../index.js'; - -# Rounded Button Group - -A basic styled toggle switch - -## Basic usage - - - - {({ state, setState }) => ( - -
    -
    value: {JSON.stringify(state.value, null, 2)}
    -
    - setState({ value })} - /> -
    - )} -
    -
    - -## API - - diff --git a/platform/ui/src/components/roundedButtonGroup/index.js b/platform/ui/src/components/roundedButtonGroup/index.js deleted file mode 100644 index e33e0490c..000000000 --- a/platform/ui/src/components/roundedButtonGroup/index.js +++ /dev/null @@ -1 +0,0 @@ -export { RoundedButtonGroup } from './RoundedButtonGroup.js'; diff --git a/platform/ui/src/components/selectTree/InputRadio.js b/platform/ui/src/components/selectTree/InputRadio.js deleted file mode 100644 index e4de02a06..000000000 --- a/platform/ui/src/components/selectTree/InputRadio.js +++ /dev/null @@ -1,37 +0,0 @@ -import { Component } from 'react'; -import React from 'react'; -import PropTypes from 'prop-types'; - -export default class InputRadio extends Component { - static propTypes = { - value: PropTypes.string, - label: PropTypes.string.isRequired, - itemData: PropTypes.object.isRequired, - labelClass: PropTypes.string, - id: PropTypes.string.isRequired, - onSelected: PropTypes.func.isRequired, - }; - - render() { - const labelClass = this.props.labelClass ? this.props.labelClass : ''; - return ( - - ); - } - - onSelected = evt => { - this.props.onSelected(evt, this.props.itemData); - }; -} diff --git a/platform/ui/src/components/selectTree/SelectTree.js b/platform/ui/src/components/selectTree/SelectTree.js deleted file mode 100644 index 708a29e99..000000000 --- a/platform/ui/src/components/selectTree/SelectTree.js +++ /dev/null @@ -1,192 +0,0 @@ -import './SelectTree.styl'; - -import React, { Component } from 'react'; - -import { Icon } from './../../elements/Icon'; -import InputRadio from './InputRadio.js'; -import PropTypes from 'prop-types'; -import SelectTreeBreadcrumb from './SelectTreeBreadcrumb.js'; -import cloneDeep from 'lodash.clonedeep'; - -export class SelectTree extends Component { - static propTypes = { - autoFocus: PropTypes.bool, - searchEnabled: PropTypes.bool, - selectTreeFirstTitle: PropTypes.string, - selectTreeSecondTitle: PropTypes.string, - /** Called when 'componentDidUpdate' is triggered */ - onComponentChange: PropTypes.func, - /** [{ label, value, items[]}] - An array of items than can be expanded to show child items */ - items: PropTypes.array.isRequired, - /** fn(evt, item) - Called when a child item is selected; receives event and selected item */ - onSelected: PropTypes.func.isRequired, - }; - - static defaultProps = { - searchEnabled: true, - autoFocus: true, - selectTreeFirstTitle: 'First Level itens', - items: [], - }; - - constructor(props) { - super(props); - - this.state = { - searchTerm: null, - currentNode: null, - value: null, - }; - } - - render() { - const treeItems = this.getTreeItems(); - - return ( -
    -
    - {this.headerItem()} -
    - {this.state.currentNode && ( - - )} -
    -
    {treeItems}
    -
    -
    -
    -
    - ); - } - - componentDidUpdate = () => { - if (this.props.onComponentChange) { - this.props.onComponentChange(); - } - }; - - isLeafSelected = item => item && !Array.isArray(item.items); - - getLabelClass = item => { - let labelClass = 'treeLeaf'; - if (this.state.searchTerm || Array.isArray(item.items)) { - labelClass = 'treeNode'; - } - return labelClass; - }; - - filterItems() { - const filteredItems = []; - const rawItems = cloneDeep(this.props.items); - rawItems.forEach(item => { - if (Array.isArray(item.items)) { - item.items.forEach(item => { - const label = item.label.toLowerCase(); - const searchTerm = this.state.searchTerm.toLowerCase(); - if (label.indexOf(searchTerm) !== -1) { - filteredItems.push(item); - } - }); - } else { - const label = item.label.toLowerCase(); - const searchTerm = this.state.searchTerm.toLowerCase(); - if (label.indexOf(searchTerm) !== -1) { - filteredItems.push(item); - } - } - }); - return filteredItems; - } - - getTreeItems() { - const storageKey = 'SelectTree'; - let treeItems; - - if (this.state.searchTerm) { - treeItems = this.filterItems(); - } else if (this.state.currentNode) { - treeItems = cloneDeep(this.state.currentNode.items); - } else { - treeItems = cloneDeep(this.props.items); - } - - return treeItems.map((item, index) => { - let itemKey = index; - if (this.state.currentNode) { - itemKey += `_${this.state.currentNode.value}`; - } - return ( - - ); - }); - } - - headerItem = () => { - let title = this.props.selectTreeFirstTitle; - if (this.state.currentNode && this.props.selectTreeSecondTitle) { - title = this.props.selectTreeSecondTitle; - } - - return ( -
    -
    {title}
    - {this.props.searchEnabled && ( -
    -
    - -
    - -
    - )} -
    - ); - }; - - searchLocations = evt => { - this.setState({ - currentNode: null, - searchTerm: evt.currentTarget.value, - }); - }; - - onSelected = (event, item) => { - if (this.isLeafSelected(item)) { - this.setState({ - searchTerm: null, - currentNode: null, - value: null, - }); - } else { - this.setState({ - currentNode: item, - }); - } - return this.props.onSelected(event, item); - }; - - onBreadcrumbSelected = () => { - this.setState({ - currentNode: null, - }); - }; -} diff --git a/platform/ui/src/components/selectTree/SelectTree.styl b/platform/ui/src/components/selectTree/SelectTree.styl deleted file mode 100644 index adb1ddba5..000000000 --- a/platform/ui/src/components/selectTree/SelectTree.styl +++ /dev/null @@ -1,108 +0,0 @@ -@import './../../design/styles/common/global.styl' - -.selectTreeRoot - text-align: initial; - width: 320px; - max-height: inherit; - font-size: 14px; - line-height: 26px; - - .treeContent - max-height: inherit; - overflow: hidden; - border: 1px solid #c4c4c4; - border-radius: 5px; - background-color: #ffffff; - display: flex; - flex-direction: column; - - .treeHeader - background-color: #c0c0c0; - border-bottom: 1px solid #c4c4c4; - color: #303030; - padding: 5px; - text-align: center; - - .wrapperText - font-weight: bold; - padding-bottom: 2px; - - .wrapperSearch - width: 100%; - - .searchIcon - position: absolute; - width: 18px; - height: 15px; - margin: 7px 10px 13px 10px; - color: #a3a3a3; - - .searchInput - width: 100%; - padding: 6px 12px 6px 35px; - background-color: #fff; - background-image: none; - border: 1px solid #9b9b9b; - border-radius: 4px; - font-size: 14px; - line-height: 1.42857143; - color: #555; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); - transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; - - &:focus - outline: 0; - box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), - 0 0 8px rgba(102, 175, 233, 0.6); - - .wrapperText - white-space: nowrap; - cursor: pointer; - - .selectTreeBreadcrumb - .wrapperLabel - cursor: pointer; - padding: 0 12px; - height: 41px; - width: 100%; - line-height: 41px; - - .backIcon - padding-right: 10px; - - svg - width: 14px; - height: 14px; - position: relative; - top: 2px; - color: #457fb0; - - .treeOptions - overflow: auto; - height: 100%; - - .selectTreeBreadcrumb + .treeInputsWrapper .treeInputs .treeLeaf - border: none; - height: initial; - line-height: 26px; - - & > .treeInputsWrapper > .treeInputs .treeLeaf - border-bottom: 1px solid #ccc; - height: 41px; - line-height: 41px; - - .treeNode, .treeLeaf - cursor: pointer; - display: block; - overflow: hidden; - font-weight: normal; - box-shadow: 0 0 0 200px transparent; - padding: 0 12px; - - .treeNode - border-bottom: 1px solid #ccc; - height: 41px; - line-height: 41px; - - .radioLabel .radioInput - display: none; diff --git a/platform/ui/src/components/selectTree/SelectTreeBreadcrumb.js b/platform/ui/src/components/selectTree/SelectTreeBreadcrumb.js deleted file mode 100644 index 1bcb5ea20..000000000 --- a/platform/ui/src/components/selectTree/SelectTreeBreadcrumb.js +++ /dev/null @@ -1,37 +0,0 @@ -import { Component } from 'react'; -import React from 'react'; -import PropTypes from 'prop-types'; -import { Icon } from './../../elements/Icon'; - -export default class SelectTreeBreadcrumb extends Component { - static propTypes = { - label: PropTypes.string.isRequired, - value: PropTypes.string.isRequired, - onSelected: PropTypes.func.isRequired, - }; - - render() { - return ( -
    - -
    - ); - } -} diff --git a/platform/ui/src/components/selectTree/__docs__/selectTree.mdx b/platform/ui/src/components/selectTree/__docs__/selectTree.mdx deleted file mode 100644 index 68ee9882e..000000000 --- a/platform/ui/src/components/selectTree/__docs__/selectTree.mdx +++ /dev/null @@ -1,42 +0,0 @@ ---- -name: Select Tree -menu: Components -route: /components/select-tree ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { SelectTree } from './../index.js' - -import selectTreeItems from './selectTreeItems.js' - -# SelectTree - -## Basic usage - - - - {({ state, setState }) => ( - -
    -                {JSON.stringify(state.items, null, 2)}
    -            
    - - setState({ itemLabelSelected: item.label }) } - selectTreeFirstTitle="Select Tree Example Header" - autoFocus={false} - /> -
    - )} - -
    - -
    - -## API - - diff --git a/platform/ui/src/components/selectTree/__docs__/selectTreeItems.js b/platform/ui/src/components/selectTree/__docs__/selectTreeItems.js deleted file mode 100644 index 0c7466966..000000000 --- a/platform/ui/src/components/selectTree/__docs__/selectTreeItems.js +++ /dev/null @@ -1,30 +0,0 @@ -export default [ - { - label: 'A', - value: 'A', - items: [ - { - label: 'Abdominal Wall', - value: 'AbdominalWall', - }, - { - label: 'Adrenal Left', - value: 'AdrenalLeft', - }, - ], - }, - { - label: 'B', - value: 'B', - items: [ - { - label: 'Brain', - value: 'Brain', - }, - { - label: 'Breast', - value: 'Breast', - }, - ], - }, -]; diff --git a/platform/ui/src/components/selectTree/index.js b/platform/ui/src/components/selectTree/index.js deleted file mode 100644 index 58dad4997..000000000 --- a/platform/ui/src/components/selectTree/index.js +++ /dev/null @@ -1 +0,0 @@ -export { SelectTree } from './SelectTree'; diff --git a/platform/ui/src/components/simpleDialog/SimpleDialog.js b/platform/ui/src/components/simpleDialog/SimpleDialog.js deleted file mode 100644 index 8a8561769..000000000 --- a/platform/ui/src/components/simpleDialog/SimpleDialog.js +++ /dev/null @@ -1,95 +0,0 @@ -import React, { Component, useState } from 'react'; -import PropTypes from 'prop-types'; -import { TextInput } from '@ohif/ui'; - -import './SimpleDialog.styl'; - -class SimpleDialog extends Component { - static propTypes = { - children: PropTypes.node, - componentRef: PropTypes.any, - componentStyle: PropTypes.object, - rootClass: PropTypes.string, - isOpen: PropTypes.bool, - headerTitle: PropTypes.string.isRequired, - onClose: PropTypes.func.isRequired, - onConfirm: PropTypes.func.isRequired, - }; - - static defaultProps = { - isOpen: true, - componentStyle: {}, - rootClass: '', - }; - - static InputDialog = ({ onSubmit, defaultValue, title, label, onClose }) => { - const [value, setValue] = useState(defaultValue); - - const onSubmitHandler = () => { - onSubmit(value); - }; - - return ( -
    - - setValue(event.target.value)} - label={label} - /> - -
    - ); - }; - - render() { - return ( - - {this.props.isOpen && ( -
    -
    -
    - - x - -

    {this.props.headerTitle}

    -
    -
    {this.props.children}
    -
    - - -
    -
    -
    - )} -
    - ); - } - - onClose = event => { - event.preventDefault(); - event.stopPropagation(); - this.props.onClose(); - }; - - onConfirm = event => { - event.preventDefault(); - event.stopPropagation(); - this.props.onConfirm(); - }; -} - -export { SimpleDialog }; diff --git a/platform/ui/src/components/simpleDialog/SimpleDialog.styl b/platform/ui/src/components/simpleDialog/SimpleDialog.styl deleted file mode 100644 index 5df1de18a..000000000 --- a/platform/ui/src/components/simpleDialog/SimpleDialog.styl +++ /dev/null @@ -1,110 +0,0 @@ -@import './../../design/styles/common/button.styl' -@import './../../design/styles/common/global.styl' - -.InputDialog - .simpleDialog - position: relative - -.simpleDialog - position: relative; - z-index: 1000; - border: 0; - border-radius: 6px; - background-color: var(--ui-gray-darker); - - .header - border-bottom: 3px solid var(--primary-background-color); - padding: 19px 22px 17px; - position: relative; - - .title - font-size: 20px; - font-weight: 600; - line-height: 24px; - padding-right: 40px; - color: var(--text-secondary-color); - margin: 0; - - .closeBtn - -webkit-transform: translateY(-50%); - color: var(--text-secondary-color); - height: 20px; - opacity: 1; - overflow: hidden; - padding: 2px; - position: absolute; - right: 21px; - text-align: center; - text-shadow: none; - top: 50%; - transform: translateY(-50%); - transition: color 0.3s ease; - width: 20px; - - .closeIcon - color: transparent; - display: block; - font-size: 0; - height: 100%; - line-height: 0; - overflow: hidden; - position: relative; - width: 100%; - - &:after, &:before - content: ' '; - display: block; - height: 2px; - transition: background-color 0.3s ease; - width: 19px; - background-color: var(--text-secondary-color); - - &:before - left: 1px; - position: absolute; - top: 1px; - -webkit-transform: rotate(45deg); - transform: rotate(45deg); - -webkit-transform-origin: 1px 50%; - transform-origin: 1px 50%; - - &:after - right: 1px; - position: absolute; - top: 1px; - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); - -webkit-transform-origin: calc(100% - 1px) 50%; - transform-origin: calc(100% - 1px) 50%; - - .content - padding: 16px 22px 25px; - position: relative; - color: var(--text-primary-color); - - .simpleDialogSelect, .simpleDialogInput - background-color: var(--input-background-color); - color: var(--text-primary-color); - border: 0; - border-radius: 2px; - font-size: 14px; - height: 30px; - width: 100%; - line-height: 16px; - padding: 8px 9px 6px; - margin-top: 10px; - display: block; - - .simpleDialogLabelFor - font-size: 14px; - font-weight: 700; - line-height: 16px; - margin: 10px 0 0 0; - color: var(--text-primary-color); - - .footer - padding: 15px; - text-align: right; - - .btn - margin-left: 5px; diff --git a/platform/ui/src/components/simpleDialog/__docs__/simpleDialog.mdx b/platform/ui/src/components/simpleDialog/__docs__/simpleDialog.mdx deleted file mode 100644 index 764074b10..000000000 --- a/platform/ui/src/components/simpleDialog/__docs__/simpleDialog.mdx +++ /dev/null @@ -1,83 +0,0 @@ ---- -name: Simple Dialog -menu: Components -route: /components/simple-dialog ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { SimpleDialog } from './../index.js' - -# Simple Dialog - -Its similar to a modal but we can pass its style as props and manipulate it as -we want. Initially used to display tool data changes in our Viewport. - -## Basic usage - - - - {({ state, setState }) => ( - -
    {JSON.stringify(state, null, 2) }
    - - {/* Toggle Dialog */} - - - setState({ isDialogOpen: false })} - onConfirm={() => setState({ - isDialogOpen: false, - // If you don't want to update external state until complete, - // This is where you could grab current field values and update parent - // With setState - // - // inputValue: this.input.value, - // selectValue: this.select.value - })} - componentStyle={state.dialogStyle} - onValueChanged={(value) => setState({value}) } - > - - setState({inputValue: e.target.value})} - /> - - - -
    - )} -
    - -
    - -## API - - diff --git a/platform/ui/src/components/simpleDialog/index.js b/platform/ui/src/components/simpleDialog/index.js deleted file mode 100644 index df8327865..000000000 --- a/platform/ui/src/components/simpleDialog/index.js +++ /dev/null @@ -1 +0,0 @@ -export { SimpleDialog } from './SimpleDialog.js'; diff --git a/platform/ui/src/components/snackbar/SnackbarContainer.js b/platform/ui/src/components/snackbar/SnackbarContainer.js deleted file mode 100644 index e49d1c73e..000000000 --- a/platform/ui/src/components/snackbar/SnackbarContainer.js +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react'; -import SnackbarItem from './SnackbarItem'; -import './Snackbar.css'; -import { useSnackbarContext } from '../../contextProviders'; - -const SnackbarContainer = () => { - const { snackbarItems, hide } = useSnackbarContext(); - - const renderItem = item => { - return ; - }; - - if (!snackbarItems) { - return null; - } - - const renderItems = () => { - const items = { - topLeft: [], - topCenter: [], - topRight: [], - bottomLeft: [], - bottomCenter: [], - bottomRight: [], - }; - - snackbarItems.map(item => { - items[item.position].push(item); - }); - - return ( -
    - {Object.keys(items).map(pos => { - if (!items[pos].length) { - return null; - } - - return ( -
    - {items[pos].map((item, index) => ( -
    {renderItem(item)}
    - ))} -
    - ); - })} -
    - ); - }; - - return <>{renderItems()}; -}; - -export default SnackbarContainer; diff --git a/platform/ui/src/components/snackbar/SnackbarItem.js b/platform/ui/src/components/snackbar/SnackbarItem.js deleted file mode 100644 index 40c43697e..000000000 --- a/platform/ui/src/components/snackbar/SnackbarItem.js +++ /dev/null @@ -1,31 +0,0 @@ -import React, { useState, useEffect } from 'react'; - -const SnackbarItem = ({ options, onClose }) => { - const handleClose = () => { - onClose(options.id); - }; - - useEffect(() => { - if (options.autoClose) { - setTimeout(() => { - handleClose(); - }, options.duration); - } - }, []); - - return ( -
    - - x - - {options.title &&
    {options.title}
    } - {options.message &&
    {options.message}
    } -
    - ); -}; - -export default SnackbarItem; diff --git a/platform/ui/src/components/snackbar/SnackbarTypes.js b/platform/ui/src/components/snackbar/SnackbarTypes.js deleted file mode 100644 index 3dffcb5c9..000000000 --- a/platform/ui/src/components/snackbar/SnackbarTypes.js +++ /dev/null @@ -1,6 +0,0 @@ -export default { - INFO: 'info', - WARNING: 'warning', - SUCCESS: 'success', - ERROR: 'error', -}; diff --git a/platform/ui/src/components/studyBrowser/ImageThumbnail.styl b/platform/ui/src/components/studyBrowser/ImageThumbnail.styl deleted file mode 100644 index dce5c7d41..000000000 --- a/platform/ui/src/components/studyBrowser/ImageThumbnail.styl +++ /dev/null @@ -1,99 +0,0 @@ -:root { - --text-secondary-color: #91B9CD; - --active-color: #20A5D6; - --primary-background-color: black; - --ui-border-color-dark: #3C5D80 - --sidebar-transition: all 0.3s ease; -} - -.ThumbnailEntry.active .ImageThumbnail - border-color: var(--active-color); - box-shadow: none - transition: var(--sidebar-transition); - -.ImageThumbnail - background-color: var(--primary-background-color); - box-shadow: inset 0 0 0 1px var(--ui-border-color-dark); - border: 5px solid transparent - border-radius: 12px - height: 135px - margin: 0 auto - padding 5px - position: relative - transition: var(--sidebar-transition); - width: 217px - -moz-background-clip: padding - -webkit-background-clip: padding - background-clip: padding-box - - // Thumbnail Loading Indicator - - .image-thumbnail-loading-indicator - position: absolute - left: 50% - top: 50% - margin: -22px 0 0 -22px - display: block - width: 44px - height: 44px - - &:after - content: " " - display: block - width: 32px - height: 32px - margin: 1px - border-radius: 50% - border: 5px solid var(--ui-border-color-dark) - border-color: var(--ui-border-color-dark) transparent var(--ui-border-color-dark) transparent - animation: image-thumbnail-loading-indicator 1.2s linear infinite - - @keyframes image-thumbnail-loading-indicator - 0% - transform: rotate(0deg) - 100% - transform: rotate(360deg) - - // The End... - -.image-thumbnail-canvas - height: 100% - overflow: hidden - display: flex - justify-content: center - - img - -webkit-user-drag: none - pointer-events: none - -.thumbnailLoadingIndicator - display: none - pointer-events: none - color: var(--text-secondary-color); - height: 20px - width: 100% - top: 0 - left: 0 - right: 0 - bottom: 0 - margin: auto - position: absolute - - &.d-block - display: block; - - p - text-align: center - font-size: 10pt - -.image-thumbnail-progress-bar - position: relative - width: 100% - height: 3px - top: -5px - - .image-thumbnail-progress-bar-inner - height: 100% - width: 0 - border-radius: 5px - background-color: var(--active-color); diff --git a/platform/ui/src/components/studyBrowser/StudyBrowser.styl b/platform/ui/src/components/studyBrowser/StudyBrowser.styl deleted file mode 100644 index 5a105afeb..000000000 --- a/platform/ui/src/components/studyBrowser/StudyBrowser.styl +++ /dev/null @@ -1,40 +0,0 @@ -.study-browser - float: left - height: 100% - width: 100% - overflow: hidden - background-color: black - padding-bottom: 20px - padding-top: 10px - - .scrollable-study-thumbnails - height: 100% - overflow-y: auto - overflow-x: hidden - padding-bottom: 50px - padding-right: 16px - padding-left: 4px - margin-right: -16px - - display: flex; - flex-direction: column; - - &::-webkit-scrollbar - display: none - - .thumbnail-container - margin: 0 auto; - padding-bottom: 1.5rem; - - .noselect - -moz-user-select: none; /* Firefox */ - -ms-user-select: none; /* Internet Explorer */ - -khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */ - -webkit-user-select: none; /* Chrome, Safari, and Opera */ - -webkit-touch-callout: none; /* Disable Android and iOS callouts*/ - - -.draggable - cursor: copy - cursor: -webkit-grab - cursor: -moz-grab diff --git a/platform/ui/src/components/studyBrowser/Thumbnail.styl b/platform/ui/src/components/studyBrowser/Thumbnail.styl deleted file mode 100644 index 47e6ecb8e..000000000 --- a/platform/ui/src/components/studyBrowser/Thumbnail.styl +++ /dev/null @@ -1,98 +0,0 @@ -@import './../../design/styles/common/global.styl' - -:root { - --series-count-background-color: #678696; -} - -.thumbnail - cursor: pointer - display: table - margin: 0 auto; - min-width: 90%; - padding-bottom: 1.5rem; - - .alt-image-text - align-items: center; - justify-content: center; - background-color: var(--primary-background-color); - box-shadow: inset 0 0 0 1px var(--ui-border-color-dark); - border: 5px solid transparent; - border-radius: 12px; - height: 135px; - margin: 0 auto; - padding: 5px; - position: relative; - transition: var(--sidebar-transition); - width: 217px; - display: flex; - - h1 - text-align: center - color: var(--text-primary-color); - - .series-details - display: flex; - flex-direction: column - color: var(--text-primary-color); - font-size: 14px - line-height: 1.3em - margin-top: 5px - margin-left: 1rem - margin-right: 0.5rem - max-width: 217px - position: relative - word-wrap: break-word - - .series-description - flex-grow: 1 - - &.info-only .series-description - display: none - - .series-information - display: flex - flex-direction: row - justify-content: space-between - - .item-frames .icon - height: 18px - - .item-series.image-frames .icon - background-color: var(--series-count-background-color); - margin-top: 6px - position: relative - - &:after - content: '' - background-color: var(--active-color); - box-shadow: 1px 1px rgba(0, 0, 0, .115) - left: -4px - position: absolute - top: -4px - - & - &:after - content: '' - border: 0px solid var(--series-count-background-color) - display: inline-block - height: 11px - width: 11px - - .value - color: var(--text-secondary-color); - display: inline-block - font-size: 12px - margin-left: 4px - overflow: hidden - text-overflow: ellipsis - white-space: nowrap - width: calc(100% - 15px) - vertical-align: middle - - .icon - color: var(--active-color); - display: inline-block - font-size: 10px - font-weight: 900 - text-align: right - width: 11px diff --git a/platform/ui/src/components/studyBrowser/__docs__/ExampleDropTarget.css b/platform/ui/src/components/studyBrowser/__docs__/ExampleDropTarget.css deleted file mode 100644 index 3d5fc34c6..000000000 --- a/platform/ui/src/components/studyBrowser/__docs__/ExampleDropTarget.css +++ /dev/null @@ -1,30 +0,0 @@ -.ExampleDropTarget { - display: flex; - justify-content: center; - flex-direction: column; - - min-height: 100px; - - border: 2px dashed black; - padding: 20px; - transition: 0.2s all ease; -} - -.ExampleDropTarget h4, -.ExampleDropTarger p { - text-align: center; - word-break: break-word; -} - -.ExampleDropTarget.can-drop { - border: 2px dashed #20a5d6; - background-color: #fafafa; - color: black; -} - -.ExampleDropTarget.hovered { - border: 2px dashed #20a5d6; - background-color: black; - color: #91b9cd; - cursor: copy; -} diff --git a/platform/ui/src/components/studyBrowser/__docs__/studyBrowser.mdx b/platform/ui/src/components/studyBrowser/__docs__/studyBrowser.mdx deleted file mode 100644 index f9606fe84..000000000 --- a/platform/ui/src/components/studyBrowser/__docs__/studyBrowser.mdx +++ /dev/null @@ -1,22 +0,0 @@ ---- -name: Study Browser -menu: Components -route: /components/study-browser ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { WrappedStudyBrowser } from './wrappedStudyBrowser.js' -import { StudyBrowser } from './../index.js' - -# Study Browser - -## Basic usage - - - - - -## API - - diff --git a/platform/ui/src/components/studyBrowser/__docs__/wrappedStudyBrowser.js b/platform/ui/src/components/studyBrowser/__docs__/wrappedStudyBrowser.js deleted file mode 100644 index d7fa76f54..000000000 --- a/platform/ui/src/components/studyBrowser/__docs__/wrappedStudyBrowser.js +++ /dev/null @@ -1,41 +0,0 @@ -import React, { Component } from 'react'; -import { DragDropContext } from 'react-dnd'; -import TouchBackend from 'react-dnd-touch-backend'; - -// -import { - studies, - onThumbnailClick, - onThumbnailDoubleClick, -} from './exampleStudies.js'; -import ExampleDropTarget from './ExampleDropTarget.js'; -import { StudyBrowser } from './../index.js'; - -class StudyBrowserContainer extends Component { - render() { - //const viewportData = [null, null, null, null]; - - return ( - - - - - ); - } -} - -// Note: -// Normally, the top level APP component is wrapped with the DragDropContext -// We wrap this component to create a simple/local example. -const WrappedStudyBrowser = DragDropContext( - TouchBackend({ enableMouseEvents: true }), - null, - true -)(StudyBrowserContainer); - -// http://react-dnd.github.io/react-dnd/docs/api/drag-drop-context -export { WrappedStudyBrowser }; diff --git a/platform/ui/src/components/studyBrowser/index.js b/platform/ui/src/components/studyBrowser/index.js deleted file mode 100644 index fd9b43275..000000000 --- a/platform/ui/src/components/studyBrowser/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { StudyBrowser } from './StudyBrowser.js'; -export { Thumbnail } from './Thumbnail.js'; diff --git a/platform/ui/src/components/studyList/CustomDateRangePicker.css b/platform/ui/src/components/studyList/CustomDateRangePicker.css deleted file mode 100644 index 6b2b07845..000000000 --- a/platform/ui/src/components/studyList/CustomDateRangePicker.css +++ /dev/null @@ -1,119 +0,0 @@ -/* NOTE: the order of these styles DO matter */ - -/* Will edit everything selected including everything between a range of dates */ -.CalendarDay__selected_span { - background: var(--datePicker-picker-background); - color: var(--datePicker-picker-text); - border-color: #e4e7e7; -} - -/* Will edit selected date or the endpoints of a range of dates */ -.CalendarDay__selected { - background: var(--datePicker-picker-background); - color: var(--datePicker-picker-text); - border-color: #e4e7e7; -} - -/* Will edit when hovered over. _span style also has this property */ -.CalendarDay__selected:hover, -.CalendarDay__default:hover { - background: var(--datePicker-picker-background); - color: var(--datePicker-picker-text); - border-color: #e4e7e7; -} - -/* Will edit when the second date (end date) in a range of dates -is not yet selected. Edits the dates between your mouse and said date */ -.CalendarDay__hovered_span:hover, -.CalendarDay__hovered_span { - background: var(--datePicker-picker-background); - color: var(--datePicker-picker-text); - border-color: #e4e7e7; -} - -/* EXTERIOR INPUT STYLE */ -/* Container - placement */ -.DateRangePicker { - height: 40px; - margin: 0 5px 20px 5px; - cursor: pointer; - border: none; - width: 100%; -} -/* Container - visual */ -.DateRangePickerInput { - width: calc(100% - 10px); /* Just use padding? */ - background-color: var(--datePicker-input-background); - border-color: var(--datePicker-input-background); - color: var(--datePicker-picker-text-input); - height: 40px; -} - -.DateRangePickerInput.DateRangePickerInput__withBorder { - border-radius: 4px; - background-color: var(--datePicker-input-background); -} - -/* Input Container */ -.DateInput { - width: 97px; - height: 38px; - border-radius: 4px; - background-color: var(--datePicker-input-background); -} - -/* Actual Input Element */ -.DateInput > .DateInput_input { - border-color: transparent; - background-color: transparent; - color: var(--datePicker-picker-text-input); - height: 38px; - font-size: 10pt; - padding: 0; -} - -/* PRESETS */ -.PresetDateRangePicker_panel { - display: flex; - justify-content: space-between; -} - -.PresetDateRangePicker_button { - margin: 0; - padding: 4px 8px; - color: #00a699; - background: var(--datePicker-picker-text-input); -} - -.PresetDateRangePicker_button:hover { - background: #00a699; - color: var(--datePicker-picker-text-input); -} - -.CalendarDay__blocked_out_of_range:hover { - background: #fff; - cursor: not-allowed; - color: var(--datePicker-picker-text-disabled); -} - -.DateRangePicker_select { - background-color: white; - color: var(--datePicker-picker-text); - border: 1px solid #e4e7e7; - border-radius: 4px; - display: inline-block; - padding: 3px 20px 3px 10px; - font-size: 14px; - cursor: pointer; - appearance: none; - - background-image: linear-gradient(45deg, transparent 50%, gray 50%), - linear-gradient(135deg, gray 50%, transparent 50%); - background-position: calc(100% - 11px) 11px, calc(100% - 6px) calc(11px); - background-size: 5px 5px, 5px 5px; - background-repeat: no-repeat; -} - -.DateRangePicker_select:hover { - border-color: #c4c4c4; -} diff --git a/platform/ui/src/components/studyList/CustomDateRangePicker.js b/platform/ui/src/components/studyList/CustomDateRangePicker.js deleted file mode 100644 index dc82d5f32..000000000 --- a/platform/ui/src/components/studyList/CustomDateRangePicker.js +++ /dev/null @@ -1,140 +0,0 @@ -// If you want to continue using CSS stylesheets and classes... -// https://github.com/airbnb/react-dates#initialize -import 'react-dates/initialize'; -import 'react-dates/lib/css/_datepicker.css'; -import './CustomDateRangePicker.css'; - -import React from 'react'; -import PropTypes from 'prop-types'; -import { DateRangePicker } from 'react-dates'; -import moment from 'moment'; -import i18n from '@ohif/i18n'; -import { useTranslation } from 'react-i18next'; - -function CustomDateRangePicker(props) { - moment.locale(i18n.language); // using i18n in the date picker - - const { t } = useTranslation('DatePicker'); - - const { - onDatesChange, - startDate, - endDate, - presets, - ...dateRangePickerProps - } = props; - - const renderDatePresets = () => { - const { presets } = props; - - return ( -
    - {presets.map(({ text, start, end }) => { - const isSelected = startDate === start && endDate === end; - - return ( - - ); - })} -
    - ); - }; - const renderMonthElement = ({ month, onMonthSelect, onYearSelect }) => { - const containerStyle = { - margin: '0 5px', - }; - - const renderYearsOptions = () => { - const yearsRange = 20; - const options = []; - - for (let i = 0; i < yearsRange; i++) { - const year = moment().year() - i; - options.push(); - } - - return options; - }; - - renderMonthElement.propTypes = { - onMonthSelect: PropTypes.func, - onYearSelect: PropTypes.func, - }; - - return ( -
    -
    - -
    -
    - {} - -
    -
    - ); - }; - - return ( - - ); -} - -CustomDateRangePicker.propTypes = { - presets: PropTypes.arrayOf( - PropTypes.shape({ - text: PropTypes.string, - start: PropTypes.required, - end: PropTypes.required, - }) - ), - onDatesChange: PropTypes.func.isRequired, - startDate: PropTypes.instanceOf(Date), - endDate: PropTypes.instanceOf(Date), - month: PropTypes.instanceOf(Date), -}; - -export default CustomDateRangePicker; diff --git a/platform/ui/src/components/studyList/PageToolbar.js b/platform/ui/src/components/studyList/PageToolbar.js deleted file mode 100644 index d0f445800..000000000 --- a/platform/ui/src/components/studyList/PageToolbar.js +++ /dev/null @@ -1,38 +0,0 @@ -import React, { PureComponent } from 'react'; - -import { Icon } from './../../elements/Icon'; -import PropTypes from 'prop-types'; - -class PageToolbar extends PureComponent { - static propTypes = { - onImport: PropTypes.func, - }; - - onImport = event => { - if (this.props.onImport) { - this.props.onImport(event); - } - }; - - getImportTool() { - if (this.props.onImport) { - return ( -
    - -
    - ); - } - } - - render() { - return
    {this.getImportTool()}
    ; - } -} - -export { PageToolbar }; diff --git a/platform/ui/src/components/studyList/PaginationArea.styl b/platform/ui/src/components/studyList/PaginationArea.styl deleted file mode 100644 index bfab2fe05..000000000 --- a/platform/ui/src/components/studyList/PaginationArea.styl +++ /dev/null @@ -1,63 +0,0 @@ -.pagination-area - display: flex; - color: var(--text-secondary-color); - font-size: 13px - font-weight: normal !important - - label - font-weight: normal - - select - margin: 5px - background-color: var(--primary-background-color) - color: white - - - .rows-dropdown - width: 25%; - padding-right: 15px; - padding-left: 15px; - - .pagination-buttons - width: 75%; - padding-right: 15px; - padding-left: 15px; - - .form-group - margin-bottom: 15px; - -.rows-per-page label.wrapperLabel - display: inline-table !important - margin: 0 4px - - select - margin: 0px 4px 0px 4px - width: 42px - -.page-buttons - margin: 0 - text-align: right - font-weight: normal - ul.pagination-control - margin: 0 - - li - display: table-cell - padding: 5px 2px - - button - padding: 4px 8px - background-color: var(--primary-background-color) - border-color: var(--ui-gray) - color: var(--ui-gray-darkest) - color: white - text-decoration: none - - &:hover:enabled - color: var(--active-color) - - .active - button - background-color: var(--ui-gray) - border-color: #ddd - color: white diff --git a/platform/ui/src/components/studyList/StudyListLoadingText.js b/platform/ui/src/components/studyList/StudyListLoadingText.js deleted file mode 100644 index b1c404d3c..000000000 --- a/platform/ui/src/components/studyList/StudyListLoadingText.js +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { Icon } from './../../elements/Icon'; -// TODO: useTranslation -import { withTranslation } from '../../contextProviders'; - -function StudyListLoadingText({ t: translate }) { - return ( -
    - {translate('Loading')}... -
    - ); -} - -const connectedComponent = withTranslation('StudyListLoadingText')( - StudyListLoadingText -); - -export { connectedComponent as StudyListLoadingText }; diff --git a/platform/ui/src/components/studyList/TableSearchFilter.js b/platform/ui/src/components/studyList/TableSearchFilter.js deleted file mode 100644 index ca9874e5a..000000000 --- a/platform/ui/src/components/studyList/TableSearchFilter.js +++ /dev/null @@ -1,150 +0,0 @@ -import React, { useState } from 'react'; -import PropTypes from 'prop-types'; -import moment from 'moment'; -import { isInclusivelyBeforeDay } from 'react-dates'; -import CustomDateRangePicker from './CustomDateRangePicker.js'; -import { Icon } from './../../elements/Icon'; -import { useTranslation } from 'react-i18next'; - -const getDateEntry = (datePicked, rangeDatePicked) => { - return rangeDatePicked || datePicked || null; -}; - -const getDateEntryFromRange = (today, numOfDays, edge = 'start') => { - if (typeof numOfDays !== 'number') { - return; - } - - if (edge === 'end') { - return today; - } else { - today.subtract(numOfDays, 'days'); - } -}; - -function TableSearchFilter(props) { - const { - meta, - values, - onSort, - onValueChange, - sortFieldName, - sortDirection, - // TODO: Rename - studyListDateFilterNumDays, - } = props; - - const { studyDateTo, studyDateFrom } = values || {}; - const [focusedInput, setFocusedInput] = useState(null); - const { t, ready: translationsAreReady } = useTranslation('Common'); - - const sortIcons = ['sort', 'sort-up', 'sort-down']; - const sortIconForSortField = - sortDirection === 'asc' ? sortIcons[1] : sortIcons[2]; - - const today = moment(); - const lastWeek = moment().subtract(7, 'day'); - const lastMonth = moment().subtract(1, 'month'); - - const defaultStartDate = getDateEntryFromRange( - today, - studyListDateFilterNumDays, - 'start' - ); - const defaultEndDate = getDateEntryFromRange( - today, - studyListDateFilterNumDays, - 'end' - ); - - const studyDatePresets = [ - { - text: t('Today'), - start: today, - end: today, - }, - { - text: t('Last 7 days'), - start: lastWeek, - end: today, - }, - { - text: t('Last 30 days'), - start: lastMonth, - end: today, - }, - ]; - - return translationsAreReady - ? meta.map((field, i) => { - const { displayText, fieldName, inputType } = field; - const isSortField = sortFieldName === fieldName; - const sortIcon = isSortField ? sortIconForSortField : sortIcons[0]; - - return ( - - - {inputType === 'text' && ( - onValueChange(fieldName, e.target.value)} - /> - )} - {inputType === 'date-range' && ( - // https://github.com/airbnb/react-dates - { - onValueChange('studyDateFrom', startDate); - onValueChange('studyDateTo', endDate); - }} - focusedInput={focusedInput} - onFocusChange={updatedVal => setFocusedInput(updatedVal)} - // Optional - numberOfMonths={1} // For med and small screens? 2 for large? - showClearDates={true} - anchorDirection="left" - presets={studyDatePresets} - hideKeyboardShortcutsPanel={true} - isOutsideRange={day => !isInclusivelyBeforeDay(day, moment())} - /> - )} - - ); - }) - : null; -} - -TableSearchFilter.propTypes = { - meta: PropTypes.arrayOf( - PropTypes.shape({ - displayText: PropTypes.string.isRequired, - fieldName: PropTypes.string.isRequired, - inputType: PropTypes.oneOf(['text', 'date-range']).isRequired, - size: PropTypes.number.isRequired, - }) - ).isRequired, - values: PropTypes.object.isRequired, - onSort: PropTypes.func.isRequired, - sortFieldName: PropTypes.string, - sortDirection: PropTypes.oneOf([null, 'asc', 'desc']), -}; - -TableSearchFilter.defaultProps = {}; - -export { TableSearchFilter }; -export default TableSearchFilter; diff --git a/platform/ui/src/components/studyList/index.js b/platform/ui/src/components/studyList/index.js deleted file mode 100644 index af9078927..000000000 --- a/platform/ui/src/components/studyList/index.js +++ /dev/null @@ -1,4 +0,0 @@ -export { StudyList } from './StudyList.js'; -export { TableSearchFilter } from './TableSearchFilter.js'; -export { TablePagination } from './TablePagination.js'; -export { PageToolbar } from './PageToolbar.js'; diff --git a/platform/ui/src/components/tableList/TableList.styl b/platform/ui/src/components/tableList/TableList.styl deleted file mode 100644 index 4c0c0d88d..000000000 --- a/platform/ui/src/components/tableList/TableList.styl +++ /dev/null @@ -1,50 +0,0 @@ - -$headerRowHeight = 63px - -.tableList - background-color: var(--primary-background-color) - height: 100%; - width: 100%; - - .tableListHeader - background-color: var(--ui-gray-darker) - color: var(--text-secondary-color) - display: flex - height: $headerRowHeight - line-height: $headerRowHeight - margin-top: 2px - overflow: hidden - width: 100% - - .tableListHeaderTitle - color: var(--text-secondary-color) - font-size: 22px - font-weight: 300 - line-height: $headerRowHeight - padding: 0 10px - text-align: left - flex: 1; - - .tableListHeaderSelector - cursor: pointer - max-width: 30px - padding-left: 2px - align-items: stretch - flex: 1 - justify-content: space-around - text-align: center - - svg - fill: #c1d8e3 - height: 63px - max-width: 11px - - .numberOfItems - color: var(--ui-sky-blue) - float: right - font-weight: 300 - font-size: 40px - max-width: 54px - height: $headerRowHeight - line-height: 66px - flex: 1; diff --git a/platform/ui/src/components/tableList/TableListItem.styl b/platform/ui/src/components/tableList/TableListItem.styl deleted file mode 100644 index c6e8e4d29..000000000 --- a/platform/ui/src/components/tableList/TableListItem.styl +++ /dev/null @@ -1,46 +0,0 @@ -.tableListItem - display: flex - margin-left: -6px - margin-top: 2px - padding-left: 6px - opacity: 0.7 - cursor: pointer; - width: calc(100% + 6px) - - &:hover - opacity 1 - - &.selected - opacity 1 - .itemIndex - color: $activeColor - - &.hasWarning - .warning - display: block - - .itemIndex - background-color: var(--ui-gray) - color: var(--text-secondary-color) - cursor: pointer - flex: 1 - max-width: 25px - transition(all 0.3s ease) - font-size: 14px - font-weight: 400 - margin-right: 6px - padding: 10px - text-align: center - -webkit-box-sizing: initial; - -moz-box-sizing: initial; - box-sizing: initial; - - .itemContent - flex: 1 - color: var(--text-secondary-color) - width: calc(100% - 51px); - font-weight: 400 - margin-top: 9px; - - .warning-icon - display: none diff --git a/platform/ui/src/components/tableList/__docs__/tableList.mdx b/platform/ui/src/components/tableList/__docs__/tableList.mdx deleted file mode 100644 index bea1c7db5..000000000 --- a/platform/ui/src/components/tableList/__docs__/tableList.mdx +++ /dev/null @@ -1,48 +0,0 @@ ---- -name: Table List -menu: Components -route: /components/table-list ---- - -import { Playground, Props } from 'docz' -import { State } from 'react-powerplug' -import { TableList, TableListItem } from './../index.js' - -# Table List - -## Basic usage - - - - {({ state, setState }) => ( - - {state.listItems.map( (item, index) => { - return ( - alert('item clicked')} - > - - - )} - )} - - )} - - - - - -## API - - diff --git a/platform/ui/src/components/tableList/index.js b/platform/ui/src/components/tableList/index.js deleted file mode 100644 index 5a19d8d71..000000000 --- a/platform/ui/src/components/tableList/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { TableList } from './TableList'; -export { TableListItem } from './TableListItem'; diff --git a/platform/ui/src/components/toolbarSection/ToolbarSection.js b/platform/ui/src/components/toolbarSection/ToolbarSection.js deleted file mode 100644 index e1fdbf213..000000000 --- a/platform/ui/src/components/toolbarSection/ToolbarSection.js +++ /dev/null @@ -1,65 +0,0 @@ -import './ToolbarSection.styl'; - -import React, { PureComponent } from 'react'; - -import ExpandableToolMenu from '../../viewer/ExpandableToolMenu'; -import PropTypes from 'prop-types'; -import ToolbarButton from '../../viewer/ToolbarButton'; -import classnames from 'classnames'; - -class ToolbarSection extends PureComponent { - static defaultProps = { - className: '', - }; - - static propTypes = { - buttons: PropTypes.arrayOf( - PropTypes.shape({ - id: PropTypes.string, - label: PropTypes.string.isRequired, - icon: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.shape({ - name: PropTypes.string.isRequired, - }), - ]), - /** Optional: Expandable Tool Menu */ - buttons: PropTypes.arrayOf(PropTypes.shape({})), - }) - ).isRequired, - /** Array of string button ids that should show as active */ - activeButtons: PropTypes.arrayOf(PropTypes.string).isRequired, - /** Class for toolbar section container */ - className: PropTypes.string, - }; - - render() { - const items = this.props.buttons.map((button, index) => { - if (button.buttons && Array.isArray(button.buttons)) { - return ( - - ); - } else { - return ( - - ); - } - }); - - return ( -
    - {items} -
    - ); - } -} - -export { ToolbarSection }; diff --git a/platform/ui/src/components/toolbarSection/ToolbarSection.styl b/platform/ui/src/components/toolbarSection/ToolbarSection.styl deleted file mode 100644 index 1e008acca..000000000 --- a/platform/ui/src/components/toolbarSection/ToolbarSection.styl +++ /dev/null @@ -1,4 +0,0 @@ -.ToolbarSection - float: left; - background-color: var(--primary-background-color); - border-radius: 8px; diff --git a/platform/ui/src/components/toolbarSection/__docs__/exampleButtons.js b/platform/ui/src/components/toolbarSection/__docs__/exampleButtons.js deleted file mode 100644 index 74e08b6a2..000000000 --- a/platform/ui/src/components/toolbarSection/__docs__/exampleButtons.js +++ /dev/null @@ -1,41 +0,0 @@ -export default [ - { - id: 'Pan', - label: 'Pan', - icon: 'arrows', - }, - { - label: 'Zoom', - icon: 'search', - }, - { - label: 'Bidirectional', - icon: 'measure-target', - }, - { - label: 'Stack Scroll', - icon: 'bars', - }, - { - label: 'Reset', - icon: 'reset', - }, - { - label: 'Manual', - icon: 'level', - }, - { - label: 'More', - icon: 'ellipse-circle', - buttons: [ - { - label: 'Reset 2', - icon: 'reset', - }, - { - label: 'Manual 2', - icon: 'adjust', - }, - ], - }, -]; diff --git a/platform/ui/src/components/toolbarSection/__docs__/toolbarSection.docs.mdx b/platform/ui/src/components/toolbarSection/__docs__/toolbarSection.docs.mdx deleted file mode 100644 index a246a2dd5..000000000 --- a/platform/ui/src/components/toolbarSection/__docs__/toolbarSection.docs.mdx +++ /dev/null @@ -1,39 +0,0 @@ ---- -name: Toolbar Section -menu: Components -route: /components/toolbar-section ---- - -import { Playground, Props } from 'docz'; -import { State } from 'react-powerplug'; -import { ToolbarSection } from './../index.js'; -import exampleButtons from './exampleButtons.js'; -import NameSpace from '../../../__docs__/NameSpace'; - -# ToolbarSection - -A basic row of buttons for a toolbar. Active command is `WwwcTool` - -## Basic usage - - - { - alert('pressed'); - }, - }} - > - {({ state, setState }) => } - - - -## API - - - -## Translation Namespace - - diff --git a/platform/ui/src/components/toolbarSection/index.js b/platform/ui/src/components/toolbarSection/index.js deleted file mode 100644 index 5dad83951..000000000 --- a/platform/ui/src/components/toolbarSection/index.js +++ /dev/null @@ -1 +0,0 @@ -export { ToolbarSection } from './ToolbarSection.js'; diff --git a/platform/ui/src/components/tooltip/Tooltip.js b/platform/ui/src/components/tooltip/Tooltip.js deleted file mode 100644 index 237d2cb22..000000000 --- a/platform/ui/src/components/tooltip/Tooltip.js +++ /dev/null @@ -1,66 +0,0 @@ -import './Tooltip.styl'; - -import classNames from 'classnames'; -import React from 'react'; -import PropTypes from 'prop-types'; - -const propTypes = { - /** Sets the direction the Tooltip is positioned towards. */ - placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']), - - /** The "top" position value for the Tooltip. */ - positionTop: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - /** The "left" position value for the Tooltip. */ - positionLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - - /** The "top" position value for the Tooltip arrow. */ - arrowOffsetTop: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - /** The "left" position value for the Tooltip arrow. */ - arrowOffsetLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), -}; - -const defaultProps = { - placement: 'right', -}; - -class Tooltip extends React.Component { - render() { - const { - placement, - positionTop, - positionLeft, - arrowOffsetTop, - arrowOffsetLeft, - className, - style, - children, - } = this.props; - - const outerStyle = { - top: positionTop, - left: positionLeft, - ...style, - }; - - const arrowStyle = { - top: arrowOffsetTop, - left: arrowOffsetLeft, - }; - - return ( -
    -
    -
    {children}
    -
    - ); - } -} - -Tooltip.propTypes = propTypes; -Tooltip.defaultProps = defaultProps; - -export { Tooltip }; diff --git a/platform/ui/src/components/tooltip/Tooltip.styl b/platform/ui/src/components/tooltip/Tooltip.styl deleted file mode 100644 index ab0822ab9..000000000 --- a/platform/ui/src/components/tooltip/Tooltip.styl +++ /dev/null @@ -1,92 +0,0 @@ -@import './../../design/styles/common/global.styl' - -.tooltip - position: absolute; - z-index: 1070; - display: block; - font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; - font-size: 12px; - font-style: normal; - font-weight: 400; - line-height: 1.42857143; - text-align: left; - text-align: start; - text-decoration: none; - text-shadow: none; - text-transform: none; - letter-spacing: normal; - word-break: normal; - word-spacing: normal; - word-wrap: normal; - white-space: normal; - opacity: 0; - line-break: auto; - - &.in - opacity: .9; - - &.top - margin-top: -3px; - padding: 5px 0; - - &.right - margin-left: 3px; - padding: 0 5px; - - &.bottom - margin-top: 3px; - padding: 5px 0; - - &.left - margin-left: -3px; - padding: 0 5px; - - &.top .tooltip-arrow { - bottom: 0; - left: 50%; - margin-left: -5px; - border-width: 5px 5px 0; - border-top-color: #000; - } - - &.right .tooltip-arrow { - top: 50%; - left: 0; - margin-top: -5px; - border-width: 5px 5px 5px 0; - border-right-color: #000; - } - &.left .tooltip-arrow { - top: 50%; - right: 0; - margin-top: -5px; - border-width: 5px 0 5px 5px; - border-left-color: #000; - } - &.bottom .tooltip-arrow { - top: 0; - left: 50%; - margin-left: -5px; - border-width: 0 5px 5px; - border-bottom-color: #000; - } - -.tooltip-inner { - max-width: 200px; - padding: 3px 8px; - color: #fff; - text-align: center; - background-color: #000; - border-radius: 4px; -} - -.tooltip-arrow { - position: absolute; - width: 0; - height: 0; - border-color: transparent; - border-style: solid; -} - -.tooltip.in - opacity: .9; diff --git a/platform/ui/src/components/tooltip/__docs__/tooltip.noshow-mdx b/platform/ui/src/components/tooltip/__docs__/tooltip.noshow-mdx deleted file mode 100644 index e5adad984..000000000 --- a/platform/ui/src/components/tooltip/__docs__/tooltip.noshow-mdx +++ /dev/null @@ -1,20 +0,0 @@ ---- -name: Tooltip -menu: Components -route: /components/tooltip ---- - -import { Playground, Props } from 'docz' -import { Tooltip } from './../index.js' - -# Tooltip - -## Basic usage - - - - - -## API - - diff --git a/platform/ui/src/components/tooltip/__tests__/.githold b/platform/ui/src/components/tooltip/__tests__/.githold deleted file mode 100644 index e69de29bb..000000000 diff --git a/platform/ui/src/components/tooltip/index.js b/platform/ui/src/components/tooltip/index.js deleted file mode 100644 index 40ede0d67..000000000 --- a/platform/ui/src/components/tooltip/index.js +++ /dev/null @@ -1 +0,0 @@ -export { Tooltip } from './Tooltip.js'; diff --git a/platform/ui/src/contextProviders/DialogProvider.js b/platform/ui/src/contextProviders/DialogProvider.js deleted file mode 100644 index 74e7c1419..000000000 --- a/platform/ui/src/contextProviders/DialogProvider.js +++ /dev/null @@ -1,291 +0,0 @@ -import React, { - useState, - createContext, - useContext, - useCallback, - useEffect, -} from 'react'; -import PropTypes from 'prop-types'; -import Draggable from 'react-draggable'; -import classNames from 'classnames'; - -import { utils } from '@ohif/core'; - -import './DialogProvider.styl'; - -const DialogContext = createContext(null); - -export const useDialog = () => useContext(DialogContext); - -const DialogProvider = ({ children, service }) => { - const [isDragging, setIsDragging] = useState(false); - const [dialogs, setDialogs] = useState([]); - const [lastDialogId, setLastDialogId] = useState(null); - const [lastDialogPosition, setLastDialogPosition] = useState(null); - const [centerPositions, setCenterPositions] = useState([]); - - useEffect(() => { - setCenterPositions( - dialogs.map(dialog => ({ - id: dialog.id, - ...getCenterPosition(dialog.id), - })) - ); - }, [dialogs]); - - const getCenterPosition = id => { - const root = document.querySelector('#root'); - const centerX = root.offsetLeft + root.offsetWidth / 2; - const centerY = root.offsetTop + root.offsetHeight / 2; - const item = document.querySelector(`#draggableItem-${id}`); - const itemBounds = item.getBoundingClientRect(); - return { - x: centerX - itemBounds.width / 2, - y: centerY - itemBounds.height / 2, - }; - }; - - /** - * Sets the implementation of a dialog service that can be used by extensions. - * - * @returns void - */ - useEffect(() => { - if (service) { - service.setServiceImplementation({ create, dismiss, dismissAll }); - } - }, [create, dismiss, service]); - - /** - * UI Dialog - * - * @typedef {Object} DialogProps - * @property {string} id The dialog id. - * @property {DialogContent} content The dialog content. - * @property {Object} contentProps The dialog content props. - * @property {boolean} isDraggable Controls if dialog content is draggable or not. - * @property {boolean} showOverlay Controls dialog overlay. - * @property {boolean} centralize Center the dialog on the screen. - * @property {boolean} preservePosition Use last position instead of default. - * @property {ElementPosition} defaultPosition Specifies the `x` and `y` that the dragged item should start at. - * @property {Function} onStart Called when dragging starts. If `false` is returned any handler, the action will cancel. - * @property {Function} onStop Called when dragging stops. - * @property {Function} onDrag Called while dragging. - */ - - useEffect(() => _bringToFront(lastDialogId), [_bringToFront, lastDialogId]); - - /** - * Creates a new dialog and return its id. - * - * @param {DialogProps} props The dialog props. - * @returns The new dialog id. - */ - const create = useCallback(props => { - const { id } = props; - - let dialogId = id; - if (!dialogId) { - dialogId = utils.guid(); - } - - setDialogs(dialogs => [...dialogs, { ...props, id: dialogId }]); - setLastDialogId(dialogId); - - return dialogId; - }, []); - - /** - * Dismisses the dialog with a given id. - * - * @param {Object} props - - * @property {string} props.id The dialog id. - * @returns void - */ - const dismiss = useCallback( - ({ id }) => - setDialogs(dialogs => dialogs.filter(dialog => dialog.id !== id)), - [] - ); - - /** - * Dismisses all dialogs. - * - * @returns void - */ - const dismissAll = () => { - setDialogs([]); - }; - - /** - * Indicate if there are no dialogs present. - * - * @returns True if no dialogs are present. - */ - const isEmpty = () => dialogs && dialogs.length < 1; - - /** - * Moves the dialog to the foreground if clicked. - * - * @param {string} id The dialog id. - * @returns void - */ - const _bringToFront = useCallback(id => { - setDialogs(dialogs => { - const topDialog = dialogs.find(dialog => dialog.id === id); - return topDialog - ? [...dialogs.filter(dialog => dialog.id !== id), topDialog] - : dialogs; - }); - }, []); - - const renderDialogs = () => - dialogs.map(dialog => { - const { - id, - content: DialogContent, - contentProps, - defaultPosition, - centralize = false, - preservePosition = true, - isDraggable = true, - onStart, - onStop, - onDrag, - showOverlay, - } = dialog; - - let position = - (preservePosition && lastDialogPosition) || defaultPosition; - if (centralize) { - position = centerPositions.find(position => position.id === id); - } - - const dragableItem = () => ( - { - const e = event || window.event; - const target = e.target || e.srcElement; - const BLACKLIST = [ - 'SVG', - 'BUTTON', - 'PATH', - 'INPUT', - 'SPAN', - 'LABEL', - ]; - if (BLACKLIST.includes(target.tagName.toUpperCase())) { - return false; - } - - if (validCallback(onStart)) { - return onStart(event); - } - }} - onStop={event => { - setIsDragging(false); - - if (validCallback(onStop)) { - return onStop(event); - } - }} - onDrag={event => { - setIsDragging(true); - _bringToFront(id); - _updateLastDialogPosition(id); - - if (validCallback(onDrag)) { - return onDrag(event); - } - }} - > -
    _bringToFront(id)} - > - -
    -
    - ); - - return ( - showOverlay ? ( -
    - {dragableItem()} -
    - ) : ( - dragableItem() - ) - ); - }); - - /** - * Update the last dialog position to be used as the new default position. - * - * @returns void - */ - const _updateLastDialogPosition = dialogId => { - const draggableItemBounds = document - .querySelector(`#draggableItem-${dialogId}`) - .getBoundingClientRect(); - setLastDialogPosition({ - x: draggableItemBounds.x, - y: draggableItemBounds.y, - }); - }; - - const validCallback = callback => callback && typeof callback === 'function'; - - return ( - - {!isEmpty() && -
    - {renderDialogs()} -
    - } - {children} -
    - ); -}; - -/** - * - * High Order Component to use the dialog methods through a Class Component - * - */ -export const withDialog = Component => { - return function WrappedComponent(props) { - const { create, dismiss, dismissAll, isEmpty } = useDialog(); - return ( - - ); - }; -}; - -DialogProvider.defaultProps = { - service: null, -}; - -DialogProvider.propTypes = { - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node, - PropTypes.func, - ]).isRequired, - service: PropTypes.shape({ - setServiceImplementation: PropTypes.func, - }), -}; - -export default DialogProvider; diff --git a/platform/ui/src/contextProviders/DialogProvider.styl b/platform/ui/src/contextProviders/DialogProvider.styl deleted file mode 100644 index f4e576f62..000000000 --- a/platform/ui/src/contextProviders/DialogProvider.styl +++ /dev/null @@ -1,21 +0,0 @@ -.DraggableItem.draggable - div - cursor: grab !important - -.DraggableItem.draggable.dragging - div - cursor: grabbing !important - -.DraggableArea - width: 100% - height: 100% - position: absolute - .Overlay - position: fixed - z-index: 999 - left: 0 - top: 0 - width: 100% - height: 100% - overflow: auto - background: rgba(0,0,0,.1) diff --git a/platform/ui/src/contextProviders/LanguageProvider.js b/platform/ui/src/contextProviders/LanguageProvider.js deleted file mode 100644 index f5e42847b..000000000 --- a/platform/ui/src/contextProviders/LanguageProvider.js +++ /dev/null @@ -1,28 +0,0 @@ -// Reference > https://reactjs.org/docs/context.html -import React from 'react'; -import { - withTranslation as I18NextWithTranslation, - I18nextProvider, -} from 'react-i18next'; -import i18n from '@ohif/i18n'; - -const WrapperI18n = Component => { - const WrapperComponent = props => ( - - - - ); - - return WrapperComponent; -}; - -const withTranslation = namespace => Component => { - const TranslatedComponent = props => { - return ; - }; - - return WrapperI18n(I18NextWithTranslation(namespace)(TranslatedComponent)); -}; - -export { withTranslation }; -export default withTranslation; diff --git a/platform/ui/src/contextProviders/ModalProvider.js b/platform/ui/src/contextProviders/ModalProvider.js deleted file mode 100644 index e8d65635d..000000000 --- a/platform/ui/src/contextProviders/ModalProvider.js +++ /dev/null @@ -1,134 +0,0 @@ -import React, { - useState, - createContext, - useContext, - useEffect, - useCallback, -} from 'react'; -import PropTypes from 'prop-types'; -import classNames from 'classnames'; - -const ModalContext = createContext(null); -const { Provider } = ModalContext; - -export const useModal = () => useContext(ModalContext); - -/** - * UI Modal - * - * @typedef {Object} ModalProps - * @property {ReactElement|HTMLElement} [content=null] Modal content. - * @property {Object} [contentProps=null] Modal content props. - * @property {boolean} [shouldCloseOnEsc=false] Modal is dismissible via the esc key. - * @property {boolean} [isOpen=true] Make the Modal visible or hidden. - * @property {boolean} [closeButton=true] Should the modal body render the close button. - * @property {string} [title=null] Should the modal render the title independently of the body content. - * @property {string} [customClassName=null] The custom class to style the modal. - */ - -const ModalProvider = ({ children, modal: Modal, service }) => { - const DEFAULT_OPTIONS = { - content: null, - contentProps: null, - shouldCloseOnEsc: false, - isOpen: true, - closeButton: true, - title: null, - customClassName: '', - }; - - const [options, setOptions] = useState(DEFAULT_OPTIONS); - - /** - * Sets the implementation of a modal service that can be used by extensions. - * - * @returns void - */ - useEffect(() => { - if (service) { - service.setServiceImplementation({ hide, show }); - } - }, [hide, service, show]); - - /** - * Show the modal and override its configuration props. - * - * @param {ModalProps} props { content, contentProps, shouldCloseOnEsc, isOpen, closeButton, title, customClassName } - * @returns void - */ - const show = useCallback(props => setOptions({ ...options, ...props }), [ - options, - ]); - - /** - * Hide the modal and set its properties to default. - * - * @returns void - */ - const hide = useCallback(() => setOptions(DEFAULT_OPTIONS), [ - DEFAULT_OPTIONS, - ]); - - const { - content: ModalContent, - contentProps, - isOpen, - title, - customClassName, - shouldCloseOnEsc, - closeButton, - } = options; - - return ( - - {ModalContent && ( - - - - )} - {children} - - ); -}; - -/** - * Higher Order Component to use the modal methods through a Class Component. - * - * @returns - */ -export const withModal = Component => { - return function WrappedComponent(props) { - const { show, hide } = useModal(); - return ; - }; -}; - -ModalProvider.defaultProps = { - service: null, -}; - -ModalProvider.propTypes = { - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node, - ]).isRequired, - modal: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node, - PropTypes.func, - ]).isRequired, - service: PropTypes.shape({ - setServiceImplementation: PropTypes.func, - }), -}; - -export default ModalProvider; - -export const ModalConsumer = ModalContext.Consumer; diff --git a/platform/ui/src/contextProviders/SnackbarProvider.js b/platform/ui/src/contextProviders/SnackbarProvider.js deleted file mode 100644 index cd8f3b1e0..000000000 --- a/platform/ui/src/contextProviders/SnackbarProvider.js +++ /dev/null @@ -1,142 +0,0 @@ -import React, { - useState, - createContext, - useContext, - useCallback, - useEffect, -} from 'react'; -import PropTypes from 'prop-types'; - -import SnackbarContainer from '../components/snackbar/SnackbarContainer'; -import SnackbarTypes from '../components/snackbar/SnackbarTypes'; - -const SnackbarContext = createContext(null); - -export const useSnackbarContext = () => useContext(SnackbarContext); - -const SnackbarProvider = ({ children, service }) => { - const DEFAULT_OPTIONS = { - title: '', - message: '', - duration: 5000, - autoClose: true, - position: 'bottomRight', - type: SnackbarTypes.INFO, - }; - - const [count, setCount] = useState(1); - const [snackbarItems, setSnackbarItems] = useState([]); - - /** - * Sets the implementation of a notification service that can be used by extensions. - * - * @returns void - */ - useEffect(() => { - if (service) { - service.setServiceImplementation({ hide, show }); - } - }, [service, hide, show]); - - const show = useCallback( - options => { - if (!options || (!options.title && !options.message)) { - console.warn( - 'Snackbar cannot be rendered without required parameters: title | message' - ); - - return null; - } - - const newItem = { - ...DEFAULT_OPTIONS, - ...options, - id: count, - visible: true, - }; - - setSnackbarItems(state => [...state, newItem]); - setCount(count + 1); - }, - [count, DEFAULT_OPTIONS] - ); - - const hide = useCallback( - id => { - const hideItem = items => { - const newItems = items.map(item => { - if (item.id === id) { - item.visible = false; - } - - return item; - }); - - return newItems; - }; - - setSnackbarItems(state => hideItem(state)); - - setTimeout(() => { - setSnackbarItems(state => [...state.filter(item => item.id !== id)]); - }, 1000); - }, - [setSnackbarItems] - ); - - const hideAll = () => { - // reset count - setCount(1); - - // remove all items from array - setSnackbarItems(() => []); - }; - - /** - * expose snackbar methods to window for debug purposes - * TODO: Check if it's really necessary - */ - window.snackbar = { - show, - hide, - hideAll, - }; - - return ( - - {!!snackbarItems && } - {children} - - ); -}; - -SnackbarProvider.defaultProps = { - service: null, -}; - -SnackbarProvider.propTypes = { - children: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.node), - PropTypes.node, - PropTypes.func, - ]).isRequired, - service: PropTypes.shape({ - setServiceImplementation: PropTypes.func, - }), -}; - -/** - * - * High Order Component to use the snackbar methods through a Class Component - * - */ -export const withSnackbar = Component => { - return function WrappedComponent(props) { - const snackbarContext = { - ...useSnackbarContext(), - }; - return ; - }; -}; - -export default SnackbarProvider; diff --git a/platform/ui/src/contextProviders/index.js b/platform/ui/src/contextProviders/index.js deleted file mode 100644 index e4ca06143..000000000 --- a/platform/ui/src/contextProviders/index.js +++ /dev/null @@ -1,20 +0,0 @@ -export { - default as ModalProvider, - useModal, - withModal, - ModalConsumer, -} from './ModalProvider.js'; -export { - default as SnackbarProvider, - useSnackbarContext, - withSnackbar, -} from './SnackbarProvider.js'; -export { - default as LanguageProvider, - withTranslation, -} from './LanguageProvider.js'; -export { - default as DialogProvider, - withDialog, - useDialog, -} from './DialogProvider.js'; diff --git a/platform/ui/src/design/styles/common/button.styl b/platform/ui/src/design/styles/common/button.styl deleted file mode 100644 index ea3f0b1eb..000000000 --- a/platform/ui/src/design/styles/common/button.styl +++ /dev/null @@ -1,53 +0,0 @@ -.btn-danger - color: #fff; - background-color: #d9534f; - border-color: #d43f3a; - -.btn-primary - color: #fff; - background-color: #337ab7; - border-color: #2e6da4; - -.btn-default - color: #333; - background-color: #fff; - border-color: #ccc; - -.btn - display: inline-block; - padding: 6px 12px; - margin-bottom: 0; - font-size: 14px; - font-weight: 400; - line-height: 1.42857143; - text-align: center; - white-space: nowrap; - vertical-align: middle; - -ms-touch-action: manipulation; - touch-action: manipulation; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - background-image: none; - border: 1px solid transparent; - border-radius: 4px; - -.btn.disabled, .btn[disabled], fieldset[disabled] .btn - cursor: not-allowed; - -webkit-box-shadow: none; - box-shadow: none; - opacity: .65; - -button.close - -webkit-appearance: none; - padding: 0; - cursor: pointer; - background: 0 0; - border: 0; - -.btn-group, .btn-group-vertical - position: relative; - display: inline-block; - vertical-align: middle; diff --git a/platform/ui/src/design/styles/common/form.styl b/platform/ui/src/design/styles/common/form.styl deleted file mode 100644 index 230c7b4d4..000000000 --- a/platform/ui/src/design/styles/common/form.styl +++ /dev/null @@ -1,121 +0,0 @@ -.form-themed - - table - color: var(--text-primary-color) - - th, td - font-size: 15px - font-weight: normal - - th - line-height: 60px - - td - line-height: 18px - padding: 0; - - // TODO: imported this from merged-styles.css - .p-r-1 - padding-right: 1rem !important; - - label - margin-bottom: 5px - // end TODO - - label.wrapperLabel - cursor: pointer - - label.wrapperLabel:not(.checkboxLabel) - cursor: pointer - display: flex - flex-direction: column - - .wrapperText - display: block - order: -1 - transition(color 0.3s ease) - - .btn, input[type=text], input[type=password], input[type=number] - &[disabled], &.disabled - &, &:hover, &:active - background-color: var(--ui-gray-darker) - border-color: var(--ui-gray-light) - color: var(--text-primary-color) - - & + .wrapperText - color: var(--text-primary-color) - cursor: auto - - input[type=text], input[type=password], input[type=number] - background-color: var(--ui-gray) - border-color: var(--ui-border-color) - color: var(--text-primary-color) - font-weight: normal - transition(background-color 0.3s ease\, border-color 0.3s ease) - - &:active, &:focus - background-color: var(--ui-gray-dark) - border: 2px solid var(--active-color) - box-shadow: none - - & + .wrapperText - color: var(--active-color) - - .btn-primary - background-color: var(--active-color) - border-collapse: var(--ui-border-color-active) - color: var(--ui-text-color-active) - transition(background-color 0.3s ease\, border-color 0.3s ease) - - &:hover, &:active, &:focus, &:focus:active - // TODO: 0.8 opacity - background-color: var(--ui-active-color) - border-collapse: var(--ui-border-color-active) - color: var(--ui-text-color-active) - - .form-control - background-color: #FFFFFF - border: 0 - border-radius(2px) - font-size: 14px - height: 30px - line-height: 16px - padding: 8px 9px 6px - -.form-control - display: block; - width: 100%; - height: 34px; - padding: 6px 12px; - font-size: 14px; - line-height: 1.42857143; - color: #555; - background-color: #fff; - background-image: none; - border: 1px solid #ccc; - border-radius: 4px; - box-shadow: inset 0 1px 1px rgba(0,0,0,.075); - - &:focus - border-color: #66afe9; - outline: 0; - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); - box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); - - &::-ms-expand - border: 0; - background-color: transparent; - - &[disabled], - &[readonly], - fieldset[disabled] & - background-color: @input-bg-disabled; - opacity: 1; - - &[disabled], - fieldset[disabled] & - cursor: @cursor-disabled; - -input[type=range] - display: block; - width: 100%; diff --git a/platform/ui/src/design/styles/common/global.styl b/platform/ui/src/design/styles/common/global.styl deleted file mode 100644 index af81a0882..000000000 --- a/platform/ui/src/design/styles/common/global.styl +++ /dev/null @@ -1,71 +0,0 @@ -* - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -.full-width - width: 100% - -.full-height - height: 100% - -.flex-h - display: flex - flex-direction: row - -.flex-v - display: flex - flex-direction: column - -.flex-grow - flex-grow: 1 - -.nowrap - white-space: nowrap - -.text-right - text-align: right; - -.text-center - text-align: center; - -.text-left - text-align: left; - -h1 - font-size: 36px; - -h3, h1 - font-family: inherit; - font-weight: 500; - line-height: 1.1; - margin-top: 20px; - margin-bottom: 10px; - -button, input, select, textarea - font-family: inherit; - font-size: inherit; - line-height: inherit; - -.row - margin-right: -15px; - margin-left: -15px; - -.pull-left - float: left!important; - -.pull-right - float: right!important; - -.fade - opacity: 0; - -webkit-transition: opacity .15s linear; - -o-transition: opacity .15s linear; - transition: opacity .15s linear; - -.fade.in - opacity: 1; - -a - color: #337ab7; - text-decoration: none; diff --git a/platform/ui/src/design/styles/common/modal.styl b/platform/ui/src/design/styles/common/modal.styl deleted file mode 100644 index ad0e80603..000000000 --- a/platform/ui/src/design/styles/common/modal.styl +++ /dev/null @@ -1,203 +0,0 @@ - -.modal-open - overflow: hidden; - -.modal - overflow: hidden; - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1050; - -webkit-overflow-scrolling: touch; - outline: 0; - background: rgba(0,0,0,0.5); - - .modal-dialog - - .modal-content - background-color: var(--ui-gray-darker) - border-color: var(--ui-border-color) - color: var(--text-secondary-color) - border-radius(6px) - border: 0 - - .modal-header, .modal-footer - border-color: var(--ui-border-color) - - .dialog-separator, - .dialog-separator-before, - .dialog-separator-after - position: relative - height: 40px; - - .dialog-separator:before, - .dialog-separator:after, - .dialog-separator-before:before, - .dialog-separator-after:after - background-color: #000000 - box-shadow(-50px 0 0 #000000\, 50px 0 0 #000000) - content: ' ' - display: block - height: 3px - left: 0 - position: absolute - width: 100% - - .dialog-separator:before, - .dialog-separator-before:before - top: -3px - - .dialog-separator:after, - .dialog-separator-after:after - bottom: -3px - - .modal-body - color: var(--text-primary-color) - padding: 16px 22px 0px - position: relative - - ::-webkit-scrollbar { - width: 6px; - background-color: var(--ui-gray-dark); - } - - ::-webkit-scrollbar-thumb { - background-color: var(--ui-gray-light); - border-radius: 5px; - } - - .modal-header - border-bottom-width: 3px - border-bottom-style: solid - border-bottom-color: #000000 - padding: 19px 22px 17px - position: relative - - h4 - color: var(--text-secondary-color) - font-size: 20px - font-weight: 500 - line-height: 24px - padding-right: 24px - - .modal-footer - border-top: 0 - padding-top: 0 - - .card-round - background-color: var(--ui-gray-dark) - border-radius(5px) - padding: 10px - - .modal-header - position: relative - - // When fading in the modal, animate it to slide down - &.fade .modal-dialog - -webkit-transition: transform .3s ease-out; - -o-transition: transform .3s ease-out; - transition: transform .3s ease-out; - -webkit-transform: translate(0,-25%); - -ms-transform: translate(0,-25%); - -o-transform: translate(0,-25%); - transform: translate(0,-25%); - - &.in .modal-dialog - transform: translate(0,0) - -.modal-open .modal - overflow-x: hidden; - overflow-y: auto; - -.modal-dialog - position: relative; - width: auto; - margin: 10px; - -.modal-content - position: relative; - background-color: #fff; - border: 1px solid rgba(0,0,0,.2); - border-radius: 6px; - -webkit-box-shadow: 0 3px 9px rgba(0,0,0,.5); - box-shadow: 0 3px 9px rgba(0,0,0,.5); - background-clip: padding-box; - outline: 0; - -.modal-backdrop - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1050; - background-color: #fff; - - &.fade - opacity: 0; - - &.in - opacity: 0; - -.modal-header - padding: 15px; - border-bottom: 1px solid #e5e5e5; - -.modal-header .close - margin-top: -2px; - -.modal-title - margin: 0; - line-height: 1.42857143; - -.modal-body - position: relative; - padding: 15px; - -.modal-footer - padding: 15px; - text-align: right; - border-top: 1px solid #e5e5e5; - - .btn+.btn - margin-left: 5px; - margin-bottom: 0; - - .btn-group .btn+.btn - margin-left: -1px; - - .btn-block+.btn-block - margin-left: 0; - -.modal-scrollbar-measure - position: absolute; - top: -9999px; - width: 50px; - height: 50px; - overflow: scroll; - -@media (min-width: 768px) - .modal-dialog - width: 600px; - margin: 30px auto; - - .modal-content - -webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5); - box-shadow: 0 5px 15px rgba(0,0,0,.5); - -@media (min-width: 992px) - .modal-lg - width: 900px; - -.button-close, .modal-dialog button.close - color: var(--text-secondary-color) - height: 25px - opacity: 1 - overflow: hidden - text-align: center - text-shadow: none - width: 25px - font-size:25px - font-weight: lighter diff --git a/platform/ui/src/design/styles/common/navbar.styl b/platform/ui/src/design/styles/common/navbar.styl deleted file mode 100644 index dda831789..000000000 --- a/platform/ui/src/design/styles/common/navbar.styl +++ /dev/null @@ -1,57 +0,0 @@ -.nav-tabs - border-bottom: 0 - margin-bottom: 3px - position: relative - z-index: 1 - - :hover - cursor: pointer - - &>li - font-size: 14px - font-weight: normal - height: 40px - line-height: 40px - margin-bottom: 0 - - &>button - display: block - width: 100% - line-height: inherit - margin: 0 - height: inherit - padding: 0 10px 0 10px - outline: none - - &:after - background-color: transparent - bottom: -3px - content: ' ' - display: block - height: 3px - transition(background-color 0.3s ease) - width: 100% - - &>button, &.active>button - &, &:hover, &:active, &:focus - color: var(--active-color) - background-color: transparent - border: 0 - - &.active>button - font-weight: bold - - &:after - background-color: var(--active-color) - -.nav - padding-left: 0; - list-style: none; - - > li - position: relative; - display: block; - - > li - float: left; - margin-bottom: -1px; diff --git a/platform/ui/src/design/styles/common/state.styl b/platform/ui/src/design/styles/common/state.styl deleted file mode 100644 index 8c438f741..000000000 --- a/platform/ui/src/design/styles/common/state.styl +++ /dev/null @@ -1,25 +0,0 @@ -.form-themed .state-error, .state-error - - &.wrapperLabel input + .wrapperText - color: var(--state-error-text) - - &+.tooltip - - .tooltip-inner - color: white - background-color: var(--state-error-border) - - &.top .tooltip-arrow - border-top-color: var(--state-error-border) - &.right .tooltip-arrow - border-right-color: var(--state-error-border) - &.bottom .tooltip-arrow - border-bottom-color: var(--state-error-border) - &.left .tooltip-arrow - border-left-color: var(--state-error-border) - - - &:not(.component-group) - &.form-control, .form-control - background-color: var(--state-error-border) - border-color: var(--state-error-border) diff --git a/platform/ui/src/design/styles/common/table.styl b/platform/ui/src/design/styles/common/table.styl deleted file mode 100644 index 26485d4e7..000000000 --- a/platform/ui/src/design/styles/common/table.styl +++ /dev/null @@ -1,15 +0,0 @@ -.table-responsive - min-height: .01%; - overflow-x: auto; - -.table - width: 100%; - max-width: 100%; - margin-bottom: 20px; - -table - border-spacing: 0; - border-collapse: collapse; - -th - text-align: left; diff --git a/platform/ui/src/elements/Icon/Icon.js b/platform/ui/src/elements/Icon/Icon.js deleted file mode 100644 index 5791fee68..000000000 --- a/platform/ui/src/elements/Icon/Icon.js +++ /dev/null @@ -1,15 +0,0 @@ -import './Icon.styl'; - -import PropTypes from 'prop-types'; -import getIcon from './getIcon.js'; - -const Icon = props => { - return getIcon(props.name, props); -}; - -Icon.propTypes = { - /** The string name of the icon to display */ - name: PropTypes.string.isRequired, -}; - -export default Icon; diff --git a/platform/ui/src/elements/Icon/Icon.styl b/platform/ui/src/elements/Icon/Icon.styl deleted file mode 100644 index 12ded599c..000000000 --- a/platform/ui/src/elements/Icon/Icon.styl +++ /dev/null @@ -1,11 +0,0 @@ -.icon-pulse - fa-spin 1s infinite steps(8) - -.icon-spin { - animation: spin 2s linear infinite; -} - -@keyframes fa-spin{ - 0%{ transform:rotate(0deg) } - to{ transform:rotate(1turn) } -} diff --git a/platform/ui/src/elements/Icon/__docs__/icon.mdx b/platform/ui/src/elements/Icon/__docs__/icon.mdx deleted file mode 100644 index c5b8f07a3..000000000 --- a/platform/ui/src/elements/Icon/__docs__/icon.mdx +++ /dev/null @@ -1,84 +0,0 @@ ---- -name: Icon -menu: Elements -route: /elements/icon ---- - -import { Playground, Props } from 'docz'; -import { State } from 'react-powerplug'; -import { Icon, ICONS } from './../index.js'; - -# Icon - -## Basic usage - - -
    - {Object.keys(ICONS) - .sort() - .map((name, i) => { - return ( - -
    - -
    - {name} -
    -
    -
    - ); - })} -
    -
    - -The `` component inherits the color of its parent, and sizing is based -on its parent's `font-size`. Each icon has an `aria-labelledby` to assist screen -readers. - -We use `airbnb`'s [`babel-plugin-inline-react-svg`][airbnb] to automate -optimizing SVG files with [SVGO][svgo] and to create animatable React SVG -components that can be requested asynchronously. You can configure SVGO's -plugins [by following the advice laid out here][svgo-configure] - -## API - - - -The `Icon` component takes a single prop of `name`, which indicates which Icon -should be displayed. Again, the icon responds to contextual text/font styles. - -## Attribution - -A large number of these icons are from [Font Awesome 5's free set.][fa-license] -Some attribution is likely required, depending on your usage. Sometimes as -little as a comment included side-by-side with the accompanying SVG icon. - - - - -[fa-license]: https://fontawesome.com/license -[airbnb]: https://github.com/airbnb/babel-plugin-inline-react-svg -[svgo]: https://github.com/svg/svgo/ -[svgo-configure]: https://github.com/airbnb/babel-plugin-inline-react-svg/issues/9#issuecomment-310178317) - diff --git a/platform/ui/src/elements/Icon/icons/3d-rotate.svg b/platform/ui/src/elements/Icon/icons/3d-rotate.svg deleted file mode 100644 index f9d2daadb..000000000 --- a/platform/ui/src/elements/Icon/icons/3d-rotate.svg +++ /dev/null @@ -1,13 +0,0 @@ - - 3D Rotate - - - - diff --git a/platform/ui/src/elements/Icon/icons/adjust.svg b/platform/ui/src/elements/Icon/icons/adjust.svg deleted file mode 100644 index ae2747644..000000000 --- a/platform/ui/src/elements/Icon/icons/adjust.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Adjust - - diff --git a/platform/ui/src/elements/Icon/icons/angle-double-down.svg b/platform/ui/src/elements/Icon/icons/angle-double-down.svg deleted file mode 100644 index 04d9d9fcf..000000000 --- a/platform/ui/src/elements/Icon/icons/angle-double-down.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Angle Double Down - - diff --git a/platform/ui/src/elements/Icon/icons/angle-double-up.svg b/platform/ui/src/elements/Icon/icons/angle-double-up.svg deleted file mode 100644 index 07419bb65..000000000 --- a/platform/ui/src/elements/Icon/icons/angle-double-up.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Angle Double Up - - diff --git a/platform/ui/src/elements/Icon/icons/angle-left.svg b/platform/ui/src/elements/Icon/icons/angle-left.svg deleted file mode 100644 index 15fb36b07..000000000 --- a/platform/ui/src/elements/Icon/icons/angle-left.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Angle Left - - diff --git a/platform/ui/src/elements/Icon/icons/arrows-alt-h.svg b/platform/ui/src/elements/Icon/icons/arrows-alt-h.svg deleted file mode 100644 index c96cb738c..000000000 --- a/platform/ui/src/elements/Icon/icons/arrows-alt-h.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Arrows Alt H - - diff --git a/platform/ui/src/elements/Icon/icons/arrows-alt-v.svg b/platform/ui/src/elements/Icon/icons/arrows-alt-v.svg deleted file mode 100644 index f1e777ddd..000000000 --- a/platform/ui/src/elements/Icon/icons/arrows-alt-v.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Arrows Alt V - - diff --git a/platform/ui/src/elements/Icon/icons/arrows.svg b/platform/ui/src/elements/Icon/icons/arrows.svg deleted file mode 100644 index 4aca49cff..000000000 --- a/platform/ui/src/elements/Icon/icons/arrows.svg +++ /dev/null @@ -1,22 +0,0 @@ - - Arrows - - - - - - - - - diff --git a/platform/ui/src/elements/Icon/icons/bars.svg b/platform/ui/src/elements/Icon/icons/bars.svg deleted file mode 100644 index 3b735f90e..000000000 --- a/platform/ui/src/elements/Icon/icons/bars.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Bars - - diff --git a/platform/ui/src/elements/Icon/icons/brain.svg b/platform/ui/src/elements/Icon/icons/brain.svg deleted file mode 100644 index f03f67ace..000000000 --- a/platform/ui/src/elements/Icon/icons/brain.svg +++ /dev/null @@ -1,24 +0,0 @@ - - Brain - - - - - - - - - - diff --git a/platform/ui/src/elements/Icon/icons/caret-down.svg b/platform/ui/src/elements/Icon/icons/caret-down.svg deleted file mode 100644 index cdebbd8f5..000000000 --- a/platform/ui/src/elements/Icon/icons/caret-down.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Caret Down - - diff --git a/platform/ui/src/elements/Icon/icons/caret-up.svg b/platform/ui/src/elements/Icon/icons/caret-up.svg deleted file mode 100644 index 611ca870e..000000000 --- a/platform/ui/src/elements/Icon/icons/caret-up.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Caret Up - - diff --git a/platform/ui/src/elements/Icon/icons/check-circle-o.svg b/platform/ui/src/elements/Icon/icons/check-circle-o.svg deleted file mode 100644 index 98b247319..000000000 --- a/platform/ui/src/elements/Icon/icons/check-circle-o.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Check Circle - - diff --git a/platform/ui/src/elements/Icon/icons/check-circle.svg b/platform/ui/src/elements/Icon/icons/check-circle.svg deleted file mode 100644 index 7f54493fe..000000000 --- a/platform/ui/src/elements/Icon/icons/check-circle.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Check Circle - - diff --git a/platform/ui/src/elements/Icon/icons/check.svg b/platform/ui/src/elements/Icon/icons/check.svg deleted file mode 100644 index 22d93a1fb..000000000 --- a/platform/ui/src/elements/Icon/icons/check.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Check - - diff --git a/platform/ui/src/elements/Icon/icons/chevron-down.svg b/platform/ui/src/elements/Icon/icons/chevron-down.svg deleted file mode 100644 index 1c28b0512..000000000 --- a/platform/ui/src/elements/Icon/icons/chevron-down.svg +++ /dev/null @@ -1,14 +0,0 @@ - - Chevron Down - - diff --git a/platform/ui/src/elements/Icon/icons/circle-notch.svg b/platform/ui/src/elements/Icon/icons/circle-notch.svg deleted file mode 100644 index 1a9429bda..000000000 --- a/platform/ui/src/elements/Icon/icons/circle-notch.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Circle Notch - - diff --git a/platform/ui/src/elements/Icon/icons/circle-o.svg b/platform/ui/src/elements/Icon/icons/circle-o.svg deleted file mode 100644 index c921f1534..000000000 --- a/platform/ui/src/elements/Icon/icons/circle-o.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Circle Outline - - diff --git a/platform/ui/src/elements/Icon/icons/circle.svg b/platform/ui/src/elements/Icon/icons/circle.svg deleted file mode 100644 index 99b9995b3..000000000 --- a/platform/ui/src/elements/Icon/icons/circle.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Circle - - diff --git a/platform/ui/src/elements/Icon/icons/cog.svg b/platform/ui/src/elements/Icon/icons/cog.svg deleted file mode 100644 index 017fc0e6d..000000000 --- a/platform/ui/src/elements/Icon/icons/cog.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Cog - - diff --git a/platform/ui/src/elements/Icon/icons/create-comment.svg b/platform/ui/src/elements/Icon/icons/create-comment.svg deleted file mode 100644 index aec47a3ae..000000000 --- a/platform/ui/src/elements/Icon/icons/create-comment.svg +++ /dev/null @@ -1,12 +0,0 @@ - - Create Comment - - - diff --git a/platform/ui/src/elements/Icon/icons/create-screen-capture.svg b/platform/ui/src/elements/Icon/icons/create-screen-capture.svg deleted file mode 100644 index cf7d8433d..000000000 --- a/platform/ui/src/elements/Icon/icons/create-screen-capture.svg +++ /dev/null @@ -1,15 +0,0 @@ - - Create Screen Capture - - - - - - diff --git a/platform/ui/src/elements/Icon/icons/crosshairs.svg b/platform/ui/src/elements/Icon/icons/crosshairs.svg deleted file mode 100644 index 4d53a1042..000000000 --- a/platform/ui/src/elements/Icon/icons/crosshairs.svg +++ /dev/null @@ -1,15 +0,0 @@ - - Crosshairs - - - diff --git a/platform/ui/src/elements/Icon/icons/cube.svg b/platform/ui/src/elements/Icon/icons/cube.svg deleted file mode 100644 index 6026cdf63..000000000 --- a/platform/ui/src/elements/Icon/icons/cube.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - Cube - - diff --git a/platform/ui/src/elements/Icon/icons/database.svg b/platform/ui/src/elements/Icon/icons/database.svg deleted file mode 100644 index 323d566e2..000000000 --- a/platform/ui/src/elements/Icon/icons/database.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Database - - diff --git a/platform/ui/src/elements/Icon/icons/dot-circle.svg b/platform/ui/src/elements/Icon/icons/dot-circle.svg deleted file mode 100644 index 3533dde76..000000000 --- a/platform/ui/src/elements/Icon/icons/dot-circle.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Dot Circle - - diff --git a/platform/ui/src/elements/Icon/icons/edit.svg b/platform/ui/src/elements/Icon/icons/edit.svg deleted file mode 100644 index c7554488d..000000000 --- a/platform/ui/src/elements/Icon/icons/edit.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Edit - - diff --git a/platform/ui/src/elements/Icon/icons/ellipse-circle.svg b/platform/ui/src/elements/Icon/icons/ellipse-circle.svg deleted file mode 100644 index a0c591c2b..000000000 --- a/platform/ui/src/elements/Icon/icons/ellipse-circle.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Ellipse Circle - - diff --git a/platform/ui/src/elements/Icon/icons/ellipse-h.svg b/platform/ui/src/elements/Icon/icons/ellipse-h.svg deleted file mode 100644 index 1dbb78331..000000000 --- a/platform/ui/src/elements/Icon/icons/ellipse-h.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Ellipse Horizontal - - diff --git a/platform/ui/src/elements/Icon/icons/ellipse-v.svg b/platform/ui/src/elements/Icon/icons/ellipse-v.svg deleted file mode 100644 index 01a0d719a..000000000 --- a/platform/ui/src/elements/Icon/icons/ellipse-v.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Ellipse Vertical - - diff --git a/platform/ui/src/elements/Icon/icons/eraser.svg b/platform/ui/src/elements/Icon/icons/eraser.svg deleted file mode 100644 index 7e9361f9b..000000000 --- a/platform/ui/src/elements/Icon/icons/eraser.svg +++ /dev/null @@ -1,15 +0,0 @@ - - Eraser - - diff --git a/platform/ui/src/elements/Icon/icons/exclamation-circle.svg b/platform/ui/src/elements/Icon/icons/exclamation-circle.svg deleted file mode 100644 index f3a1d4146..000000000 --- a/platform/ui/src/elements/Icon/icons/exclamation-circle.svg +++ /dev/null @@ -1,13 +0,0 @@ - - Exclamation Circle - - diff --git a/platform/ui/src/elements/Icon/icons/exclamation-triangle.svg b/platform/ui/src/elements/Icon/icons/exclamation-triangle.svg deleted file mode 100644 index 65da6f8e8..000000000 --- a/platform/ui/src/elements/Icon/icons/exclamation-triangle.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Exclamation Triangle - - diff --git a/platform/ui/src/elements/Icon/icons/fast-backward.svg b/platform/ui/src/elements/Icon/icons/fast-backward.svg deleted file mode 100644 index c1696b98f..000000000 --- a/platform/ui/src/elements/Icon/icons/fast-backward.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/platform/ui/src/elements/Icon/icons/fast-forward.svg b/platform/ui/src/elements/Icon/icons/fast-forward.svg deleted file mode 100644 index cd6bb9b7c..000000000 --- a/platform/ui/src/elements/Icon/icons/fast-forward.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/platform/ui/src/elements/Icon/icons/info.svg b/platform/ui/src/elements/Icon/icons/info.svg deleted file mode 100644 index 9e802a69f..000000000 --- a/platform/ui/src/elements/Icon/icons/info.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Info - - diff --git a/platform/ui/src/elements/Icon/icons/inline-edit.svg b/platform/ui/src/elements/Icon/icons/inline-edit.svg deleted file mode 100644 index 12c111b2c..000000000 --- a/platform/ui/src/elements/Icon/icons/inline-edit.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Inline Edit - - diff --git a/platform/ui/src/elements/Icon/icons/level.svg b/platform/ui/src/elements/Icon/icons/level.svg deleted file mode 100644 index c79ffc2f6..000000000 --- a/platform/ui/src/elements/Icon/icons/level.svg +++ /dev/null @@ -1,13 +0,0 @@ - - Level - - - diff --git a/platform/ui/src/elements/Icon/icons/link-circles.svg b/platform/ui/src/elements/Icon/icons/link-circles.svg deleted file mode 100644 index fd980320a..000000000 --- a/platform/ui/src/elements/Icon/icons/link-circles.svg +++ /dev/null @@ -1,15 +0,0 @@ - - Link Circles - - - - - diff --git a/platform/ui/src/elements/Icon/icons/link.svg b/platform/ui/src/elements/Icon/icons/link.svg deleted file mode 100644 index 28faa4853..000000000 --- a/platform/ui/src/elements/Icon/icons/link.svg +++ /dev/null @@ -1,12 +0,0 @@ - - Link - - - diff --git a/platform/ui/src/elements/Icon/icons/list.svg b/platform/ui/src/elements/Icon/icons/list.svg deleted file mode 100644 index 15e7a6c95..000000000 --- a/platform/ui/src/elements/Icon/icons/list.svg +++ /dev/null @@ -1,11 +0,0 @@ - - List - - diff --git a/platform/ui/src/elements/Icon/icons/liver.svg b/platform/ui/src/elements/Icon/icons/liver.svg deleted file mode 100644 index a099709f4..000000000 --- a/platform/ui/src/elements/Icon/icons/liver.svg +++ /dev/null @@ -1,16 +0,0 @@ - - Liver - - - - diff --git a/platform/ui/src/elements/Icon/icons/lock-alt.svg b/platform/ui/src/elements/Icon/icons/lock-alt.svg deleted file mode 100644 index 570a16de6..000000000 --- a/platform/ui/src/elements/Icon/icons/lock-alt.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Lock - - diff --git a/platform/ui/src/elements/Icon/icons/lock.svg b/platform/ui/src/elements/Icon/icons/lock.svg deleted file mode 100644 index 6a43ae317..000000000 --- a/platform/ui/src/elements/Icon/icons/lock.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Lock - - diff --git a/platform/ui/src/elements/Icon/icons/lung.svg b/platform/ui/src/elements/Icon/icons/lung.svg deleted file mode 100644 index 2de91333c..000000000 --- a/platform/ui/src/elements/Icon/icons/lung.svg +++ /dev/null @@ -1,25 +0,0 @@ - - Lung - - - - - - - diff --git a/platform/ui/src/elements/Icon/icons/measure-non-target.svg b/platform/ui/src/elements/Icon/icons/measure-non-target.svg deleted file mode 100644 index 6c6c55f61..000000000 --- a/platform/ui/src/elements/Icon/icons/measure-non-target.svg +++ /dev/null @@ -1,29 +0,0 @@ - - Measure Non-Target - - - - diff --git a/platform/ui/src/elements/Icon/icons/measure-target-cr.svg b/platform/ui/src/elements/Icon/icons/measure-target-cr.svg deleted file mode 100644 index 474136ac7..000000000 --- a/platform/ui/src/elements/Icon/icons/measure-target-cr.svg +++ /dev/null @@ -1,23 +0,0 @@ - - Measure Target CR - - CR - - - diff --git a/platform/ui/src/elements/Icon/icons/measure-target-ne.svg b/platform/ui/src/elements/Icon/icons/measure-target-ne.svg deleted file mode 100644 index 492a880e7..000000000 --- a/platform/ui/src/elements/Icon/icons/measure-target-ne.svg +++ /dev/null @@ -1,16 +0,0 @@ - - Measure Target NE - NE - - diff --git a/platform/ui/src/elements/Icon/icons/measure-target-un.svg b/platform/ui/src/elements/Icon/icons/measure-target-un.svg deleted file mode 100644 index 5ba5eb223..000000000 --- a/platform/ui/src/elements/Icon/icons/measure-target-un.svg +++ /dev/null @@ -1,23 +0,0 @@ - - Measure Target UN - - UN - - - diff --git a/platform/ui/src/elements/Icon/icons/measure-target.svg b/platform/ui/src/elements/Icon/icons/measure-target.svg deleted file mode 100644 index 19596906a..000000000 --- a/platform/ui/src/elements/Icon/icons/measure-target.svg +++ /dev/null @@ -1,13 +0,0 @@ - - Measure Target - - - diff --git a/platform/ui/src/elements/Icon/icons/measure-temp.svg b/platform/ui/src/elements/Icon/icons/measure-temp.svg deleted file mode 100644 index fb2e2b98b..000000000 --- a/platform/ui/src/elements/Icon/icons/measure-temp.svg +++ /dev/null @@ -1,16 +0,0 @@ - - Measure Temp - - - - - - diff --git a/platform/ui/src/elements/Icon/icons/object-group.svg b/platform/ui/src/elements/Icon/icons/object-group.svg deleted file mode 100644 index edd4bc189..000000000 --- a/platform/ui/src/elements/Icon/icons/object-group.svg +++ /dev/null @@ -1,20 +0,0 @@ - - Object Group - - - - - diff --git a/platform/ui/src/elements/Icon/icons/ohif-logo.svg b/platform/ui/src/elements/Icon/icons/ohif-logo.svg deleted file mode 100644 index f6525ab90..000000000 --- a/platform/ui/src/elements/Icon/icons/ohif-logo.svg +++ /dev/null @@ -1,17 +0,0 @@ - - OHIF Logo - - - - - diff --git a/platform/ui/src/elements/Icon/icons/ohif-text-logo.svg b/platform/ui/src/elements/Icon/icons/ohif-text-logo.svg deleted file mode 100644 index f06a067b5..000000000 --- a/platform/ui/src/elements/Icon/icons/ohif-text-logo.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/platform/ui/src/elements/Icon/icons/oval.svg b/platform/ui/src/elements/Icon/icons/oval.svg deleted file mode 100644 index 0a69e6b11..000000000 --- a/platform/ui/src/elements/Icon/icons/oval.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Oval - - diff --git a/platform/ui/src/elements/Icon/icons/palette.svg b/platform/ui/src/elements/Icon/icons/palette.svg deleted file mode 100644 index 04f596ba1..000000000 --- a/platform/ui/src/elements/Icon/icons/palette.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Pallete - - diff --git a/platform/ui/src/elements/Icon/icons/play.svg b/platform/ui/src/elements/Icon/icons/play.svg deleted file mode 100644 index 64ca7a5e3..000000000 --- a/platform/ui/src/elements/Icon/icons/play.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/platform/ui/src/elements/Icon/icons/plus.svg b/platform/ui/src/elements/Icon/icons/plus.svg deleted file mode 100644 index 6512e1116..000000000 --- a/platform/ui/src/elements/Icon/icons/plus.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Add - - diff --git a/platform/ui/src/elements/Icon/icons/power-off.svg b/platform/ui/src/elements/Icon/icons/power-off.svg deleted file mode 100644 index 3dd5dcf20..000000000 --- a/platform/ui/src/elements/Icon/icons/power-off.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Power Off - - diff --git a/platform/ui/src/elements/Icon/icons/reset.svg b/platform/ui/src/elements/Icon/icons/reset.svg deleted file mode 100644 index 8b2c9aa53..000000000 --- a/platform/ui/src/elements/Icon/icons/reset.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Reset - - diff --git a/platform/ui/src/elements/Icon/icons/rotate-right.svg b/platform/ui/src/elements/Icon/icons/rotate-right.svg deleted file mode 100644 index 106284fa0..000000000 --- a/platform/ui/src/elements/Icon/icons/rotate-right.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Rotate Right - - diff --git a/platform/ui/src/elements/Icon/icons/rotate.svg b/platform/ui/src/elements/Icon/icons/rotate.svg deleted file mode 100644 index 2dded38c4..000000000 --- a/platform/ui/src/elements/Icon/icons/rotate.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Rotate - - diff --git a/platform/ui/src/elements/Icon/icons/save-regular.svg b/platform/ui/src/elements/Icon/icons/save-regular.svg deleted file mode 100644 index cd3eb9592..000000000 --- a/platform/ui/src/elements/Icon/icons/save-regular.svg +++ /dev/null @@ -1,11 +0,0 @@ - diff --git a/platform/ui/src/elements/Icon/icons/search-plus.svg b/platform/ui/src/elements/Icon/icons/search-plus.svg deleted file mode 100644 index f130654c5..000000000 --- a/platform/ui/src/elements/Icon/icons/search-plus.svg +++ /dev/null @@ -1,14 +0,0 @@ - - Search Plus - - - - - diff --git a/platform/ui/src/elements/Icon/icons/search.svg b/platform/ui/src/elements/Icon/icons/search.svg deleted file mode 100644 index a313de17d..000000000 --- a/platform/ui/src/elements/Icon/icons/search.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Search - - diff --git a/platform/ui/src/elements/Icon/icons/soft-tissue.svg b/platform/ui/src/elements/Icon/icons/soft-tissue.svg deleted file mode 100644 index 730c69450..000000000 --- a/platform/ui/src/elements/Icon/icons/soft-tissue.svg +++ /dev/null @@ -1,16 +0,0 @@ - - Soft Tissue - - diff --git a/platform/ui/src/elements/Icon/icons/sort-down.svg b/platform/ui/src/elements/Icon/icons/sort-down.svg deleted file mode 100644 index 6306b4884..000000000 --- a/platform/ui/src/elements/Icon/icons/sort-down.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Sort Down - - diff --git a/platform/ui/src/elements/Icon/icons/sort-up.svg b/platform/ui/src/elements/Icon/icons/sort-up.svg deleted file mode 100644 index ab5e0a836..000000000 --- a/platform/ui/src/elements/Icon/icons/sort-up.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Sort Up - - diff --git a/platform/ui/src/elements/Icon/icons/sort.svg b/platform/ui/src/elements/Icon/icons/sort.svg deleted file mode 100644 index 1ade70182..000000000 --- a/platform/ui/src/elements/Icon/icons/sort.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Sort - - diff --git a/platform/ui/src/elements/Icon/icons/square-o.svg b/platform/ui/src/elements/Icon/icons/square-o.svg deleted file mode 100644 index 16d36444c..000000000 --- a/platform/ui/src/elements/Icon/icons/square-o.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Square Outline - - diff --git a/platform/ui/src/elements/Icon/icons/star.svg b/platform/ui/src/elements/Icon/icons/star.svg deleted file mode 100644 index 265a0e6bb..000000000 --- a/platform/ui/src/elements/Icon/icons/star.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Star - - diff --git a/platform/ui/src/elements/Icon/icons/step-backward.svg b/platform/ui/src/elements/Icon/icons/step-backward.svg deleted file mode 100644 index 78a15fa7d..000000000 --- a/platform/ui/src/elements/Icon/icons/step-backward.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/platform/ui/src/elements/Icon/icons/step-forward.svg b/platform/ui/src/elements/Icon/icons/step-forward.svg deleted file mode 100644 index c42eabf65..000000000 --- a/platform/ui/src/elements/Icon/icons/step-forward.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - diff --git a/platform/ui/src/elements/Icon/icons/stop.svg b/platform/ui/src/elements/Icon/icons/stop.svg deleted file mode 100644 index 9d124d325..000000000 --- a/platform/ui/src/elements/Icon/icons/stop.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Stop - - diff --git a/platform/ui/src/elements/Icon/icons/sun.svg b/platform/ui/src/elements/Icon/icons/sun.svg deleted file mode 100644 index 08158098d..000000000 --- a/platform/ui/src/elements/Icon/icons/sun.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Sun - - diff --git a/platform/ui/src/elements/Icon/icons/th-large.svg b/platform/ui/src/elements/Icon/icons/th-large.svg deleted file mode 100644 index 876289bc4..000000000 --- a/platform/ui/src/elements/Icon/icons/th-large.svg +++ /dev/null @@ -1,12 +0,0 @@ - - TH Large - - diff --git a/platform/ui/src/elements/Icon/icons/th-list.svg b/platform/ui/src/elements/Icon/icons/th-list.svg deleted file mode 100644 index e69919bf8..000000000 --- a/platform/ui/src/elements/Icon/icons/th-list.svg +++ /dev/null @@ -1,11 +0,0 @@ - - TH List - - diff --git a/platform/ui/src/elements/Icon/icons/th.svg b/platform/ui/src/elements/Icon/icons/th.svg deleted file mode 100644 index b1df15afa..000000000 --- a/platform/ui/src/elements/Icon/icons/th.svg +++ /dev/null @@ -1,11 +0,0 @@ - - TH - - diff --git a/platform/ui/src/elements/Icon/icons/times.svg b/platform/ui/src/elements/Icon/icons/times.svg deleted file mode 100644 index 27f875dce..000000000 --- a/platform/ui/src/elements/Icon/icons/times.svg +++ /dev/null @@ -1,12 +0,0 @@ - - Times - - diff --git a/platform/ui/src/elements/Icon/icons/trash.svg b/platform/ui/src/elements/Icon/icons/trash.svg deleted file mode 100644 index 20bca7e22..000000000 --- a/platform/ui/src/elements/Icon/icons/trash.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Trash - - diff --git a/platform/ui/src/elements/Icon/icons/unlink.svg b/platform/ui/src/elements/Icon/icons/unlink.svg deleted file mode 100644 index 37c53bbb9..000000000 --- a/platform/ui/src/elements/Icon/icons/unlink.svg +++ /dev/null @@ -1,11 +0,0 @@ - - Unlink - - diff --git a/platform/ui/src/elements/Icon/icons/user.svg b/platform/ui/src/elements/Icon/icons/user.svg deleted file mode 100644 index c55700132..000000000 --- a/platform/ui/src/elements/Icon/icons/user.svg +++ /dev/null @@ -1,11 +0,0 @@ - - User - - diff --git a/platform/ui/src/elements/Icon/icons/youtube.svg b/platform/ui/src/elements/Icon/icons/youtube.svg deleted file mode 100644 index 00db81c23..000000000 --- a/platform/ui/src/elements/Icon/icons/youtube.svg +++ /dev/null @@ -1,11 +0,0 @@ - - YouTube Logo - - diff --git a/platform/ui/src/elements/Icon/index.js b/platform/ui/src/elements/Icon/index.js deleted file mode 100644 index 3d83dbf3e..000000000 --- a/platform/ui/src/elements/Icon/index.js +++ /dev/null @@ -1,4 +0,0 @@ -import { ICONS } from './getIcon.js'; -import Icon from './Icon.js'; - -export { Icon, ICONS }; diff --git a/platform/ui/src/elements/Svg/Svg.js b/platform/ui/src/elements/Svg/Svg.js deleted file mode 100644 index 41ea577f5..000000000 --- a/platform/ui/src/elements/Svg/Svg.js +++ /dev/null @@ -1,14 +0,0 @@ -import './Svg.styl'; - -import PropTypes from 'prop-types'; -import getSvg from './getSvg.js'; - -const Svg = props => { - return getSvg(props.name, props); -}; - -Svg.propTypes = { - name: PropTypes.string.isRequired, -}; - -export { Svg }; diff --git a/platform/ui/src/elements/Svg/Svg.styl b/platform/ui/src/elements/Svg/Svg.styl deleted file mode 100644 index e69de29bb..000000000 diff --git a/platform/ui/src/elements/Svg/__docs__/svg.mdx b/platform/ui/src/elements/Svg/__docs__/svg.mdx deleted file mode 100644 index 6fe66a7ee..000000000 --- a/platform/ui/src/elements/Svg/__docs__/svg.mdx +++ /dev/null @@ -1,57 +0,0 @@ ---- -name: Svg -menu: Elements -route: /elements/svg ---- - -import { Playground, Props } from 'docz'; -import { State } from 'react-powerplug'; -import { Svg, SVGS } from './../index.js'; - -# Svg - -## Basic usage - - -
    - {Object.keys(SVGS) - .sort() - .map((name, i) => { - return ( - -
    - -
    - {name} -
    -
    -
    - ); - })} -
    -
    - -## API - - diff --git a/platform/ui/src/elements/Svg/getSvg.js b/platform/ui/src/elements/Svg/getSvg.js deleted file mode 100644 index 4933fc121..000000000 --- a/platform/ui/src/elements/Svg/getSvg.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -// Svgs -import ohifLogoText from './svgs/ohif-logo-text.svg'; -import ohifLogoWrappedText from './svgs/ohif-logo-wrapped-text.svg'; - -const SVGS = { - 'ohif-logo-wrapped-text': ohifLogoWrappedText, - 'ohif-logo-text': ohifLogoText, -}; - -/** - * Return the matching SVG as a React Component. - * Results in an inlined SVG Element. If there's no match, - * return `null` - */ -export default function getSvg(key, props) { - if (!key || !SVGS[key]) { - return React.createElement('div', null, 'Missing SVG'); - } - - return React.createElement(SVGS[key], props); -} - -export { SVGS }; diff --git a/platform/ui/src/elements/Svg/index.js b/platform/ui/src/elements/Svg/index.js deleted file mode 100644 index 54a598b17..000000000 --- a/platform/ui/src/elements/Svg/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { Svg } from './Svg.js'; -export { SVGS } from './getSvg.js'; diff --git a/platform/ui/src/elements/Svg/svgs/ohif-logo-text.svg b/platform/ui/src/elements/Svg/svgs/ohif-logo-text.svg deleted file mode 100644 index f06a067b5..000000000 --- a/platform/ui/src/elements/Svg/svgs/ohif-logo-text.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/platform/ui/src/elements/Svg/svgs/ohif-logo-wrapped-text.svg b/platform/ui/src/elements/Svg/svgs/ohif-logo-wrapped-text.svg deleted file mode 100644 index d9c2cb6b6..000000000 --- a/platform/ui/src/elements/Svg/svgs/ohif-logo-wrapped-text.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/platform/ui/src/elements/form/DropdownMenu.css b/platform/ui/src/elements/form/DropdownMenu.css deleted file mode 100644 index cc02defe1..000000000 --- a/platform/ui/src/elements/form/DropdownMenu.css +++ /dev/null @@ -1,86 +0,0 @@ -.dd-menu { - float: left; - margin-right: 10px; - cursor: pointer; - position: relative; -} - -.dd-title { - font-size: 13px; -} - -.dd-menu-toggle { - display: inline-block; -} - -.dd-caret-down { - display: inline-block; - width: 0; - height: 0; - margin-top: 0.5rem; - margin-left: 0.5rem; - border-top: 5px solid; - border-right: 5px solid transparent; - border-left: 5px solid transparent; -} - -.dd-menu-list { - position: absolute; - top: 100%; - margin-top: 10px; - background: white; - z-index: 999; - border-radius: 5px; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - -ms-border-radius: 5px; - -o-border-radius: 5px; - overflow: hidden; - transition: all 300ms ease; - -webkit-transition: all 300ms ease; - -moz-transition: all 300ms ease; - -ms-transition: all 300ms ease; - -o-transition: all 300ms ease; -} - -.dd-menu-list.open { - display: inline-block; -} - -.dd-menu-list.left { - left: 0; -} - -.dd-menu-list.right { - right: 0; -} - -.dd-menu-list.center { - left: 50%; - transform: translateX(-50%); - -webkit-transform: translateX(-50%); - -moz-transform: translateX(-50%); - -ms-transform: translateX(-50%); - -o-transform: translateX(-50%); -} - -.dd-item { - display: flex; - color: var(--text-color-active); - padding: 10px 15px; - border-bottom: 1px solid #ccc; -} - -.dd-item:hover { - text-decoration: none; - background: #eee; -} - -.dd-item:last-child { - border-bottom: none; -} - -.dd-item-icon { - margin-right: 10px; - margin-top: 2px; -} diff --git a/platform/ui/src/elements/form/DropdownMenu.js b/platform/ui/src/elements/form/DropdownMenu.js deleted file mode 100644 index e0562370a..000000000 --- a/platform/ui/src/elements/form/DropdownMenu.js +++ /dev/null @@ -1,138 +0,0 @@ -import './DropdownMenu.css'; - -import React, { Component } from 'react'; - -import { Icon } from '../Icon'; -import PropTypes from 'prop-types'; - -class DropdownMenu extends Component { - state = { - open: false, - }; - - static propTypes = { - titleElement: PropTypes.node, - title: PropTypes.string, - align: PropTypes.oneOf(['left', 'center', 'right']), - /** Items to render in the select's drop down */ - list: PropTypes.arrayOf( - PropTypes.shape({ - title: PropTypes.string.isRequired, - icon: PropTypes.object, - onClick: PropTypes.func, - link: PropTypes.string, - }) - ), - }; - - getListItems = () => { - const { list, align } = this.props; - - return list.map(({ icon, title, link, onClick }, key) => { - if (link) { - return ( - this.handleOnClick(onClick)} - > - {icon && } - {title} - - ); - } else { - return ( - - ); - } - }); - }; - - renderList = () => { - const { align } = this.props; - - if (!this.state.open) { - return null; - } - - return ( -
    - {this.getListItems()} -
    - ); - }; - - handleOnClick = onClick => { - this.toggleList(); - - if (onClick) { - onClick(); - } - }; - - handleMouseClick = e => { - if (this.node.contains(e.target)) { - return; - } - - this.toggleList(); - }; - - renderTitleElement = () => { - const { titleElement, title } = this.props; - - if (titleElement) { - return titleElement; - } - - return ( - - {title} - - - ); - }; - - toggleList = () => { - const { open } = this.state; - let state = true; - - document.addEventListener('mousedown', this.handleMouseClick, false); - - if (open) { - document.removeEventListener('mousedown', this.handleMouseClick, false); - state = false; - } - - this.setState({ - open: state, - }); - }; - - render() { - return ( -
    (this.node = node)} - > -
    - {this.renderTitleElement()} -
    - - {this.renderList()} -
    - ); - } -} - -export { DropdownMenu }; diff --git a/platform/ui/src/elements/form/Label.css b/platform/ui/src/elements/form/Label.css deleted file mode 100644 index 6d0a170b1..000000000 --- a/platform/ui/src/elements/form/Label.css +++ /dev/null @@ -1,8 +0,0 @@ -.label-ohif { - font-size: 1em; - color: #ffffff; -} - -.label-example { - background-color: var(--ui-gray-darker); -} diff --git a/platform/ui/src/elements/form/Label.js b/platform/ui/src/elements/form/Label.js deleted file mode 100644 index 06086fbd6..000000000 --- a/platform/ui/src/elements/form/Label.js +++ /dev/null @@ -1,27 +0,0 @@ -import './Label.css'; - -import React from 'react'; - -import PropTypes from 'prop-types'; - -class Label extends React.Component { - constructor(props) { - super(props); - this.state = { value: this.props.text }; - } - - render() { - return ( - - ); - } -} - -Label.propTypes = { - text: PropTypes.string.isRequired, - for: PropTypes.string, -}; - -export { Label }; diff --git a/platform/ui/src/elements/form/OldSelect.js b/platform/ui/src/elements/form/OldSelect.js deleted file mode 100644 index 3a59f70fc..000000000 --- a/platform/ui/src/elements/form/OldSelect.js +++ /dev/null @@ -1,49 +0,0 @@ -import './Select.css'; -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; - -class Select extends Component { - constructor(props) { - super(props); - this.state = { - value: this.props.value, - }; - } - - handleChange = event => { - const value = event.target.value; - this.setState({ value }); - if (this.props.onChange) this.props.onChange(value); - }; - - render() { - return ( - - ); - } -} - -Select.propTypes = { - options: PropTypes.arrayOf( - PropTypes.shape({ - key: PropTypes.string.isRequired, - value: PropTypes.string.isRequired, - }) - ), - value: PropTypes.string, - onChange: PropTypes.func, -}; - -export default Select; diff --git a/platform/ui/src/elements/form/Range.css b/platform/ui/src/elements/form/Range.css deleted file mode 100644 index 3bdaa94c2..000000000 --- a/platform/ui/src/elements/form/Range.css +++ /dev/null @@ -1,65 +0,0 @@ -.range { - margin: 0; - width: 100%; - -webkit-appearance: none; - background-color: transparent; -} - -.range:focus { - outline: none; -} - -.range::-webkit-slider-runnable-track { - width: 100%; - height: 2px; - cursor: pointer; - box-shadow: none; - background-color: var(--ui-border-color-dark); - border-radius: 0px; - border: 0px solid var(--ui-border-color-dark); -} - -.range::-moz-range-track { - width: 100%; - height: 2px; - cursor: pointer; - box-shadow: none; - background-color: var(--ui-border-color-dark); - border-radius: 0px; - border: 0px solid var(--ui-border-color-dark); -} - -.range::-webkit-slider-thumb { - box-shadow: none; - border: 0px solid var(--active-color); - box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25); - height: 21px; - width: 11px; - border-radius: 11px; - background: var(--active-color); - cursor: pointer; - -webkit-appearance: none; - margin-top: -10px; -} - -.range::-moz-range-thumb { - box-shadow: none; - border: 0px solid var(--active-color); - box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.25); - height: 21px; - width: 11px; - border-radius: 11px; - background: var(--active-color); - cursor: pointer; - -webkit-appearance: none; - margin-top: -10px; -} - -.range::-moz-focus-outer { - border: 0; -} - -.range-example { - background: black; - height: 2em; -} diff --git a/platform/ui/src/elements/form/Select.css b/platform/ui/src/elements/form/Select.css deleted file mode 100644 index 58c9357c1..000000000 --- a/platform/ui/src/elements/form/Select.css +++ /dev/null @@ -1,63 +0,0 @@ -.select-ohif-container .select-ohif { - display: inline-block; - font-size: 10pt; - box-sizing: border-box; - width: auto; - transition: all 0.15s ease; - background-color: var(--input-background-color); - line-height: 16px; - color: var(--input-placeholder-color); - height: 40px; - margin: 0 5px 20px 5px; - padding: 0 20px; - placeholder-color: var(--input-placeholder-color); - cursor: pointer; - border: none; - font-weight: normal; - border-radius: 4px; - background-image: none; -} - -.select-ohif-container .select-ohif::-ms-expand { - display: none; -} - -.select-ohif-container .select-ohif-label { - padding: 5px; -} - -.select-ohif:focus { - outline: none; -} - -.select-ohif-container .select-ohif option { - font-weight: normal; -} - -/** Compatibility styles for MIP */ - -.select-ohif { - display: block; - font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', - sans-serif; - font-size: 0.8em; - font-weight: 600; - color: #444; - line-height: 1.3; - padding: 0.6em 1.4em 0.5em 0.8em; - width: 100%; - max-width: 100%; - margin: 0; - border: 1px solid #aaa; - box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04); - border-radius: 0.5em; - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; - background-color: #fff; - background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), - linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%); - background-repeat: no-repeat, repeat; - background-position: right 0.7em top 50%, 0 0; - background-size: 0.65em auto, 100%; -} diff --git a/platform/ui/src/elements/form/Select.js b/platform/ui/src/elements/form/Select.js deleted file mode 100644 index 28008701f..000000000 --- a/platform/ui/src/elements/form/Select.js +++ /dev/null @@ -1,49 +0,0 @@ -import './Select.css'; - -import React, { Component } from 'react'; - -import PropTypes from 'prop-types'; - -class Select extends Component { - constructor(props) { - super(props); - } - - static propTypes = { - options: PropTypes.arrayOf( - PropTypes.shape({ - key: PropTypes.string.isRequired, - value: PropTypes.string.isRequired, - }) - ), - value: PropTypes.string, - onChange: PropTypes.func, - }; - - handleChange = event => { - const value = event.target.value; - this.setState({ value }); - if (this.props.onChange) this.props.onChange(value); - }; - - render() { - return ( -
    - {this.props.label && ( - - )} - -
    - ); - } -} - -export { Select }; diff --git a/platform/ui/src/elements/form/TextArea.css b/platform/ui/src/elements/form/TextArea.css deleted file mode 100644 index 72e8b2860..000000000 --- a/platform/ui/src/elements/form/TextArea.css +++ /dev/null @@ -1,7 +0,0 @@ -.textarea-ohif { - background-color: #b6b6b6; - border-color: #b6b6b6; - font-family: Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', - sans-serif; - font-size: 1em; -} diff --git a/platform/ui/src/elements/form/TextInput.css b/platform/ui/src/elements/form/TextInput.css deleted file mode 100644 index e05510529..000000000 --- a/platform/ui/src/elements/form/TextInput.css +++ /dev/null @@ -1,34 +0,0 @@ -.input-ohif-container { - font-size: 1em; - color: var(--text-primary-color); - font-weight: 400; -} - -.input-ohif-container .input-ohif { - display: inline-block; - height: 40px; - margin: 0 10px 20px; - padding: 0 20px; - cursor: pointer; - border: none; - background-color: var(--input-background-color); - color: var(--input-placeholder-color); - font-size: 10pt; - font-weight: normal; - width: auto; - border-radius: 4px; - transition: all 0.15s ease; -} - -.input-ohif-container .input-ohif-label { - padding: 5px; -} - -.input-ohif-container .input-ohif:active, -.input-ohif-container .input-ohif:focus { - background-color: var(--input-background-color); -} - -.input-ohif-container .input-ohif.invisible { - visibility: hidden; -} diff --git a/platform/ui/src/elements/form/TextInput.js b/platform/ui/src/elements/form/TextInput.js deleted file mode 100644 index 430d4320a..000000000 --- a/platform/ui/src/elements/form/TextInput.js +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -import './TextInput.css'; - -class TextInput extends React.Component { - constructor(props) { - super(props); - } - - static propTypes = { - value: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.number - ]), - id: PropTypes.string, - label: PropTypes.string, - type: PropTypes.string, - }; - - static defaultProps = { - value: '', - id: `TextInput-${new Date().toTimeString()}`, - label: undefined, - type: 'text', - }; - - render() { - return ( -
    - {this.props.label && ( - - )} - -
    - ); - } -} - -export { TextInput }; diff --git a/platform/ui/src/elements/form/__docs__/dropdownMenu.doc.mdx b/platform/ui/src/elements/form/__docs__/dropdownMenu.doc.mdx deleted file mode 100644 index 82be20cb6..000000000 --- a/platform/ui/src/elements/form/__docs__/dropdownMenu.doc.mdx +++ /dev/null @@ -1,42 +0,0 @@ ---- -name: Form / Dropdown Menu -menu: Elements -route: /elements/form-ddMenu ---- - -import { Playground, Props } from 'docz'; -import { State } from 'react-powerplug'; -import { DropdownMenu } from './../index.js'; - -# Select - -## Basic usage - - - - {({ state, setState }) => } - - - -## API - - diff --git a/platform/ui/src/elements/form/__docs__/label.doc.mdx b/platform/ui/src/elements/form/__docs__/label.doc.mdx deleted file mode 100644 index cac3a1652..000000000 --- a/platform/ui/src/elements/form/__docs__/label.doc.mdx +++ /dev/null @@ -1,32 +0,0 @@ ---- -name: Form / Label -menu: Elements -route: /elements/form-label ---- - -import { Playground, Props } from 'docz'; -import { State } from 'react-powerplug'; -import { Label } from './../index.js'; - -# Label - -## Basic usage - - - - {({ state, setState }) => ( -
    -
    - )} -
    -
    - -## API - - diff --git a/platform/ui/src/elements/form/__docs__/range.doc.mdx b/platform/ui/src/elements/form/__docs__/range.doc.mdx deleted file mode 100644 index 33eda0d66..000000000 --- a/platform/ui/src/elements/form/__docs__/range.doc.mdx +++ /dev/null @@ -1,33 +0,0 @@ ---- -name: Form / Range -menu: Elements -route: /elements/form-range ---- - -import { Playground, Props } from 'docz'; -import { State } from 'react-powerplug'; -import { Range } from './../index.js'; - -# Range - -## Basic usage - - - - {({ state, setState }) => ( -
    - -
    - )} -
    -
    - -## API - - diff --git a/platform/ui/src/elements/form/__docs__/select.docs.mdx b/platform/ui/src/elements/form/__docs__/select.docs.mdx deleted file mode 100644 index dd810bb4c..000000000 --- a/platform/ui/src/elements/form/__docs__/select.docs.mdx +++ /dev/null @@ -1,39 +0,0 @@ ---- -name: Form / Select -menu: Elements -route: /elements/form-select ---- - -import { Playground, Props } from 'docz'; -import { State } from 'react-powerplug'; -import { Select } from './../index.js'; - -# Select - -## Basic usage - - - - - {({ state, setState }) =>