From 54150568c23c4fc55663bcc17c6a3a256518b665 Mon Sep 17 00:00:00 2001 From: hensm Date: Wed, 12 Dec 2018 18:50:26 +0000 Subject: [PATCH] Improve bridge info section --- ext/src/_locales/en/messages.json | 50 +++++--- ext/src/options/assets/icons8-cancel-120.png | Bin 0 -> 3137 bytes ext/src/options/assets/icons8-ok-120.png | Bin 0 -> 2911 bytes ext/src/options/index.jsx | 122 ++++++++++++------- ext/src/options/styles/index.css | 66 ++++++++-- 5 files changed, 163 insertions(+), 75 deletions(-) create mode 100644 ext/src/options/assets/icons8-cancel-120.png create mode 100644 ext/src/options/assets/icons8-ok-120.png diff --git a/ext/src/_locales/en/messages.json b/ext/src/_locales/en/messages.json index f146de0..e300ace 100755 --- a/ext/src/_locales/en/messages.json +++ b/ext/src/_locales/en/messages.json @@ -18,32 +18,44 @@ } - , "optionsBridgeCategoryName": { - "message": "Bridge" - } - , "optionsBridgeCategoryDescription": { - "message": "Native bridge application." - } , "optionsBridgeLoading": { "message": "Loading bridge info..." } - , "optionsBridgeMissing": { - "message": "Bridge application not found. Try downloading and installing the latest version." + , "optionsBridgeFoundStatusText": { + "message": "Bridge found" + } + , "optionsBridgeNotFoundStatusText": { + "message": "Bridge not found. Try downloading and installing the latest version." } , "optionsBridgeInfo": { "message": "Bridge info:" } - , "optionsBridgeStatusCompatible": { - "message": "STATUS: COMPATIBLE" + , "optionsBridgeStatsVersion": { + "message": "Version:" } - , "optionsBridgeStatusIncompatible": { - "message": "STATUS: INCOMPATIBLE" + , "optionsBridgeStatsExpectedVersion": { + "message": "Expected version:" } - , "optionsBridgeOlder": { - "message": "Bridge version older than expected, try updating bridge to the latest bridge version." + , "optionsBridgeStatsCompatibility": { + "message": "Compatibility:" } - , "optionsBridgeNewer": { - "message": "Bridge version newer than expected, try updating extension to the latest bridge version." + , "optionsBridgeStatsRecommendedAction": { + "message": "Recommended action:" + } + , "optionsBridgeCompatible": { + "message": "COMPATIBLE" + } + , "optionsBridgeIncompatible": { + "message": "INCOMPATIBLE" + } + , "optionsBridgeOlderAction": { + "message": "Bridge version older than expected, try updating bridge to the latest version." + } + , "optionsBridgeNewerAction": { + "message": "Bridge version newer than expected, try updating extension to the latest version." + } + , "optionsBridgeNoAction": { + "message": "No action needed." } , "optionsMediaCategoryName": { @@ -66,7 +78,7 @@ "message": "Local media casting enabled" } , "optionsLocalMediaServerPort": { - "message": "HTTP server port" + "message": "HTTP server port:" } , "optionsUserAgentWhitelistCategoryName": { @@ -79,7 +91,7 @@ "message": "Site whitelist enabled" } , "optionsUserAgentWhitelistContent": { - "message": "Match patterns (newline-separated)" + "message": "Match patterns (newline-separated):" } , "optionsUserAgentWhitelistBasicView": { "message": "Basic View" @@ -113,7 +125,7 @@ "message": "Screen mirroring enabled" } , "optionsMirroringAppId": { - "message": "Receiver app ID" + "message": "Receiver app ID:" } , "optionsReset": { diff --git a/ext/src/options/assets/icons8-cancel-120.png b/ext/src/options/assets/icons8-cancel-120.png new file mode 100644 index 0000000000000000000000000000000000000000..5f9750bf69ab0d8b856dee72c00b37669849ba91 GIT binary patch literal 3137 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 bM3DR!R!V242+ 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 + +
+ { do { + if (this.state.bridgeLoading) { +
+ { _("optionsBridgeLoading") } + +
+ } else { + const { bridgeInfo } = this.state; + + const bridgeInfoClasses = `bridge__info ${bridgeInfo + ? "bridge__info--found" + : "bridge__info--not-found"}`; + +
+
+ + +

+ { bridgeInfo + ? _("optionsBridgeFoundStatusText") + : _("optionsBridgeNotFoundStatusText") } +

+
+ + { do { if (bridgeInfo) { + + + + + + + + + + + + + + + + + +
{ _("optionsBridgeStatsVersion") }{ bridgeInfo.version }
{ _("optionsBridgeStatsExpectedVersion") }{ APPLICATION_VERSION }
{ _("optionsBridgeStatsCompatibility") } + { bridgeInfo.isVersionCompatible + ? _("optionsBridgeCompatible") + : _("optionsBridgeIncompatible") } +
{ _("optionsBridgeStatsRecommendedAction") } + { do { + if (bridgeInfo.isVersionOlder) { + _("optionsBridgeOlderAction") + } else if (bridgeInfo.isVersionNewer) { + _("optionsBridgeNewerAction") + } else { + _("optionsBridgeNoAction") + } + }} +
+ } else { + // TODO: Download links + }}} +
+ } + }} +
+
{ this.form = form; }} onSubmit={ this.handleFormSubmit } onChange={ this.handleFormChange }>
- { _("optionsMediaCategoryName") } +

{ _("optionsMediaCategoryName") }

{ _("optionsMediaCategoryDescription") } @@ -190,7 +261,7 @@ class App extends Component {

- { _("optionsLocalMediaCategoryName") } +

{ _("optionsLocalMediaCategoryName") }

{ _("optionsLocalMediaCategoryDescription") } @@ -223,7 +294,7 @@ class App extends Component {

- { _("optionsMirroringCategoryName") } +

{ _("optionsMirroringCategoryName") }

{ _("optionsMirroringCategoryDescription") } @@ -253,7 +324,7 @@ class App extends Component {

- { _("optionsUserAgentWhitelistCategoryName") } +

{ _("optionsUserAgentWhitelistCategoryName") }

{ _("optionsUserAgentWhitelistCategoryDescription") } @@ -276,7 +347,7 @@ class App extends Component { + itemPatternError={ this.getWhitelistItemPatternError } />

@@ -298,47 +369,6 @@ class App extends Component { - -
- { do { - if (this.state.bridgeLoading) { -
- { _("optionsBridgeLoading") } - -
- } else if (this.state.bridgeInfo) { - const bridgeInfo = this.state.bridgeInfo; - let debugInfo = - `${bridgeInfo.isVersionCompatible - ? _("optionsBridgeStatusCompatible") - : _("optionsBridgeStatusIncompatible")}\n\n` - + `${APPLICATION_NAME} v${bridgeInfo.version}\n` - + `Expected: ${APPLICATION_VERSION}\n` - + `Found: ${bridgeInfo.version}\n`; - - if (bridgeInfo.isVersionOlder) { - debugInfo += `\n${_("optionsBridgeOlder")}` - } - if (bridgeInfo.isVersionNewer) { - debugInfo += `\n${_("optionsBridgeNewer")}` - } - -
- { _("optionsBridgeInfo") } -
- -
-
- } else { -
- { _("optionsBridgeInfo") } -
- { _("optionsBridgeMissing") } -
-
- } - }} -
); } diff --git a/ext/src/options/styles/index.css b/ext/src/options/styles/index.css index b57c275..302ee5b 100644 --- a/ext/src/options/styles/index.css +++ b/ext/src/options/styles/index.css @@ -28,7 +28,7 @@ .bridge { - margin-top: 20px; + margin-bottom: 20px; } .bridge, @@ -58,14 +58,52 @@ margin-top: 5px; } -.bridge__found { - margin-top: 5px; +.bridge__info { + display: flex; } -.bridge__info { - height: 150px; - margin-inline-start: 5px; - width: 80%; +.bridge__status { + align-items: center; + display: flex; + flex-basis: min-content; + flex-direction: column; + margin-inline-end: 50px; + margin-inline-start: 25px; +} + +.bridge__status-text { + margin: initial; + font-weight: 500; + font-size: 1.5em; + white-space: nowrap; +} + +.bridge__info--not-found .bridge__status { + flex-direction: row; +} +.bridge__info--found .bridge__status-icon { + margin-block-end: 5px; +} +.bridge__info--not-found .bridge__status-icon { + margin-inline-end: 10px; +} +.bridge__info--not-found .bridge__status-text { + font-weight: normal; + white-space: normal; +} + +.bridge__stats { + border-collapse: collapse; + border-spacing: 0; + width: max-content; +} + +.bridge__stats th { + font-weight: 500; + padding-inline-end: 10px; + text-align: end; + white-space: nowrap; + vertical-align: top; } @@ -73,7 +111,7 @@ border: initial; display: grid; grid-template-columns: 150px 1fr; - grid-column-gap: 20px; + grid-column-gap: 10px; grid-row-gap: 5px; margin: initial; padding: 10px 0; @@ -83,13 +121,13 @@ color: graytext; } -.category:not(:first-of-type) { +#form > .category { border-top: 1px solid var(--border-color); } .category > .category { padding: 5px 0; - box-shadow: inset 6px 0 0 0 var(--border-color); + box-shadow: inset 2px 0 0 0 var(--border-color); } .category > .category > .category__name, @@ -101,11 +139,19 @@ float: left; } +.category__name > h2 { + font-size: 1.15em; + font-weight: 500; + margin: initial; +} + .category__description { color: graytext; margin-top: initial; + max-width: 60ch; } +.category__name, .category__description, .category .category { grid-column: span 2;