scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-03-04 19:53:19 +08:00
Code Issues Projects Releases Packages Wiki Activity

Fix code

Browse source
This commit is contained in:
Luka Murn 2017-08-23 10:54:54 +02:00
parent b70b609109
commit 39bb8ecdab
5 changed files with 126 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/javascript/packs/app/constants/colors.js
View file

@ -3,3 +3,7 @@ export const WHITE_COLOR = "#fff";
export const BORDER_GRAY_COLOR = "#d2d2d2";
export const WILD_SAND_COLOR = "#f5f5f5";
export const MYSTIC_COLOR = "#eaeff2";
export const COLOR_ALTO = "#dddddd";
export const COLOR_GRAY = "#909088";
export const COLOR_ALABASTER = "#fcfcfc";

33
app/javascript/packs/shared/data_grid/DataGrid.jsx → app/javascript/packs/shared/data_grid/index.jsx
View file

@ -1,6 +1,37 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import ReactDataGrid from 'react-data-grid';
import styled from "styled-components";
import {
WHITE_COLOR,
COLOR_GRAY
} from "../../app/constants/colors";
const StyledReactDataGrid = styled(ReactDataGrid)`
background-color: inherit;
.react-grid-Grid {
background-color: inherit;
}
.react-grid-Header {
.react-grid-HeaderCell {
background-color: ${COLOR_GRAY};
color: ${WHITE_COLOR};
font-weight: normal;
vertical-align: bottom;
&:first-child {
border-left: none;
}
}
}
.react-grid-Canvas {
background-color: inherit;
}
`;
class DataGrid extends Component {
constructor(props) {
@ -85,7 +116,7 @@ class DataGrid extends Component {
render() {
return (
<ReactDataGrid
<StyledReactDataGrid
columns={this._columns}
rowGetter={this._rowGetter}
rowsCount={this._rowsCount}

48
app/javascript/packs/shared/data_table/DataTable.jsx → app/javascript/packs/shared/data_table/index.jsx
View file

@ -1,6 +1,48 @@
import React, { Component } from "react";
import PropTypes from "prop-types";
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import styled from "styled-components";
import {
WHITE_COLOR,
COLOR_GRAY,
COLOR_ALTO,
COLOR_ALABASTER
} from "../../app/constants/colors";
const StyledBootstrapTable = styled(BootstrapTable)`
thead {
background-color: ${COLOR_GRAY};
> tr > th,
>tr > td {
padding: 6px;
padding-right: 30px;
}
> tr > th {
border-bottom: 2px solid ${COLOR_ALTO};
border-bottom-width: 0;
border-left: 2px solid ${COLOR_ALABASTER};
color: ${WHITE_COLOR};
font-weight: normal;
vertical-align: bottom;
&:first-child {
border-left: none;
}
}
}
td, th {
box-sizing: content-box;
}
td {
overflow-wrap: break-word;
text-overflow: ellipsis;
word-break: break-word;
}
`;
class DataTable extends Component {
static cleanColumnAttributes(col) {
@ -26,7 +68,7 @@ class DataTable extends Component {
displayHeader() {
const orderedCols = [...this.props.columns].sort((a, b) => a.position - b.position);
const orderedCols = this.props.columns.sort((a, b) => a.position - b.position);
return orderedCols.map((col) =>
<TableHeaderColumn
key={col.id}
@ -43,9 +85,9 @@ class DataTable extends Component {
render() {
return (
<BootstrapTable {...this.cleanProps()}>
<StyledBootstrapTable {...this.cleanProps()}>
{this.displayHeader()}
</BootstrapTable>
</StyledBootstrapTable>
);
}
}

61
app/javascript/packs/styles/main.scss
View file

@ -7,64 +7,3 @@ body {
font-family: "Open Sans",Arial,Helvetica,sans-serif;
font-size: 13px;
}
.react-bs-table {
thead {
background-color: #909088;
> tr > th,
>tr > td {
padding: 6px;
padding-right: 30px;
}
> tr > th {
border-bottom: 2px solid #ddd;
border-bottom-width: 0;
border-left: 2px solid #fcfcfc;
color: #fff;
font-weight: normal;
vertical-align: bottom;
&:first-child {
border-left: none;
}
}
}
td, th {
box-sizing: content-box;
}
td {
overflow-wrap: break-word;
text-overflow: ellipsis;
word-break: break-word;
}
}
.react-grid-Main {
background-color: inherit;
.react-grid-Grid {
background-color: inherit;
}
.react-grid-Header {
.react-grid-HeaderCell {
background-color: #909088;
color: #fff;
font-weight: normal;
vertical-align: bottom;
&:first-child {
border-left: none;
}
}
}
.react-grid-Canvas {
background-color: inherit;
}
}

48
yarn.lock
View file

@ -1281,7 +1281,7 @@ clap@^1.0.9:
dependencies:
chalk "^1.1.3"
classnames@^2.2.5:
classnames@^2.1.2, classnames@^2.2.5:
version "2.2.5"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
@ -1538,7 +1538,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
safe-buffer "^5.0.1"
sha.js "^2.4.8"
create-react-class@^15.5.3, create-react-class@^15.6.0:
create-react-class@^15.5.2, create-react-class@^15.5.3, create-react-class@^15.6.0:
version "15.6.0"
resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.0.tgz#ab448497c26566e1e29413e883207d57cfe7bed4"
dependencies:
@ -1879,6 +1879,10 @@ electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.14:
version "1.3.15"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.15.tgz#08397934891cbcfaebbd18b82a95b5a481138369"
element-class@^0.2.0:
version "0.2.2"
resolved "https://registry.yarnpkg.com/element-class/-/element-class-0.2.2.tgz#9d3bbd0767f9013ef8e1c8ebe722c1402a60050e"
elliptic@^6.0.0:
version "6.4.0"
resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
@ -2211,6 +2215,10 @@ evp_bytestokey@^1.0.0:
dependencies:
create-hash "^1.1.1"
exenv@1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.0.tgz#3835f127abf075bfe082d0aed4484057c78e3c89"
exit-hook@^1.0.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
@ -4547,7 +4555,7 @@ prop-types-extra@^1.0.1:
dependencies:
warning "^3.0.0"
prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8:
prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8:
version "15.5.10"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
dependencies:
@ -4651,6 +4659,15 @@ rc@^1.1.7:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
react-bootstrap-table@^4.0.0:
version "4.0.2"
resolved "https://registry.yarnpkg.com/react-bootstrap-table/-/react-bootstrap-table-4.0.2.tgz#7e504141c8662fb203f0bcddab365c331b0e7106"
dependencies:
classnames "^2.1.2"
prop-types "^15.5.10"
react-modal "^1.4.0"
react-s-alert "^1.3.0"
react-bootstrap@^0.31.1:
version "0.31.1"
resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-0.31.1.tgz#679c9f73ae77ff207867d536496207291f3a3ed7"
@ -4667,6 +4684,14 @@ react-bootstrap@^0.31.1:
uncontrollable "^4.1.0"
warning "^3.0.0"
react-data-grid@^2.0.2:
version "2.0.58"
resolved "https://registry.yarnpkg.com/react-data-grid/-/react-data-grid-2.0.58.tgz#83946bf9cc34d144552349c343e15888c2c6293c"
react-dom-factories@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/react-dom-factories/-/react-dom-factories-1.0.1.tgz#c50692ac5ff1adb39d86dfe6dbe3485dacf58455"
react-dom@^15.6.1:
version "15.6.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.1.tgz#2cb0ed4191038e53c209eb3a79a23e2a4cf99470"
@ -4692,6 +4717,17 @@ react-intl@^2.3.0:
intl-relativeformat "^1.3.0"
invariant "^2.1.1"
react-modal@^1.4.0:
version "1.9.7"
resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-1.9.7.tgz#07ef56790b953e3b98ef1e2989e347983c72871d"
dependencies:
create-react-class "^15.5.2"
element-class "^0.2.0"
exenv "1.2.0"
lodash.assign "^4.2.0"
prop-types "^15.5.7"
react-dom-factories "^1.0.0"
react-overlays@^0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-0.7.0.tgz#531898ff566c7e5c7226ead2863b8cf9fbb5a981"
@ -4747,6 +4783,12 @@ react-router@^4.1.1:
prop-types "^15.5.4"
warning "^3.0.0"
react-s-alert@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/react-s-alert/-/react-s-alert-1.3.0.tgz#d81224a474f15e89c35c0ea6c2a73f232a767128"
dependencies:
babel-runtime "^6.23.0"
react@^15.6.1:
version "15.6.1"
resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"