diff --git a/package.json b/package.json index 098c443..1004a94 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "inbrief", - "version": "2.0.0-beta.1", + "version": "2.0.0-beta.2", "author": "John Jones ", "description": " InBrief is a personal briefing app and dashboard.", "private": true, diff --git a/public/add-button.svg b/public/add-button.svg new file mode 100755 index 0000000..0addc0d --- /dev/null +++ b/public/add-button.svg @@ -0,0 +1,125 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/arrow.svg b/public/arrow.svg new file mode 100755 index 0000000..6342eab --- /dev/null +++ b/public/arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/resize.svg b/public/resize.svg new file mode 100755 index 0000000..bbd08a8 --- /dev/null +++ b/public/resize.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/service_icons/calendar.svg b/public/service_icons/calendar.svg old mode 100644 new mode 100755 index b04c2db..61ac8fd --- a/public/service_icons/calendar.svg +++ b/public/service_icons/calendar.svg @@ -1,61 +1 @@ - -image/svg+xmlCreated by logan -from the Noun Project - \ No newline at end of file + \ No newline at end of file diff --git a/public/service_icons/email.svg b/public/service_icons/email.svg old mode 100644 new mode 100755 index 5b429a1..4f93471 --- a/public/service_icons/email.svg +++ b/public/service_icons/email.svg @@ -1,47 +1 @@ - -image/svg+xml \ No newline at end of file + \ No newline at end of file diff --git a/public/service_icons/rss.svg b/public/service_icons/rss.svg old mode 100644 new mode 100755 index dcde37a..99164a5 --- a/public/service_icons/rss.svg +++ b/public/service_icons/rss.svg @@ -1,61 +1 @@ - - - - - - image/svg+xml - - - - - - - - - + \ No newline at end of file diff --git a/public/service_icons/tasks.svg b/public/service_icons/tasks.svg old mode 100644 new mode 100755 index 4167dfb..f7b3252 --- a/public/service_icons/tasks.svg +++ b/public/service_icons/tasks.svg @@ -1,67 +1 @@ - -image/svg+xml \ No newline at end of file + \ No newline at end of file diff --git a/public/service_icons/twitter.svg b/public/service_icons/twitter.svg old mode 100644 new mode 100755 index 673d81b..1b1c0ff --- a/public/service_icons/twitter.svg +++ b/public/service_icons/twitter.svg @@ -1,6 +1 @@ - - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/public/service_icons/weather.svg b/public/service_icons/weather.svg index 0134c0a..ae23267 100755 --- a/public/service_icons/weather.svg +++ b/public/service_icons/weather.svg @@ -1,58 +1 @@ - - - -image/svg+xml \ No newline at end of file + \ No newline at end of file diff --git a/src/ui/AddWidget.js b/src/ui/AddWidget.js index d90c244..ceb9f04 100644 --- a/src/ui/AddWidget.js +++ b/src/ui/AddWidget.js @@ -51,31 +51,29 @@ class AddWidget extends Component { const servicesToShow = services.filter((service) => { return this.props.services.services.findIndex((_service) => _service.name === service.name) < 0 }) - if (servicesToShow.length > 0) { - if (this.state.showing) { - return ( -
-
- { - servicesToShow - .map((service) => { - return ( -
- -
- ) - }) - } - + return ( +
+
+
+
+ Choose a Card
+ { + servicesToShow + .map((service) => { + return ( +
+ +
+ ) + }) + } +
- ) - } else { - return () - } - } else { - return null - } +
+ {servicesToShow.length > 0 && !this.state.showing ? () : null} +
+ ) } } diff --git a/src/ui/AddWidget.scss b/src/ui/AddWidget.scss index 1570234..1824c55 100644 --- a/src/ui/AddWidget.scss +++ b/src/ui/AddWidget.scss @@ -7,12 +7,14 @@ right: 10px; bottom: 10px; font-size: 50px; - line-height: 40px; padding: 1px 9px 6px 9px; - background: $page_background_overlay; - color: $widget_body_text_color; + background: url(/add-button.svg) no-repeat; + color: transparent; border: none; - opacity: 0; + opacity: 0.5; + display: block; + width: 32px; + height: 32px; } body:hover .add-widget-button { @@ -20,25 +22,40 @@ body:hover .add-widget-button { } $height: 150px; +$titleSize: 16px; $outerMargin: 10px; .add-widget-wrapper { + opacity: 0; + pointer-events: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; - background: $page_background_overlay; + background: white; + transition: all 0.25s; + &.active { + opacity: 1; + pointer-events: all; + } } .add-widget { position: fixed; - height: $height; + height: ($height + $titleSize); top: 50%; left: 0; right: 0; background: $page_background_overlay; - margin: ($height * -0.5) auto 0 auto; + margin: (($height + $titleSize) * -0.5) auto 0 auto; +} + +.add-widget-title { + font-weight: 300; + text-transform: uppercase; + font-size: 16px; + color: $placeholder_text_color; } .add-widget-service-option { @@ -59,19 +76,23 @@ $outerMargin: 10px; border: none; vertical-align: bottom; padding-top: ($height - ($outerMargin * 3.25)); - color: white; opacity: 0.75; + font-weight: 600; &:hover { opacity: 1; } } .add-widget-close-button { - padding: 0; + padding: 0 0 2px 0; border-radius: 50%; - width: 20px; - height: 20px; + width: 30px; + height: 30px; position: absolute; top: -10px; right: -10px; + font-size: 20px; + line-height: 0; + border-color: $deemphasized_text; + color: $deemphasized_text; } \ No newline at end of file diff --git a/src/ui/Dashboard.js b/src/ui/Dashboard.js index 169ed37..4f61e1d 100644 --- a/src/ui/Dashboard.js +++ b/src/ui/Dashboard.js @@ -79,11 +79,10 @@ class Dashboard extends Component { } render () { - if (this.props.services.services) { + if (this.props.services.services && this.props.services.services.length > 0) { const cols = 3 return (
-
) } else { - return null + return ( +
+
+
+ Welcome to InBrief. We're glad to have you here +
+
+ Add Some Cards +
+
+ +
+ ) } } diff --git a/src/ui/Dashboard.scss b/src/ui/Dashboard.scss index e207728..6b78734 100644 --- a/src/ui/Dashboard.scss +++ b/src/ui/Dashboard.scss @@ -15,15 +15,6 @@ body { background-attachment: fixed; } -.overlay { - position: fixed; - top: 0; - right: 0; - left: 0; - bottom: 0; - background: $page_background_overlay; -} - textarea,input[type=text] { outline: none; border: solid 1px #ccc; @@ -56,3 +47,37 @@ button { border-color: $widget_ui_control_highlight_color; } } + +.dashboard-placeholder { + position: fixed; + top: 0; + left: 0; + bottom: 0; + right: 0; + display: flex; + align-content: center; + justify-content: center; + flex-direction: column; + color: $placeholder_text_color; + text-align: center; + background: white url(/arrow.svg) no-repeat; + background-size: auto 30%; + background-position: 90% 80%; + .dashboard-placeholder-text-1 { + font-weight: 300; + font-size: 16px; + } + .dashboard-placeholder-text-2 { + font-weight: 600; + font-size: 58px; + text-transform: uppercase; + padding: 0.25em 0 0 0; + } +} + +.react-grid-item > .react-resizable-handle { + background-image: url(/resize.svg); + &::after { + border: none; + } +} \ No newline at end of file diff --git a/src/ui/vars_mixins.scss b/src/ui/vars_mixins.scss index 027b6d7..2c6ec03 100644 --- a/src/ui/vars_mixins.scss +++ b/src/ui/vars_mixins.scss @@ -14,6 +14,8 @@ $stripe_background_hover: transparent; $deemphasized_text: rgba(26, 26, 26, .5); $double_deemphasized_text: rgba(26, 26, 26, .5); +$placeholder_text_color: #E0E0E0; + @mixin heading_font_styles { font-weight: 700; color: $widget_body_strong_text_color; diff --git a/src/ui/widgets/Weather.js b/src/ui/widgets/Weather.js index 7eab7ef..cba48b5 100644 --- a/src/ui/widgets/Weather.js +++ b/src/ui/widgets/Weather.js @@ -78,7 +78,7 @@ class Weather extends Widget {
{ data.map((weather, index) => { - return () + return () }) }
@@ -91,7 +91,7 @@ class Weather extends Widget { return (
- this.setTempConfigValue('location', event.target.value)} /> + this.setTempConfigValue('location', event.target.value)} />
) @@ -116,7 +116,7 @@ const dispatchToProps = (dispatch) => { } Weather.widgetProps = { - h: 3, + h: 2, isResizable: true }