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 0000000..5f9750b Binary files /dev/null and b/ext/src/options/assets/icons8-cancel-120.png differ diff --git a/ext/src/options/assets/icons8-ok-120.png b/ext/src/options/assets/icons8-ok-120.png new file mode 100644 index 0000000..10b59df Binary files /dev/null and b/ext/src/options/assets/icons8-ok-120.png differ diff --git a/ext/src/options/index.jsx b/ext/src/options/index.jsx index 1f2afac..3b9a096 100644 --- a/ext/src/options/index.jsx +++ b/ext/src/options/index.jsx @@ -165,13 +165,84 @@ class App extends Component { render () { return (
+ +
+ { 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;