bfg-common 1.5.92 → 1.5.94

package/components/common/browse/blocks/TitleNew.vue

@@ -1,145 +1,145 @@
-<template>
-  <div :style="blockWidth" class="title-block">
-    <div
-      :class="[
-        'title-block__container',
-        `title-block__container-${props.position}`,
-      ]"
-      :style="blockWidth"
-    >
-      <div
-        :style="blockTitleWidth"
-        class="title-block__title pointer"
-        @click="emits('sort')"
-      >
-        <b>{{ props.title }}</b>
-        <span class="sort-arrow-container">
-          <atoms-the-icon
-            v-show="props.sorting[0]"
-            :class="['sort-arrow', { down: !props.sorting[1] }]"
-            width="14px"
-            height="14px"
-            name="sort-arrow"
-          />
-        </span>
-      </div>
-      <div class="title-block__body">
-        <slot name="content"></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    title: string
-    width: number
-    sorting?: [boolean, boolean]
-    position: 'first-block' | 'second-block' | 'third-block'
-  }>(),
-  {
-    sorting: () => [false, false],
-    position: 'first-block',
-  }
-)
-const emits = defineEmits<{
-  (event: 'sort'): void
-}>()
-
-const blockWidth = computed<any>(() => ({ width: `${props.width}px` }))
-const blockTitleWidth = computed<any>(() => ({
-  width: `${
-    props.width -
-    (props.position === 'first-block' || props.position === 'third-block'
-      ? 12
-      : 24)
-  }px`,
-}))
-</script>
-
-<style scoped lang="scss">
-.title-block {
-  width: 100%;
-  min-height: 400px;
-  position: relative;
-
-  &__container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    flex-direction: column;
-    height: 400px;
-
-    &.title-block__container-first-block {
-      padding-right: 12px;
-
-      .title-block__body {
-        padding: 0 4px;
-      }
-    }
-
-    &.title-block__container-second-block {
-      padding-right: 12px;
-      padding-left: 12px;
-
-      .title-block__body {
-        padding: 0 4px;
-      }
-    }
-
-    &.title-block__container-third-block {
-      padding-left: 12px;
-
-      .title-block__body {
-        padding: 4px 12px;
-      }
-    }
-  }
-  &__title {
-    display: flex;
-    align-items: center;
-    flex: 0 0 auto;
-    background-color: var(--select-file-header-bg);
-    padding: 8px;
-    white-space: nowrap;
-    overflow: hidden !important;
-    text-overflow: ellipsis;
-    height: 32px;
-    padding: 8px 12px 8px 12px;
-    border-radius: 6px;
-    margin-bottom: 8px;
-
-    b {
-      font-family: Inter;
-      font-size: 12px;
-      font-weight: 500;
-      line-height: 14.52px;
-      text-align: left;
-      color: #9da6ad;
-
-      &:hover {
-        color: var(--select-file-header-arrow-color);
-      }
-    }
-
-    .sort-arrow-container {
-      width: 14px;
-      height: 14px;
-
-      .sort-arrow {
-        fill: var(--select-file-header-arrow-color);
-
-        &.down {
-          transform: rotate(180deg);
-        }
-      }
-    }
-  }
-  &__body {
-    flex: 1 1 auto;
-    overflow-y: auto;
-  }
-}
-</style>
+<template>
+  <div :style="blockWidth" class="title-block">
+    <div
+      :class="[
+        'title-block__container',
+        `title-block__container-${props.position}`,
+      ]"
+      :style="blockWidth"
+    >
+      <div
+        :style="blockTitleWidth"
+        class="title-block__title pointer"
+        @click="emits('sort')"
+      >
+        <b>{{ props.title }}</b>
+        <span class="sort-arrow-container">
+          <atoms-the-icon
+            v-show="props.sorting[0]"
+            :class="['sort-arrow', { down: !props.sorting[1] }]"
+            width="14px"
+            height="14px"
+            name="sort-arrow"
+          />
+        </span>
+      </div>
+      <div class="title-block__body">
+        <slot name="content"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    title: string
+    width: number
+    sorting?: [boolean, boolean]
+    position: 'first-block' | 'second-block' | 'third-block'
+  }>(),
+  {
+    sorting: () => [false, false],
+    position: 'first-block',
+  }
+)
+const emits = defineEmits<{
+  (event: 'sort'): void
+}>()
+
+const blockWidth = computed<any>(() => ({ width: `${props.width}px` }))
+const blockTitleWidth = computed<any>(() => ({
+  width: `${
+    props.width -
+    (props.position === 'first-block' || props.position === 'third-block'
+      ? 12
+      : 24)
+  }px`,
+}))
+</script>
+
+<style scoped lang="scss">
+.title-block {
+  width: 100%;
+  min-height: 400px;
+  position: relative;
+
+  &__container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    height: 400px;
+
+    &.title-block__container-first-block {
+      padding-right: 12px;
+
+      .title-block__body {
+        padding: 0 4px;
+      }
+    }
+
+    &.title-block__container-second-block {
+      padding-right: 12px;
+      padding-left: 12px;
+
+      .title-block__body {
+        padding: 0 4px;
+      }
+    }
+
+    &.title-block__container-third-block {
+      padding-left: 12px;
+
+      .title-block__body {
+        padding: 4px 12px;
+      }
+    }
+  }
+  &__title {
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+    background-color: var(--select-file-header-bg);
+    padding: 8px;
+    white-space: nowrap;
+    overflow: hidden !important;
+    text-overflow: ellipsis;
+    height: 32px;
+    padding: 8px 12px 8px 12px;
+    border-radius: 6px;
+    margin-bottom: 8px;
+
+    b {
+      font-family: Inter;
+      font-size: 12px;
+      font-weight: 500;
+      line-height: 14.52px;
+      text-align: left;
+      color: #9da6ad;
+
+      &:hover {
+        color: var(--select-file-header-arrow-color);
+      }
+    }
+
+    .sort-arrow-container {
+      width: 14px;
+      height: 14px;
+
+      .sort-arrow {
+        fill: var(--select-file-header-arrow-color);
+
+        &.down {
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+  &__body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+  }
+}
+</style>

package/components/common/browse/blocks/TitleOld.vue

@@ -1,91 +1,91 @@
-<template>
-  <div :style="blockWidth" class="title-block">
-    <div :style="blockWidth" class="title-block__container">
-      <div
-        :style="blockTitleWidth"
-        class="title-block__title pointer"
-        @click="emits('sort')"
-      >
-        <b>{{ props.title }}</b>
-        <atoms-the-icon
-          v-show="props.sorting[0]"
-          :class="['sort-arrow', { down: !props.sorting[1] }]"
-          width="14px"
-          height="14px"
-          name="sort-arrow"
-        />
-      </div>
-      <div class="title-block__body">
-        <slot name="content"></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = withDefaults(
-  defineProps<{
-    title: string
-    width: number
-    sorting?: [boolean, boolean]
-  }>(),
-  {
-    sorting: () => [false, false],
-  }
-)
-const emits = defineEmits<{
-  (event: 'sort'): void
-}>()
-
-const blockWidth = computed<any>(() => ({ width: `${props.width}px` }))
-const blockTitleWidth = computed<any>(() => ({ width: `${props.width - 2}px` }))
-</script>
-
-<style scoped lang="scss">
-.title-block {
-  width: 100%;
-  min-height: 400px;
-  position: relative;
-
-  &__container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    flex-direction: column;
-    height: 400px;
-    border-width: 1px;
-    border-style: solid;
-    border-image: initial;
-    background: var(--block-view-bg-color5);
-    border-color: var(--block-border-color2);
-  }
-  &__title {
-    display: inline-block;
-    flex: 0 0 auto;
-    background-color: var(--block-view-bg-color6);
-    border-bottom: 1px solid var(--block-border-color2);
-    padding: 8px;
-    white-space: nowrap;
-    overflow: hidden !important;
-    text-overflow: ellipsis;
-
-    b {
-      font-family: Metropolis, Avenir Next, Helvetica Neue, Arial, sans-serif;
-      font-size: 13px;
-      color: var(--global-font-color9);
-      font-weight: bolder;
-      letter-spacing: normal;
-    }
-    .sort-arrow {
-      &.down {
-        transform: rotate(180deg);
-      }
-    }
-  }
-  &__body {
-    flex: 1 1 auto;
-    overflow-y: auto;
-  }
-}
-</style>
+<template>
+  <div :style="blockWidth" class="title-block">
+    <div :style="blockWidth" class="title-block__container">
+      <div
+        :style="blockTitleWidth"
+        class="title-block__title pointer"
+        @click="emits('sort')"
+      >
+        <b>{{ props.title }}</b>
+        <atoms-the-icon
+          v-show="props.sorting[0]"
+          :class="['sort-arrow', { down: !props.sorting[1] }]"
+          width="14px"
+          height="14px"
+          name="sort-arrow"
+        />
+      </div>
+      <div class="title-block__body">
+        <slot name="content"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    title: string
+    width: number
+    sorting?: [boolean, boolean]
+  }>(),
+  {
+    sorting: () => [false, false],
+  }
+)
+const emits = defineEmits<{
+  (event: 'sort'): void
+}>()
+
+const blockWidth = computed<any>(() => ({ width: `${props.width}px` }))
+const blockTitleWidth = computed<any>(() => ({ width: `${props.width - 2}px` }))
+</script>
+
+<style scoped lang="scss">
+.title-block {
+  width: 100%;
+  min-height: 400px;
+  position: relative;
+
+  &__container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    height: 400px;
+    border-width: 1px;
+    border-style: solid;
+    border-image: initial;
+    background: var(--block-view-bg-color5);
+    border-color: var(--block-border-color2);
+  }
+  &__title {
+    display: inline-block;
+    flex: 0 0 auto;
+    background-color: var(--block-view-bg-color6);
+    border-bottom: 1px solid var(--block-border-color2);
+    padding: 8px;
+    white-space: nowrap;
+    overflow: hidden !important;
+    text-overflow: ellipsis;
+
+    b {
+      font-family: Metropolis, Avenir Next, Helvetica Neue, Arial, sans-serif;
+      font-size: 13px;
+      color: var(--global-font-color9);
+      font-weight: bolder;
+      letter-spacing: normal;
+    }
+    .sort-arrow {
+      &.down {
+        transform: rotate(180deg);
+      }
+    }
+  }
+  &__body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+  }
+}
+</style>

package/components/common/browse/blocks/contents/FilesOld.vue

@@ -1,72 +1,72 @@
-<template>
-  <ul class="file-view__container">
-    <template v-for="file in props.selectedFolderFiles" :key="file.name">
-      <li
-        :data-id="file.testId"
-        :class="[
-          'file-view',
-          { selected: file.name === props.selectedFile?.name },
-        ]"
-        @click="onSelectFile(file)"
-      >
-        <span :class="['file-view__icon', file.iconClassName]"></span>
-        <span class="file-view__text">{{ file.name }}</span>
-      </li>
-    </template>
-  </ul>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  selectedFolderFiles: any[]
-  selectedFile: any
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-file', value: any): void
-}>()
-
-const onSelectFile = (file: any): void => {
-  emits('select-file', file)
-}
-</script>
-
-<style scoped lang="scss">
-.file-view {
-  &__container {
-    list-style-position: inside;
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-
-    li {
-      line-height: 20px;
-      padding: 2px;
-      border-bottom: 1px solid #eee;
-      cursor: pointer;
-
-      &:hover {
-        background-color: #c6e7ff;
-        line-height: 20px;
-        padding: 2px;
-        border-bottom: 1px solid #eee;
-        cursor: pointer;
-      }
-      &.selected {
-        background-color: #a3d7ff;
-      }
-      span {
-        line-height: 20px;
-      }
-      span:first-of-type {
-        width: 16px;
-        height: 16px;
-        line-height: 20px;
-      }
-      &__text {
-        color: var(--global-font-color9);
-      }
-    }
-  }
-}
-</style>
+<template>
+  <ul class="file-view__container">
+    <template v-for="file in props.selectedFolderFiles" :key="file.name">
+      <li
+        :data-id="file.testId"
+        :class="[
+          'file-view',
+          { selected: file.name === props.selectedFile?.name },
+        ]"
+        @click="onSelectFile(file)"
+      >
+        <span :class="['file-view__icon', file.iconClassName]"></span>
+        <span class="file-view__text">{{ file.name }}</span>
+      </li>
+    </template>
+  </ul>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  selectedFolderFiles: any[]
+  selectedFile: any
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-file', value: any): void
+}>()
+
+const onSelectFile = (file: any): void => {
+  emits('select-file', file)
+}
+</script>
+
+<style scoped lang="scss">
+.file-view {
+  &__container {
+    list-style-position: inside;
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+
+    li {
+      line-height: 20px;
+      padding: 2px;
+      border-bottom: 1px solid #eee;
+      cursor: pointer;
+
+      &:hover {
+        background-color: #c6e7ff;
+        line-height: 20px;
+        padding: 2px;
+        border-bottom: 1px solid #eee;
+        cursor: pointer;
+      }
+      &.selected {
+        background-color: #a3d7ff;
+      }
+      span {
+        line-height: 20px;
+      }
+      span:first-of-type {
+        width: 16px;
+        height: 16px;
+        line-height: 20px;
+      }
+      &__text {
+        color: var(--global-font-color9);
+      }
+    }
+  }
+}
+</style>