TeaSpeak
/
TeaWeb
1
0
Fork 0
Code Issues 1 Pull Requests Activity

Correctly adjusting the channel connection handler list to the current font size

master
WolverinDEV 2021-01-07 11:13:24 +01:00
parent 26505f2aeb
commit fd590e5e10
2 changed files with 29 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
shared/js/ui/frames/connection-handler-list/Renderer.scss
View File

@ -12,7 +12,7 @@
transition: all $animation_length ease-in-out;
&.shown {
margin-top: -4px;
height: 24px;
height: 1.8em;
transition: all $animation_length ease-in-out;
}
@ -109,25 +109,34 @@
padding-left: 5px;
padding-right: 5px;
height: 24px;
height: 1.8em;
overflow: hidden;
border-bottom: 1px solid transparent;
border-bottom: .075em solid transparent;
@include transition(all ease-in-out $button_hover_animation_time, opacity ease-in-out 0);
.icon {
width: 16px;
height: 16px;
height: 1em;
width: 1em;
display: flex;
flex-direction: column;
justify-content: stretch;
align-self: center;
margin-right: 5px;
> img {
flex-grow: 1;
}
}
.name {
color: #a8a8a8;
line-height: 1.2em;
align-self: center;
margin-right: 20px;
margin-right: 1.2em;
position: relative;
@ -137,8 +146,8 @@
}
.buttonClose {
width: 16px;
height: 16px;
width: 1.1em;
height: 1.1em;
position: absolute;
right: 5px;
@ -162,7 +171,7 @@
position: absolute;
left: 0;
top: 0;
background: linear-gradient(to right, transparent calc(100% - 50px), #1e1e1e calc(100% - 25px));
background: linear-gradient(to right, transparent calc(100% - 3.5em), #1e1e1e calc(100% - 1.5em));
}
}
}
@ -171,7 +180,7 @@
background-color: #242425;
&.cutoffName .name:before {
background: linear-gradient(to right, transparent calc(100% - 50px), #242425 calc(100% - 25px));
background: linear-gradient(to right, transparent calc(100% - 3.5em), #242425 calc(100% - 1.5em));
}
}
@ -180,7 +189,7 @@
background-color: #2d2f32;
&.cutoffName .name:before {
background: linear-gradient(to right, transparent calc(100% - 50px), #2d2f32 calc(100% - 25px));
background: linear-gradient(to right, transparent calc(100% - 3.5em), #2d2f32 calc(100% - 1.5em));
}
}

17
shared/js/ui/frames/connection-handler-list/Renderer.tsx
View File

@ -35,26 +35,29 @@ const ConnectionHandler = React.memo((props: { handlerId: string, mode: Connecti
setStatus(event.status);
});
let displayedName;
let displayedName, displayedNameTitle;
let cutoffName = false;
let voiceReplaying = false;
let icon = <ClientIconRenderer icon={ClientIcon.ServerGreen} key={"default"} />;
let icon = <ClientIconRenderer icon={ClientIcon.ServerGreen} key={"default"} className={cssStyle.icon} />;
if(status === "loading") {
displayedName = tr("loading status");
displayedName = displayedNameTitle = tr("loading status");
} else {
switch (status.connectionState) {
case "connected":
cutoffName = status.handlerName.length > 30;
voiceReplaying = status.voiceReplaying;
displayedName = <React.Fragment key={"connected"}>{status.handlerName}</React.Fragment>;
icon = <RemoteIconRenderer icon={getIconManager().resolveIcon(status.serverIcon.iconId, status.serverIcon.serverUniqueId, props.handlerId)} />;
displayedNameTitle = status.handlerName;
icon = <RemoteIconRenderer icon={getIconManager().resolveIcon(status.serverIcon.iconId, status.serverIcon.serverUniqueId, props.handlerId)} className={cssStyle.icon} />;
break;
case "connecting":
displayedNameTitle = tr("Connecting to server");
displayedName = <><Translatable key={"connecting"}>Connecting to server</Translatable> <LoadingDots /></>;
break;
case "disconnected":
displayedNameTitle = tr("Not connected");
displayedName = <Translatable key={"not connected"}>Not connected</Translatable>;
break;
}
@ -72,10 +75,8 @@ const ConnectionHandler = React.memo((props: { handlerId: string, mode: Connecti
ref={props.refContainer}
x-handler-id={props.handlerId}
>
<div className={cssStyle.icon}>
{icon}
</div>
<div className={cssStyle.name} title={displayedName}>{displayedName}</div>
{icon}
<div className={cssStyle.name} title={displayedNameTitle}>{displayedName}</div>
<div className={cssStyle.buttonClose} onClick={() => {
events.fire("action_destroy_handler", { handlerId: props.handlerId })
}}>