Merge pull request #463 from maurofmferrao/swift-2.0.0-beta

OSX-378: Widget timeline info fix
xibosignage · Jan 24, 2019 · c4c0c37 · c4c0c37
2 parents 34ebab5 + 7758fde
commit c4c0c37
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 33 deletions.
diff --git a/ui/src/css/designer.less b/ui/src/css/designer.less
@@ -246,13 +246,21 @@
     padding: 0 4px;
 }
 
-#layout-editor #layout-timeline .designer-widget .widgetTitle .widgetName {
+#layout-editor #layout-timeline .designer-widget .widgetName {
     font-style: italic;
     color: @timeline-widget-fg-color;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 50%;
+    float: left;
+    padding: 0 2px;
 }
 
-#layout-editor #layout-timeline .designer-widget .widgetTitle .widgetSubType {
+#layout-editor #layout-timeline .designer-widget .widgetSubType {
     color: @timeline-widget-fg-color2;
+    padding: 0 2px;
+    float: left;
 }
 
 #layout-editor #layout-timeline .designer-widget .widget-transition-container {
@@ -320,9 +328,15 @@
     color: @timeline-ghost-fg-color;
     font-weight: bold;
     float: left;
+    display: flex;
     height: 100%;
 }
 
+#layout-editor #layout-timeline .designer-widget-ghost .widgetName,
+#layout-editor #layout-timeline .designer-widget-ghost .widgetSubType {
+    color: @timeline-ghost-fg-color;
+}
+
 #layout-editor #layout-timeline .designer-widget-sortable-highlight {
     background: #ffe921;
     float: left;

diff --git a/ui/src/css/playlist-editor.less b/ui/src/css/playlist-editor.less
@@ -218,27 +218,25 @@
 .playlist-widget .widgetLabel {
     color: @playlist-editor-main-background-color;
     width: 25px;
-    display: inline-block;
     height: 100%;
     text-align: center;
+    float: left;
 }
 
-.playlist-widget .widgetTitle {
-    display: inline-block;
-}
-
-.playlist-widget .widgetTitle .widgetName {
+.playlist-widget .widgetName {
     font-style: italic;
-    color: @playlist-editor-widget-fg-color;overflow: hidden;
+    color: @playlist-editor-widget-fg-color;
+    overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    max-width: 150px;
+    max-width: 50%;
     float: left;
 }
 
-.playlist-widget .widgetTitle .widgetSubType {
+.playlist-widget .widgetSubType {
     color: @playlist-editor-widget-fg-color2;
-    padding-left: 5px;
+    padding: 0 2px;
+    float: left;
 }
 
 .playlist-widget i.editProperty:hover {

diff --git a/ui/src/templates/playlist-timeline-widget.hbs b/ui/src/templates/playlist-timeline-widget.hbs
@@ -2,14 +2,14 @@
     class="playlist-widget selectable {{#eq isValid 0}}invalid-widget{{/eq}} {{#if selected}}selected{{/if}} {{#if isEditable}}editable{{/if}} {{#if isPermissionsModifiable}}permissionsModifiable{{/if}} {{#if isDeletable}}deletable{{/if}}">
 
     <div class="widgetLabel timelineMediaItemColouringDefault timelineMediaItemColouring_{{ subType }} {{ widgetColouring }}">{{ duration }}</div>
-    <div class="widgetTitle" title="{{id}}">
-        <span class="widgetName">
-            {{widgetName}}
-        </span>
-        <span class="widgetSubType">
-            [{{ subType }}]
-        </span>
-    </div>
+
+    <span class="widgetSubType">
+        [{{ subType }}]
+    </span>
+
+    <span class="widgetName" title="{{widgetName}}">
+        {{widgetName}}
+    </span>
 
     {{#if audio}}
         <i class="fa fa-volume-up editProperty" data-property="Audio"></i>

diff --git a/ui/src/templates/timeline-ghost-widget.hbs b/ui/src/templates/timeline-ghost-widget.hbs
@@ -1,10 +1,11 @@
 <div id="{{ id }}" data-type="widget" class="designer-widget designer-widget-ghost" style="
 width: {{ durationPercentage }}%;">
-    <span class="widgetName">
-        {{widgetName}}
-    </span>
     <span class="widgetSubType">
         [{{ subType }}]
     </span>
+
+    <span class="widgetName">
+        {{widgetName}}
+    </span>
 </div>
 
diff --git a/ui/src/templates/timeline-widget.hbs b/ui/src/templates/timeline-widget.hbs
@@ -15,16 +15,13 @@ width: {{ durationPercentage }}%;">
         {{ duration }}
     </div>
 
-    <div class="widgetItem widgetInfo">
-         <div class="widgetTitle">
-            <span class="widgetName">
-                {{widgetName}}
-            </span>
-            <span class="widgetSubType">
-                [{{ subType }}]
-            </span>
-        </div>
-    </div>
+    <span class="widgetItem widgetSubType">
+        [{{ subType }}]
+    </span>
+
+    <span class="widgetItem widgetName" title="{{widgetName}}">
+        {{widgetName}}
+    </span>
 
     <div class="widgetItem widgetProperties">
         {{#if audio}}