sam_oneal/fx_cast
1
0
Fork 0
mirror of https://github.com/hensm/fx_cast.git synced 2026-06-13 02:49:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Truncate receiver application status text

Browse Source
This commit is contained in:
hensm
2019-08-04 23:07:34 +01:00
parent 8ac3cf49f5
commit 487df78719
3 changed files with 85 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
app/NativeMacReceiverSelector/ReceiverView.swift
View File

@@ -37,15 +37,24 @@ class ReceiverView : NSStackView {
self.receiver = receiver self.receiver = receiver
let statusText = receiver.status.application.isIdleScreen let statusText = receiver.status.application.isIdleScreen
? "\(receiver.host):\(receiver.port)" ? "\(receiver.host):\(receiver.port)"
: receiver.status.application.statusText : receiver.status.application.statusText
let addressLabel = makeLabel(statusText
, size: NSFont.smallSystemFontSize
, color: .secondaryLabelColor)
// Truncate long status text
addressLabel.toolTip = statusText
addressLabel.cell?.lineBreakMode = .byTruncatingTail
addressLabel.setContentCompressionResistancePriority(
.defaultLow, for: .horizontal)
let metaStackView = NSStackView(views: [ let metaStackView = NSStackView(views: [
makeLabel(receiver.friendlyName, size: 14) makeLabel(receiver.friendlyName, size: 14)
, makeLabel(statusText , addressLabel
, size: NSFont.smallSystemFontSize
, color: .secondaryLabelColor)
]) ])
metaStackView.alignment = .leading metaStackView.alignment = .leading

9
ext/src/ui/popup/index.tsx
View File

@@ -229,15 +229,18 @@ class ReceiverEntry extends Component<ReceiverEntryProps, ReceiverEntryState> {
} }
public render () { public render () {
const { application } = this.props.receiver.status;
return ( return (
<li className="receiver"> <li className="receiver">
<div className="receiver-name"> <div className="receiver-name">
{ this.props.receiver.friendlyName } { this.props.receiver.friendlyName }
</div> </div>
<div className="receiver-address"> <div className="receiver-address"
{ this.props.receiver.status.application.isIdleScreen title={ !application.isIdleScreen && application.statusText }>
{ application.isIdleScreen
? `${this.props.receiver.host}:${this.props.receiver.port}` ? `${this.props.receiver.host}:${this.props.receiver.port}`
: this.props.receiver.status.application.statusText } : application.statusText }
</div> </div>
<button className="receiver-connect" <button className="receiver-connect"
onClick={ this.handleCast } onClick={ this.handleCast }

135
ext/src/ui/popup/styles/index.css
View File

@@ -1,68 +1,67 @@
body { body {
background: -moz-dialog; background: -moz-dialog;
color: -moz-dialogtext; color: -moz-dialogtext;
margin: initial; margin: initial;
font: message-box; font: message-box;
} }
.media-select { .media-select {
border-bottom: 1px solid rgba(0, 0, 0, 0.25); border-bottom: 1px solid rgba(0, 0, 0, 0.25);
margin: 0 1em; margin: 0 1em;
padding: 0.75em 0; padding: 0.75em 0;
} }
.media-select-dropdown { .media-select-dropdown {
display: inline-block; display: inline-block;
margin: 0 0.5em; margin: 0 0.5em;
} }
.receivers { .receivers {
list-style: none; list-style: none;
margin: initial; margin: initial;
padding: initial; padding: initial;
} }
.receiver { .receiver {
column-gap: 0.75em; column-gap: 0.75em;
display: grid; display: grid;
flex-direction: column; grid-template-columns: 1fr min-content;
grid-template-columns: min-content 1fr min-content; grid-template-rows: min-content min-content 1fr;
grid-template-rows: min-content min-content 1fr; grid-template-areas:
grid-template-areas: "name connect"
"name name connect" "address connect";
"address status connect"; justify-content: center;
justify-content: center; margin: 0 1em;
margin: 0 1em; padding: 0.75em 0;
padding: 0.75em 0; position: relative;
position: relative; }
}
.receiver:not(:last-child) {
.receiver:not(:last-child) { border-bottom: 1px solid rgba(0, 0, 0, 0.25);
border-bottom: 1px solid rgba(0, 0, 0, 0.25); }
}
.receiver-name,
.receiver-name, .receiver-address {
.receiver-address { overflow: hidden;
overflow: hidden; text-overflow: ellipsis;
text-overflow: ellipsis; white-space: nowrap;
white-space: nowrap; }
}
.receiver-name {
.receiver-name { font-size: 1.1em;
font-size: 1.1em; grid-area: name;
grid-area: name; }
} .receiver-address {
.receiver-address { color: GrayText;
color: GrayText; grid-area: address;
grid-area: address; }
} .receiver-status {
.receiver-status { grid-area: status;
grid-area: status; }
} .receiver-connect {
.receiver-connect { align-self: center;
align-self: center; grid-area: connect;
grid-area: connect; justify-self: end;
justify-self: end; min-width: 100px;
min-width: 100px; height: 32px;
height: 32px; }
}