Skip to content
Snippets Groups Projects
Commit 9f35a706 authored by Antoine Detailleur's avatar Antoine Detailleur Committed by Sandro Weber
Browse files

Merged in NRRPLT-8175-bootstrap (pull request #23)

NRRPLT-8175 bootstrap

Approved-by: Sandro Weber
parents c55aba47 ecfd3060
No related branches found
No related tags found
No related merge requests found
...@@ -1896,9 +1896,9 @@ ...@@ -1896,9 +1896,9 @@
} }
}, },
"@popperjs/core": { "@popperjs/core": {
"version": "2.6.0", "version": "2.9.2",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.6.0.tgz", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
"integrity": "sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw==" "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
}, },
"@restart/context": { "@restart/context": {
"version": "2.1.4", "version": "2.1.4",
...@@ -2334,9 +2334,12 @@ ...@@ -2334,9 +2334,12 @@
} }
}, },
"@types/classnames": { "@types/classnames": {
"version": "2.2.11", "version": "2.3.1",
"resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.2.11.tgz", "resolved": "https://registry.npmjs.org/@types/classnames/-/classnames-2.3.1.tgz",
"integrity": "sha512-2koNhpWm3DgWRp5tpkiJ8JGc1xTn2q0l+jUNUE7oMKXUf5NpI9AIdC4kbjGNFBdHtcxBD18LAksoudAVhFKCjw==" "integrity": "sha512-zeOWb0JGBoVmlQoznvqXbE0tEC/HONsnoUNH19Hc96NFsTAwTXbTqb8FMYkru1F/iqp7a18Ws3nWJvtA1sHD1A==",
"requires": {
"classnames": "*"
}
}, },
"@types/cookie": { "@types/cookie": {
"version": "0.4.0", "version": "0.4.0",
...@@ -2462,18 +2465,19 @@ ...@@ -2462,18 +2465,19 @@
"integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==" "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
}, },
"@types/react": { "@types/react": {
"version": "16.14.3", "version": "16.14.5",
"resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.3.tgz", "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.5.tgz",
"integrity": "sha512-zPrXn03hmPYqh9DznqSFQsoRtrQ4aHgnZDO+hMGvsE/PORvDTdJCHQ6XvJV31ic+0LzF73huPFXUb++W6Kri0Q==", "integrity": "sha512-YRRv9DNZhaVTVRh9Wmmit7Y0UFhEVqXqCSw3uazRWMxa2x85hWQZ5BN24i7GXZbaclaLXEcodEeIHsjBA8eAMw==",
"requires": { "requires": {
"@types/prop-types": "*", "@types/prop-types": "*",
"@types/scheduler": "*",
"csstype": "^3.0.2" "csstype": "^3.0.2"
} }
}, },
"@types/react-transition-group": { "@types/react-transition-group": {
"version": "4.4.0", "version": "4.4.1",
"resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.0.tgz", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz",
"integrity": "sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==", "integrity": "sha512-vIo69qKKcYoJ8wKCJjwSgCTM+z3chw3g18dkrDfVX665tMH7tmbDxEAnPdey4gTlwZz5QuHGzd+hul0OVZDqqQ==",
"requires": { "requires": {
"@types/react": "*" "@types/react": "*"
} }
...@@ -2486,6 +2490,11 @@ ...@@ -2486,6 +2490,11 @@
"@types/node": "*" "@types/node": "*"
} }
}, },
"@types/scheduler": {
"version": "0.16.1",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz",
"integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA=="
},
"@types/source-list-map": { "@types/source-list-map": {
"version": "0.1.2", "version": "0.1.2",
"resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz", "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
...@@ -4258,9 +4267,9 @@ ...@@ -4258,9 +4267,9 @@
} }
}, },
"classnames": { "classnames": {
"version": "2.2.6", "version": "2.3.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
}, },
"clean-css": { "clean-css": {
"version": "4.2.3", "version": "4.2.3",
...@@ -5055,9 +5064,9 @@ ...@@ -5055,9 +5064,9 @@
} }
}, },
"csstype": { "csstype": {
"version": "3.0.6", "version": "3.0.8",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
"integrity": "sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==" "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
}, },
"cyclist": { "cyclist": {
"version": "1.0.1", "version": "1.0.1",
...@@ -10496,9 +10505,9 @@ ...@@ -10496,9 +10505,9 @@
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==" "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
}, },
"lodash-es": { "lodash-es": {
"version": "4.17.20", "version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.20.tgz", "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
"integrity": "sha512-JD1COMZsq8maT6mnuz1UMV0jvYD0E0aUsSOdrr1/nAG3dhqQXwRRgeW0cSqH1U43INKcqxaiVIQNOUDld7gRDA==" "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="
}, },
"lodash._reinterpolate": { "lodash._reinterpolate": {
"version": "3.0.0", "version": "3.0.0",
......
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
z-index: 10001; z-index: 10001;
} }
#import-buttons { .import-button {
vertical-align: middle; cursor: pointer;
margin: auto 0; height: 50%;
} }
\ No newline at end of file
import React from 'react'; import React from 'react';
import { FaFolder, FaFileArchive, FaAudible } from 'react-icons/fa'; import { FaFolder, FaFileArchive, FaAudible } from 'react-icons/fa';
import { ButtonGroup, Button } from 'react-bootstrap';
import ImportExperimentService from '../../services/experiments/files/import-experiment-service.js'; import ImportExperimentService from '../../services/experiments/files/import-experiment-service.js';
import ExperimentStorageService from '../../services/experiments/files/experiment-storage-service.js'; import ExperimentStorageService from '../../services/experiments/files/experiment-storage-service.js';
...@@ -94,14 +93,14 @@ export default class ImportExperimentButtons extends React.Component { ...@@ -94,14 +93,14 @@ export default class ImportExperimentButtons extends React.Component {
{/* Import folder pop-up */} {/* Import folder pop-up */}
{this.state.importFolderResponse {this.state.importFolderResponse
? <div className="import-popup"> ? <div className="import-popup">
<div variant="success"> <div className="alert alert-success" role="alert">
<p>The experiment folder <p>The experiment folder
<b>{' ' + this.state.importFolderResponse.zipBaseFolderName}</b> has been succesfully imported as <b>{' ' + this.state.importFolderResponse.zipBaseFolderName}</b> has been succesfully imported as
<b>{' ' + this.state.importFolderResponse.destFolderName}</b>. <b>{' ' + this.state.importFolderResponse.destFolderName}</b>.
</p> </p>
</div> </div>
<div className="text-right"> <div className="text-right">
<Button variant="success" onClick={() => this.importFolderPopupClick()}>Got it!</Button> <button className="btn btn-success" onClick={() => this.importFolderPopupClick()}>Got it!</button>
</div> </div>
</div> </div>
: null : null
...@@ -110,7 +109,7 @@ export default class ImportExperimentButtons extends React.Component { ...@@ -110,7 +109,7 @@ export default class ImportExperimentButtons extends React.Component {
{/* Import zip pop-up */} {/* Import zip pop-up */}
{this.state.importZipResponses {this.state.importZipResponses
? <div className="import-popup"> ? <div className="import-popup">
<div> <div className="alert alert-success" role="alert">
<p>{this.state.importZipResponses.numberOfZips} successfully imported zip files.</p> <p>{this.state.importZipResponses.numberOfZips} successfully imported zip files.</p>
</div> </div>
<p>The following experiments folders</p> <p>The following experiments folders</p>
...@@ -118,7 +117,7 @@ export default class ImportExperimentButtons extends React.Component { ...@@ -118,7 +117,7 @@ export default class ImportExperimentButtons extends React.Component {
<p>have been successfully imported as:</p> <p>have been successfully imported as:</p>
<p><b>{this.state.importZipResponses.destFolderName.join(', ')}.</b></p> <p><b>{this.state.importZipResponses.destFolderName.join(', ')}.</b></p>
<div className="text-right"> <div className="text-right">
<Button variant="success" onClick={() => this.importZipPopupClick()}>Got it!</Button> <button className="btn btn-success" onClick={() => this.importZipPopupClick()}>Got it!</button>
</div> </div>
</div> </div>
: null : null
...@@ -127,7 +126,7 @@ export default class ImportExperimentButtons extends React.Component { ...@@ -127,7 +126,7 @@ export default class ImportExperimentButtons extends React.Component {
{/* Scan pop-up */} {/* Scan pop-up */}
{this.state.scanStorageResponse {this.state.scanStorageResponse
? <div className="import-popup"> ? <div className="import-popup">
<div> <div className="alert alert-success" role="alert">
<p>{this.state.scanStorageResponse.addedFoldersNumber} added folders, <p>{this.state.scanStorageResponse.addedFoldersNumber} added folders,
{' ' + this.state.scanStorageResponse.deletedFoldersNumber} deleted folders.</p> {' ' + this.state.scanStorageResponse.deletedFoldersNumber} deleted folders.</p>
</div> </div>
...@@ -141,7 +140,7 @@ export default class ImportExperimentButtons extends React.Component { ...@@ -141,7 +140,7 @@ export default class ImportExperimentButtons extends React.Component {
? this.state.scanStorageResponse.deletedFolders ? this.state.scanStorageResponse.deletedFolders
: 'none' }</b></p> : 'none' }</b></p>
<div className="text-right"> <div className="text-right">
<Button variant="success" onClick={() => this.scanStoragePopupClick()}>Got it!</Button> <button className="btn btn-success" onClick={() => this.scanStoragePopupClick()}>Got it!</button>
</div> </div>
</div> </div>
: null : null
...@@ -156,17 +155,19 @@ export default class ImportExperimentButtons extends React.Component { ...@@ -156,17 +155,19 @@ export default class ImportExperimentButtons extends React.Component {
multiple accept='.zip' multiple accept='.zip'
onChange={(event) => this.importZippedExperimentChange(event)}/> onChange={(event) => this.importZippedExperimentChange(event)}/>
{!this.state.isImporting {!this.state.isImporting
? <ButtonGroup role="group"> ? <div className="btn-group" role="group">
<Button variant="outline-dark"> <button type="button" className="btn btn-outline-dark">
<label htmlFor="folder"><FaFolder/> Import folder</label> <label htmlFor="folder" className="import-button">
</Button> <FaFolder/> Import folder
<Button variant="outline-dark"> </label>
<label htmlFor="zip"><FaFileArchive/> Import zip</label> </button>
</Button > <button type="button" className="btn btn-outline-dark">
<Button variant="outline-dark" onClick={() => this.scanStorageClick()}> <label htmlFor="zip" className="import-button"><FaFileArchive/> Import zip</label>
</button >
<button type="button" className="btn btn-outline-dark" onClick={() => this.scanStorageClick()}>
<FaAudible/> Scan Storage <FaAudible/> Scan Storage
</Button> </button>
</ButtonGroup> </div>
: null} : null}
</div> </div>
</div> </div>
......
...@@ -60,6 +60,7 @@ export default class UserMenu extends React.Component { ...@@ -60,6 +60,7 @@ export default class UserMenu extends React.Component {
</Dropdown.Item> </Dropdown.Item>
</Dropdown.Menu> </Dropdown.Menu>
</Dropdown> </Dropdown>
</div> </div>
); );
} }
......
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import './index.css'; import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './App'; import App from './App';
import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals';
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment