From 72bfb25d5fc9a835a24d08c86eb6316d0a4644da Mon Sep 17 00:00:00 2001 From: Valentine Date: Wed, 20 May 2020 20:36:07 +0300 Subject: [PATCH 1/2] [Feat] Tabelau UI redesign * update splash and config screens to look more like Tableau native UI Signed-off-by: Valentine --- src/App.css | 4 +- src/App.js | 93 ++--- src/assets/tableau/css/style.css | 5 +- src/components/Configuration/ConfigScreen.js | 4 +- src/components/Configuration/CustomScreen.js | 319 ++++++++++-------- .../Configuration/CustomizeUIElements.js | 37 +- .../Configuration/CustomizeViolin.js | 32 +- src/components/Configuration/PickSheets.js | 6 +- src/components/Configuration/StepButtons.js | 35 +- src/components/SplashScreen.js | 20 +- src/index.js | 1 - src/styles/ConfigScreen.css | 5 + src/styles/SplashScreen.css | 33 +- src/styles/StepButtons.css | 6 + src/styles/Stepper.css | 2 +- 15 files changed, 367 insertions(+), 235 deletions(-) create mode 100644 src/styles/ConfigScreen.css diff --git a/src/App.css b/src/App.css index 4e08d0a..b7fded1 100644 --- a/src/App.css +++ b/src/App.css @@ -5,7 +5,9 @@ html { html, body { max-width: 100%; overflow-x: hidden; - font-family: "Avenir"; + font-family: "Roboto", "Helvetica", "Arial"; + background-color: #F5F5F5; + font-size: 12px; } ::-webkit-scrollbar { width: 0px; /* remove scrollbar space */ diff --git a/src/App.js b/src/App.js index 9b3e363..51f1c06 100644 --- a/src/App.js +++ b/src/App.js @@ -72,6 +72,7 @@ import { import dbLogo from './assets/dblogo.png'; import ssLogo from './assets/sslogo.jpg'; import kepLogo from './assets/kepler.gl-logo_2x.png'; +import { Typography } from '@material-ui/core'; const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoidWJlcmRhdGEiLCJhIjoiY2p2OGVvejQwMDJxZzRma2dvdWQ2OTQwcSJ9.VbuIamTa_JayuD2yr5tjaA'; @@ -714,13 +715,17 @@ class App extends Component { // Placeholder sheet names. TODO: Bind to worksheet data return ( - - +
+ + Kepler.gl within Tableau Configuration + + +
- - +
+ + Kepler.gl within Tableau Configuration + + +
Tableau Requirements: Tableau Desktop (Mac Only) 2018.3 or >= 2019.1.2 or Tableau Server >= 2018.3

-

Brought to you by:

- - - {' '} - - - -

Powered by:

- - - -

Version: {KEPLER_GL_VERSION}

+
+
+

Brought to you by:

+ + + {' '} + + + +
+
+

Powered by:

+ + + +
+
} /> diff --git a/src/assets/tableau/css/style.css b/src/assets/tableau/css/style.css index e732dd3..b67cd69 100644 --- a/src/assets/tableau/css/style.css +++ b/src/assets/tableau/css/style.css @@ -3160,7 +3160,7 @@ Style guide: buttons-links.cta cursor: pointer; letter-spacing: 1px; line-height: 1; - font-size: 11px; + font-size: 12px; font-family: "Benton Sans Medium", Helvetica, sans-serif; color: #fff; text-transform: uppercase; @@ -3510,7 +3510,7 @@ Style guide: buttons-links.toggle-links cursor: pointer; letter-spacing: 1px; line-height: 1; - font-size: 11px; + font-size: 12px; text-transform: uppercase; font-family: "Benton Sans Book", Helvetica, sans-serif; color: #e8762c; @@ -14119,3 +14119,4 @@ Style guide: typography.text-stat @media (max-width: 960px) { .text-stat { font-size: 4em; } } + diff --git a/src/components/Configuration/ConfigScreen.js b/src/components/Configuration/ConfigScreen.js index 5c293db..97e64b5 100644 --- a/src/components/Configuration/ConfigScreen.js +++ b/src/components/Configuration/ConfigScreen.js @@ -38,7 +38,6 @@ const styles = { function ConfigScreen(props) { const { - classes, selectSheet, sheetNames, configTitle, @@ -46,10 +45,9 @@ function ConfigScreen(props) { field, selectedValue } = props; - console.log('configScreen', props); return ( -
+
({ formControl: { - margin: theme.spacing.unit, + fontSize: '12px', minWidth: 120, - display: 'inherit', - }, + display: 'inherit' + } }); +const Grid6 = styled.div` + display: flex; + flex-direction: row; + margin-bottom:16px; + + & > div { + width: 200px; + margin-right: 16px; + } + + & > div > div:nth-child(2) { + border: 1px solid #ccc; + + & > div { + padding-left: 8px; + } + } +`; + +const Grid12 = styled.div` + display: flex; + flex-direction: row; + margin-bottom:8px; + + & > div { + width: 416px; + margin-right: 16px; + } +`; + // the example on material ui has this function statement class CustomScreen extends React.Component { constructor (props) { @@ -85,140 +117,151 @@ class CustomScreen extends React.Component {
- {this.props.configTitle} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + {this.props.configTitle} + Visual + + + + + + + + + + + Events + + + + + + + + + + + + + + + + + + + + + + + + + + + Optional + + + + + + {/* (
{props.title} - ? +
{props.tooltipText}
diff --git a/src/components/Configuration/CustomizeViolin.js b/src/components/Configuration/CustomizeViolin.js index f32e89b..907ddbe 100644 --- a/src/components/Configuration/CustomizeViolin.js +++ b/src/components/Configuration/CustomizeViolin.js @@ -25,23 +25,21 @@ import { OptionColumn } from './CustomizeUIElements'; const CustomizeViolin = (props) => ( -
-

{props.title}

-
- - - -
+

{props.title}

+
+ + +
); diff --git a/src/components/Configuration/PickSheets.js b/src/components/Configuration/PickSheets.js index 235cbca..bab5bcb 100644 --- a/src/components/Configuration/PickSheets.js +++ b/src/components/Configuration/PickSheets.js @@ -26,13 +26,13 @@ import { OptionColumn } from './CustomizeUIElements'; const PickSheets = (props) => (
-

{props.title}

+

{props.title}

- + { return ( -
- { - props.stepIndex !== 1 - && - - } - +
+ + + { new Array(NUMBER_OF_STEPS).fill(0).map((value, index) => )} + +
); } diff --git a/src/components/SplashScreen.js b/src/components/SplashScreen.js index e3202e0..a83d965 100644 --- a/src/components/SplashScreen.js +++ b/src/components/SplashScreen.js @@ -27,9 +27,11 @@ import './../styles/SplashScreen.css'; const SplashScreen = props => (
- + {props.title} + v{props.version} +
{props.desc} @@ -38,7 +40,8 @@ const SplashScreen = props => (
-
-
-

{props.infoText}

-
-
-
{props.poweredBy}
+
+
+

{props.infoText}

+
+
+
{props.poweredBy}
+
); diff --git a/src/index.js b/src/index.js index d8abe80..f0c16f9 100644 --- a/src/index.js +++ b/src/index.js @@ -17,7 +17,6 @@ // 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. - import './polyfills.js'; import React from 'react'; import document from 'global/document'; diff --git a/src/styles/ConfigScreen.css b/src/styles/ConfigScreen.css new file mode 100644 index 0000000..2ab6996 --- /dev/null +++ b/src/styles/ConfigScreen.css @@ -0,0 +1,5 @@ +.bordered input { + border: 1px solid #ccc; } + .bordered input:focus { + border: 1px solid #333; + } \ No newline at end of file diff --git a/src/styles/SplashScreen.css b/src/styles/SplashScreen.css index 4a71ab6..9bf8677 100644 --- a/src/styles/SplashScreen.css +++ b/src/styles/SplashScreen.css @@ -1,3 +1,8 @@ +#splashScreen { + padding: 24px; + background-color: #F5F5F5; +} + #splashScreen img { max-height: 30px; } @@ -5,10 +10,28 @@ #splashScreen button.cta { max-width: 230px; margin-left: auto; - margin-right: auto; -} + margin-right: auto; } + #splashScreen button.cta:active, + #splashScreen button.cta:hover, + #splashScreen button.cta:focus { + outline-style: none; + } + #splashScreen button.cta:active { + opacity: .6; + } #splashScreen .info { - font-style: italic; - font-size: 11px; -} \ No newline at end of file + font-size: 12px; +} + +#splashScreen .gallery-footer { + display: flex; + position: absolute; + bottom: 24px; + left: 24px; +} + +#splashScreen .inline { + display: inline-flex; } + .inline > div { + margin-right: 16px; } \ No newline at end of file diff --git a/src/styles/StepButtons.css b/src/styles/StepButtons.css index 9c7d043..7102032 100644 --- a/src/styles/StepButtons.css +++ b/src/styles/StepButtons.css @@ -7,6 +7,8 @@ box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.25); z-index: 100; background: white; + display: flex; + justify-content: space-between; } .StepButtons Button.newCta { @@ -19,4 +21,8 @@ .StepButtons Button.newCta.next { float: right; +} + +.StepButtons Button { + outline-style: none; } \ No newline at end of file diff --git a/src/styles/Stepper.css b/src/styles/Stepper.css index 3119fd5..1dde9cf 100644 --- a/src/styles/Stepper.css +++ b/src/styles/Stepper.css @@ -1,7 +1,7 @@ #Stepper { font-size: 16px; line-height: 2.15; - font-family: "Avenir"; + font-family: "Roboto", "Helvetica", "Arial"; font-weight: 400; font-style: normal; color: #333; From 4e5017fb4ca865b452debcd2a8ccadad9673bb4d Mon Sep 17 00:00:00 2001 From: Valentine Date: Sat, 6 Jun 2020 17:25:58 +0300 Subject: [PATCH 2/2] [Feat] Tabelau UI redesign * fix responsiveness Signed-off-by: Valentine --- src/styles/SplashScreen.css | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/src/styles/SplashScreen.css b/src/styles/SplashScreen.css index 9bf8677..241bbb2 100644 --- a/src/styles/SplashScreen.css +++ b/src/styles/SplashScreen.css @@ -26,12 +26,25 @@ #splashScreen .gallery-footer { display: flex; - position: absolute; - bottom: 24px; - left: 24px; } #splashScreen .inline { display: inline-flex; } .inline > div { - margin-right: 16px; } \ No newline at end of file + margin-right: 16px; } + +@media screen and (min-height: 0) { + #splashScreen .gallery-footer { + position: unset; + bottom: auto; + left: auto; + } +} + +@media screen and (min-height: 400px) { + #splashScreen .gallery-footer { + position: absolute; + bottom: 24px; + left: 30px; + } +} \ No newline at end of file