mirror of
https://github.com/hensm/fx_cast.git
synced 2026-06-13 02:49:58 +00:00
Truncate receiver application status text
This commit is contained in:
@@ -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
|
||||||
|
|||||||
@@ -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 }
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user