Fix text wrapping in SourceSelector (stream-labs#2229)

ssmbcloud-ops · Oct 30, 2019 · aa06a69 · aa06a69
1 parent d5492f4
commit aa06a69
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 33 deletions.
diff --git a/app/app.g.less b/app/app.g.less
@@ -300,6 +300,19 @@ a,
   }
 }
 
+.layer-icon {
+  display: inline-block;
+  text-align: left;
+  width: 16px;
+  margin-right: 8px;
+
+  i,
+  .fa {
+    font-size: 12px;
+    font-weight: 700;
+  }
+}
+
 // TODO: add "disable" and "enable" styles for form controls to styleguide
 .input {
   &.disabled {

diff --git a/app/components/SourceSelector.vue b/app/components/SourceSelector.vue
@@ -57,15 +57,17 @@
       </template>
 
       <template slot="sidebar" slot-scope="{ node }" v-if="canShowActions(node.data.id)">
-        <i
-          v-if="selectiveRecordingEnabled"
-          class="source-selector-action"
-          v-tooltip="selectiveRecordingTooltip(node.data.id)"
-          :class="[selectiveRecordingClassesForSource(node.data.id), isLocked(node.data.id) ? 'disabled' : '']"
-          @click.stop="cycleSelectiveRecording(node.data.id)"
-          @dblclick.stop="() => {}" />
-        <i class="source-selector-action" :class="lockClassesForSource(node.data.id)" @click.stop="toggleLock(node.data.id)" @dblclick.stop="() => {}"></i>
-        <i class="source-selector-action" :class="visibilityClassesForSource(node.data.id)" @click.stop="toggleVisibility(node.data.id)" @dblclick.stop="() => {}"></i>
+        <div class="icon-bar">
+          <i
+            v-if="selectiveRecordingEnabled"
+            class="source-selector-action"
+            v-tooltip="selectiveRecordingTooltip(node.data.id)"
+            :class="[selectiveRecordingClassesForSource(node.data.id), isLocked(node.data.id) ? 'disabled' : '']"
+            @click.stop="cycleSelectiveRecording(node.data.id)"
+            @dblclick.stop="() => {}" />
+          <i class="source-selector-action" :class="lockClassesForSource(node.data.id)" @click.stop="toggleLock(node.data.id)" @dblclick.stop="() => {}"></i>
+          <i class="source-selector-action" :class="visibilityClassesForSource(node.data.id)" @click.stop="toggleVisibility(node.data.id)" @dblclick.stop="() => {}"></i>
+        </div>
       </template>
 
     </sl-vue-tree>
@@ -78,19 +80,6 @@
 @import "../styles/index";
 @import "~sl-vue-tree/dist/sl-vue-tree-dark.css";
 
-.source-selector-action {
-  display: inline-block;
-  width: 16px;
-  text-align: center;
-  opacity: 0.26;
-  margin-left: 8px;
-  color: var(--icon);
-}
-
-.icon--active {
-  color: var(--teal);
-}
-
 .fa.disabled,
 i.disabled {
   opacity: 0.26;
@@ -108,6 +97,8 @@ i.disabled {
 }
 
 .sl-vue-tree-node-item {
+  align-items: center;
+
   &:hover,
   &.sl-vue-tree-selected {
     .transition();
@@ -121,21 +112,38 @@ i.disabled {
   }
 }
 
-.title-container {
-  display: inline-block;
-  color: var(--title);
+.sl-vue-tree-title {
+  min-width: 0;
+
+  .item-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
+</style>
 
-.layer-icon {
+<style lang="less" scoped>
+.source-selector-action {
   display: inline-block;
-  text-align: left;
   width: 16px;
-  margin-right: 8px;
+  text-align: center;
+  opacity: 0.26;
+  margin-left: 8px;
+  color: var(--icon);
+}
 
-  i,
-  .fa {
-    font-size: 12px;
-    font-weight: 700;
-  }
+.icon--active {
+  color: var(--teal);
+}
+
+.title-container {
+  display: inline-block;
+  color: var(--title);
+}
+
+.icon-bar {
+  display: flex;
+  flex-wrap: nowrap;
 }
 </style>