Fix text overflow on multiple places (#2350)

relates to xibosignage/xibo#3328 - Viewer bottom bar - Widget in Playlist view - External Playlist editor header
xibosignage · Feb 6, 2024 · 0b8e983 · 0b8e983
1 parent 6645256
commit 0b8e983
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 10 deletions.
diff --git a/ui/src/style/bottombar.scss b/ui/src/style/bottombar.scss
@@ -99,6 +99,14 @@
 
                 .label-name {
                     line-height: 1;
+                    display: flex;
+                    gap: 8px;
+
+                    & > .name {
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                    }
                 }
             }
 

diff --git a/ui/src/style/forms.scss b/ui/src/style/forms.scss
@@ -428,12 +428,12 @@
     text-align: center;
     padding: 6px;
     background-color: $xibo-color-primary-l60;
+    color: $xibo-color-primary-l5;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 
     .widget-info-name {
-        color: $xibo-color-primary-l5;
         font-weight: bold;
     }
 }

diff --git a/ui/src/style/layout-editor.scss b/ui/src/style/layout-editor.scss
@@ -82,6 +82,9 @@ body.editor-opened {
 .main-panel, .playlist-panel {
     flex: 1;
 
+    /* Prevent growing more than the allocated space, a fix for overlay in the viewer toolbar */
+    max-width: calc(100% - 320px);
+
     .main-panel-wrapper {
         position: relative;
         height: 100%;

diff --git a/ui/src/style/playlist-editor.scss b/ui/src/style/playlist-editor.scss
@@ -113,6 +113,9 @@ $timeline-step-height: 22px;
             &--left {
                 display: flex;
                 column-gap: 10px;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
 
                 .playlist-info-widgets,
                 .playlist-info-duration {
@@ -132,6 +135,9 @@ $timeline-step-height: 22px;
         line-height: 1;
         font-weight: bold;
         color: $playlist-editor-main-fb-color;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 
     .container-designer {
@@ -366,6 +372,9 @@ $timeline-step-height: 22px;
                     flex: 1;
                     display: flex;
                     flex-direction: column;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
                 }
 
                 .widgetLabel {
@@ -534,7 +543,7 @@ $timeline-step-height: 22px;
 
         .footer-controls {
             background-color: $xibo-color-primary-d60;
-            width: $left-bar-width;
+            min-width: $left-bar-width;
             height: 100%;
             display: flex;
             justify-content: space-evenly;
@@ -570,13 +579,15 @@ $timeline-step-height: 22px;
             color: $xibo-color-neutral-100;
             background-color: $xibo-color-primary;
             flex: 1;
+            width: calc(100% - 140px);
             height: 100%;
             display: flex;
             align-items: center;
             justify-content: space-between;
 
             .selected-info {
                 color: $xibo-color-neutral-0;
+                max-width: calc(100% - 80px);
                 padding: 0 12px;
                 display: flex;
                 flex-direction: row;
@@ -587,6 +598,7 @@ $timeline-step-height: 22px;
                 }
 
                 .playlist-info-block {
+                    max-width: 50%;
                     &:first-child {
                         margin-right: 8px;
                     }
@@ -598,6 +610,9 @@ $timeline-step-height: 22px;
 
                 .label-name {
                     line-height: 1;
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
                 }
             }
 

diff --git a/ui/src/templates/bottombar-viewer.hbs b/ui/src/templates/bottombar-viewer.hbs
@@ -4,27 +4,27 @@
         {{#eq object.type "widget"}}
             <div class="info">
                 {{#ifCond object.widgetName '||' object.moduleName}}
-                    <div class="label-name align-middle d-inline-block">
-                        <strong>{{objectTypeName}}</strong> <span title="{{trans.widgetName}}">{{#if object.widgetName}}"{{object.widgetName}}"{{/if}}</span>
+                    <div class="label-name">
+                        <strong>{{objectTypeName}}</strong> <div class="name" title="{{trans.widgetName}} {{object.widgetName}}">{{#if object.widgetName}}"{{object.widgetName}}"{{/if}}</div>
                     </div>
                 {{/ifCond}}
             </div>
         {{else eq object.type "element"}}
             <div class="info">
-                <div class="label-name align-middle">
-                    <strong>{{objectTypeName}}</strong> | <span title="{{trans.templateName}}">{{object.template.title}}</span>{{#if object.elementName}} - <span title="{{trans.elementName}}">"{{object.elementName}}"</span>{{/if}}
+                <div class="label-name">
+                    <strong>{{objectTypeName}}</strong> | <div title="{{trans.templateName}}">{{object.template.title}}</div>{{#if object.elementName}} - <div class="name" title="{{trans.elementName}}">"{{object.elementName}}"</div>{{/if}}
                 </div>
             </div>
         {{else eq object.type "element-group"}}
             <div class="info">
-                <div class="label-name align-middle">
-                    <strong>{{objectTypeName}}</strong>{{#if object.elementGroupName}} - <span title="{{trans.elementGroupName}}">"{{object.elementGroupName}}"</span>{{/if}}
+                <div class="label-name">
+                    <strong>{{objectTypeName}}</strong>{{#if object.elementGroupName}} - <div class="name" title="{{trans.elementGroupName}}">"{{object.elementGroupName}}"</div>{{/if}}
                 </div>
             </div>
         {{else}}
             <div class="info">
-                <div class="label-name align-middle">
-                    <strong>{{objectTypeName}}</strong> <span title="{{trans.regionName}}">{{#if object.name}}"{{object.name}}"{{/if}}</span>
+                <div class="label-name">
+                    <strong>{{objectTypeName}}</strong> <div class="name" title="{{trans.regionName}}">{{#if object.name}}"{{object.name}}"{{/if}}</div>
                 </div>
             </div>
         {{/eq}}