From 4da618bbd4b2b81f4e5be2610718194397b5ebf3 Mon Sep 17 00:00:00 2001 From: Gregory Schier Date: Sat, 18 Jun 2016 14:02:27 -0700 Subject: [PATCH] lots of small tweaks --- app/components/RequestBodyEditor.js | 2 +- app/components/ResponsePane.js | 23 +++++++++++----- app/components/ResponseViewer.js | 9 ++++--- app/components/StatusTag.js | 8 ++++-- app/css/components/sidebar.scss | 2 +- app/css/components/tag.scss | 5 ++-- app/css/constants/colors.scss | 11 +++++--- app/css/constants/dimensions.scss | 5 ++-- app/css/layout/base.scss | 12 ++++++--- app/database/index.js | 42 ++++++++++++++++------------- app/lib/network.js | 7 ++++- 11 files changed, 84 insertions(+), 42 deletions(-) diff --git a/app/components/RequestBodyEditor.js b/app/components/RequestBodyEditor.js index d28fc33188..45efbb78cb 100644 --- a/app/components/RequestBodyEditor.js +++ b/app/components/RequestBodyEditor.js @@ -7,7 +7,7 @@ const RequestBodyEditor = ({body, contentType, onChange, className}) => ( className={className} onChange={onChange} mode={contentType} - lineWrapping={false} + lineWrapping={true} placeholder="request body here..." /> ); diff --git a/app/components/ResponsePane.js b/app/components/ResponsePane.js index 2934f8b7cf..029051a5ae 100644 --- a/app/components/ResponsePane.js +++ b/app/components/ResponsePane.js @@ -7,6 +7,7 @@ import TimeTag from './TimeTag' import PreviewModeDropdown from '../components/PreviewModeDropdown' import ResponseViewer from '../components/ResponseViewer' import {getPreviewModeName} from '../lib/previewModes' +import {PREVIEW_MODE_SOURCE} from "../lib/previewModes"; const ResponsePane = ({response, previewMode, updatePreviewMode}) => { if (!response) { @@ -23,7 +24,7 @@ const ResponsePane = ({response, previewMode, updatePreviewMode}) => { return (
-
+
{!response ? null : (
{ - + {response.error ? ( + + ) : ( + + )} diff --git a/app/components/ResponseViewer.js b/app/components/ResponseViewer.js index cab36c1fac..b92a238c12 100644 --- a/app/components/ResponseViewer.js +++ b/app/components/ResponseViewer.js @@ -6,7 +6,7 @@ import {PREVIEW_MODE_FRIENDLY, PREVIEW_MODE_SOURCE} from '../lib/previewModes' class ResponseViewer extends Component { render () { - const {previewMode, contentType, body} = this.props; + const {previewMode, contentType, body, wrap} = this.props; switch (previewMode) { case PREVIEW_MODE_FRIENDLY: @@ -23,7 +23,7 @@ class ResponseViewer extends Component { prettify={true} mode={contentType} readOnly={true} - lineWrapping={false} + lineWrapping={wrap} placeholder="nothing yet..." /> ); @@ -40,7 +40,10 @@ class ResponseViewer extends Component { ResponseViewer.propTypes = { body: PropTypes.string.isRequired, contentType: PropTypes.string.isRequired, - previewMode: PropTypes.string.isRequired + previewMode: PropTypes.string.isRequired, + + // Optional + wrap: PropTypes.bool }; export default ResponseViewer; diff --git a/app/components/StatusTag.js b/app/components/StatusTag.js index 4fde9d1a8b..34b265e749 100644 --- a/app/components/StatusTag.js +++ b/app/components/StatusTag.js @@ -22,14 +22,18 @@ const StatusTag = ({statusMessage, statusCode}) => { } else if (statusCode.startsWith('5')) { colorClass = 'bg-danger'; backupStatusMessage = 'ERROR'; + } else if (statusCode.startsWith('0')) { + colorClass = 'bg-danger'; + backupStatusMessage = 'UNKNOWN'; + statusCode = ''; // Don't print a 0 status code } else { - colorClass = 'bg-info'; + colorClass = 'bg-danger'; backupStatusMessage = 'UNKNOWN'; } return (
- {statusCode} {statusMessage || backupStatusMessage} + {statusCode} {statusMessage || backupStatusMessage}
); }; diff --git a/app/css/components/sidebar.scss b/app/css/components/sidebar.scss index d3c25302e9..8652e47c32 100644 --- a/app/css/components/sidebar.scss +++ b/app/css/components/sidebar.scss @@ -97,7 +97,7 @@ } .tag { - opacity: 0.4; + opacity: 0.5; padding-left: 0; width: 2.5em; text-align: left; diff --git a/app/css/components/tag.scss b/app/css/components/tag.scss index 28ecdbb44b..7345b24af3 100644 --- a/app/css/components/tag.scss +++ b/app/css/components/tag.scss @@ -2,7 +2,6 @@ @import '../constants/colors'; .tag { - font-size: $font-size-sm; display: inline-block; padding: $padding-sm; margin-right: 1em; @@ -10,7 +9,8 @@ box-sizing: border-box; border-radius: $radius-md; text-align: center; - background: $hl-lg; + background: $hl-sm; + border: 1px solid rgba(0, 0, 0, 0.05); &:last-child { margin-right: 0; @@ -24,5 +24,6 @@ &.tag--no-bg { background: transparent; + border: 0; } } diff --git a/app/css/constants/colors.scss b/app/css/constants/colors.scss index 7f61f0f1e8..e9cf6ce26b 100644 --- a/app/css/constants/colors.scss +++ b/app/css/constants/colors.scss @@ -23,11 +23,11 @@ $hl-xl: rgba(140, 140, 140, 0.5); $hl-xxl: rgba(140, 140, 140, 0.7); $hl: rgba(140, 140, 140, 1); -$success: #8cbd55; -$warning: #f3a031; +$success: #8fc62b; +$warning: #ffb241; $danger: #ff6d59; $surprise: #a086ff; -$info: #3ca4ba; +$info: #3eaec5; .success, .method-POST { @@ -59,6 +59,7 @@ $info: #3ca4ba; .bg-success, .bg-method-POST { background: $success !important; + text-shadow: 0 0 0.05em darken($success, 20); color: #fff; } @@ -67,12 +68,14 @@ $info: #3ca4ba; .bg-method-PATCH { background: $warning !important; color: #fff; + text-shadow: 0 0 0.05em darken($warning, 20); } .bg-danger, .bg-method-DELETE { background: $danger !important; color: #fff; + text-shadow: 0 0 0.05em darken($danger, 20); } .bg-info, @@ -80,10 +83,12 @@ $info: #3ca4ba; .bg-method-HEAD { background: $info !important; color: #fff; + text-shadow: 0 0 0.05em darken($info, 20); } .bg-surprise, .bg-method-GET { background: $surprise !important; color: #fff; + text-shadow: 0 0 0.05em darken($surprise, 20); } diff --git a/app/css/constants/dimensions.scss b/app/css/constants/dimensions.scss index c5fabae152..e4f4e5e0a1 100644 --- a/app/css/constants/dimensions.scss +++ b/app/css/constants/dimensions.scss @@ -21,7 +21,7 @@ $line-height-sm: $line-height-md * 0.75; $line-height-xs: $line-height-md * 0.6; /* Sidebar */ -$sidebar-width: 20rem; +$sidebar-width: 19rem; /* Borders */ $radius-sm: 0.1rem; @@ -34,7 +34,8 @@ $dropdown-min-width: 12rem; $modal-width: 50rem; /* Breakpoints */ -$breakpoint-md: 790px; +$breakpoint-lg: 1100px; +$breakpoint-md: 800px; $breakpoint-sm: 580px; .txt-xs { diff --git a/app/css/layout/base.scss b/app/css/layout/base.scss index d33d1d97b4..9921b4aa47 100644 --- a/app/css/layout/base.scss +++ b/app/css/layout/base.scss @@ -195,14 +195,20 @@ strong { font-weight: 600; } -@media (max-width: $breakpoint-md) { +@media (max-width: $breakpoint-lg) { html { font-size: $font-size * 0.95; } } -@media (max-width: $breakpoint-sm) { +@media (max-width: $breakpoint-md) { html { - font-size: $font-size * 0.9; + font-size: $font-size * 0.90; + } +} + +@media (max-width: $breakpoint-sm) { + html { + font-size: $font-size * 0.85; } } diff --git a/app/database/index.js b/app/database/index.js index 702e7cc397..40abb4270b 100644 --- a/app/database/index.js +++ b/app/database/index.js @@ -40,11 +40,16 @@ export function initDB () { return new Promise(resolve => { const dbPath = getDBFilePath(); - db = {}; - for (let i = 0; i < TYPES.length; i++) { - db[TYPES[i]] = {}; - } + db = { + created: Date.now(), + entities: {} + }; + + for (let i = 0; i < TYPES.length; i++) { + db.entities[TYPES[i]] = {}; + } + fs.readFile(getDBFilePath(), 'utf8', (err, text) => { if (!err) { // TODO: Better error handling @@ -53,7 +58,7 @@ export function initDB () { } // Add listeners to do persistence - + let timeout = null; onChange('DB_WRITER', () => { clearTimeout(timeout); @@ -67,7 +72,7 @@ export function initDB () { }) }, DB_PERSIST_INTERVAL) }); - + // Done initialized = true; @@ -90,26 +95,26 @@ export function offChange (id) { } export function get (type, id) { - const doc = db[type][id]; + const doc = db.entities[type][id]; return new Promise(resolve => resolve(doc)); } function all (type) { let docs = []; - const ids = Object.keys(db[type]); + const ids = Object.keys(db.entities[type]); for (let i = 0; i < ids.length; i++) { - docs.push(db[type][ids[i]]); + docs.push(db.entities[type][ids[i]]); } return new Promise(resolve => resolve(docs)); } function removeWhere (type, key, value) { - const ids = Object.keys(db[type]); + const ids = Object.keys(db.entities[type]); let docs = []; for (let i = 0; i < ids.length; i++) { - const doc = db[type][ids[i]]; + const doc = db.entities[type][ids[i]]; if (doc[key] === value) { remove(doc); } @@ -119,25 +124,25 @@ function removeWhere (type, key, value) { } function insert (doc) { - db[doc.type][doc._id] = doc; - + db.entities[doc.type][doc._id] = doc; + Object.keys(changeListeners).map(k => changeListeners[k]('insert', doc)); return new Promise(resolve => resolve(doc)); } function update (doc) { - db[doc.type][doc._id] = doc; - + db.entities[doc.type][doc._id] = doc; + Object.keys(changeListeners).map(k => changeListeners[k]('update', doc)); return new Promise(resolve => resolve(doc)); } function remove (doc) { - delete db[doc.type][doc._id]; + delete db.entities[doc.type][doc._id]; // Also remove children TYPES.map(type => removeWhere(type, 'parentId', doc._id)); - + Object.keys(changeListeners).map(k => changeListeners[k]('remove', doc)); new Promise(resolve => resolve()); } @@ -266,7 +271,8 @@ export function responseCreate (patch = {}) { bytes: 0, millis: 0, headers: [], - body: '' + body: '', + error: '' }, patch); } diff --git a/app/lib/network.js b/app/lib/network.js index 94843737d8..93265a26d5 100644 --- a/app/lib/network.js +++ b/app/lib/network.js @@ -55,7 +55,12 @@ function actuallySend (request, callback) { const startTime = Date.now(); networkRequest(config, function (err, response) { if (err) { - console.error('Request Failed', err, response); + db.responseCreate({ + parentId: request._id, + millis: Date.now() - startTime, + error: err.toString() + }); + console.warn(`Request to ${config.url} failed`, err); } else { db.responseCreate({ parentId: request._id,