Truncate receiver application status text

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

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

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 }

View File

@@ -24,12 +24,11 @@ body {
.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 name connect" "name connect"
"address status connect"; "address connect";
justify-content: center; justify-content: center;
margin: 0 1em; margin: 0 1em;
padding: 0.75em 0; padding: 0.75em 0;