@lancom/shared 0.0.62 → 0.0.66

package/components/editor/editor_layers/editor_layer_forms/editor_layer_form_text/font-family_select/font-family-select.scss

@@ -0,0 +1,147 @@
+@import "@/assets/scss/variables";
+
+$fonts: acme, allan, allan_bold, amaranth, anton, archivo_black, asap_medium, assistant_semibold, baloo_bhaina, bangers, baumans, berkshire_swash, bevan, black_ops_one, bonbon, boongaloo, bree_serif, bubblegum_sans, carter_one, caveat_b, caveat_brush, chela_one, cherry_swash_bold, chewy, coiny, concert_one, cookie, creepster, cutive, dancing_script_bold, dr_sugiyama, eagle_lake, fascinate, fredoka_one, fugaz_one, germania_one, graduate, grand_hotel, hanalei_fill, josefin_sans, just_me_again, kaushan_script, knewave, leckerli_one, lemonada, lemonada_bold, lexend_deca, londrina_solid, love_ya, luckiest_guy, mclaren, molle, montserrat_b, montserrat_m, mountains_of_christmas_bold, notable, noto_sans_jp, noto_sans_jp_black, oleo_script, open_sans_b, open_sans_eb, orbitron_medium, oswald_b, oswald_m, pacifico, passion_one, passion_one_bold, pattaya, patua_one, permanent_marker, playfair_display_bold, poppins_medium, press_start_2p, princess_sofia, pt_sans_bold, quantico, quicksand_bold, rakkas, rammetto_one, shojumaru, shrikhand, spicy_rice, squada_one, swanky, vampiro_one, vollkorn_b, vollkorn_sb, wendy_one, yeseva_one;
+$fonts_hebrew: secular_one, frank_ruhl_libre, rubik, bellefair, amatic_sc;
+$fonts_hindi: hind, kalam;
+$fonts_bengali: hind_siliguri;
+$fonts_gujarati: kumar_one;
+$fonts_kannada: baloo_tamma2;
+$fonts_malyalam: gayathri;
+$fonts_marathi: lohit_marathi;
+$fonts_tamil: pavanam;
+$fonts_telugu: suranna, timmana;
+$fonts_oriya: baloo_bhaina2;
+
+.FontFamilySelect {
+  &__wrapper {
+    .multiselect__option {
+      padding: 6px 3px 5px 16px !important;
+    }
+  }
+  &__inputs {
+    display: flex;
+  }
+  &__langs {
+    width: 170px;
+    margin-right: 10px;
+  }
+  &__single {
+    text-transform: uppercase;
+  }
+}
+
+.font-option {
+  color: transparent;
+  display: block;
+  height: 29px;
+  width: 100%;
+  background: url(../../../../../../static/images/fonts-sprite.png) no-repeat 0 0;
+  background-size: 167px auto;
+  &.hebrew {
+    background: url(../../../../../../static/images/fonts-hebrew-sprite.png) no-repeat 0 0;
+    background-size: 167px auto;
+  }
+  &.hindi {
+    background: url(../../../../../../static/images/fonts-hindi-sprite.png) no-repeat 0 0;
+    background-size: 167px auto;
+  }
+  &.bengali {
+    background: url(../../../../../../static/images/fonts-bengali-sprite.png) no-repeat 0 0;
+    background-size: 167px auto;
+  }
+  &.gujarati {
+    background: url(../../../../../../static/images/fonts-gujarati-sprite.png) no-repeat 0 0;
+    background-size: 167px auto;
+  }
+  &.kannada {
+    background: url(../../../../../../static/images/fonts-kannada-sprite.png) no-repeat 0 0;
+    background-size: 167px auto;
+  }
+  &.malyalam {
+    background: url(../../../../../../static/images/fonts-malyalam-sprite.png) no-repeat 0 0;
+    background-size: 167px auto;
+  }
+  &.marathi {
+    background: url(../../../../../../static/images/fonts-marathi-sprite.png) no-repeat 0 0;
+    background-size: 167px auto;
+  }
+  &.tamil {
+    background: url(../../../../../../static/images/fonts-tamil-sprite.png) no-repeat 0 0;
+    background-size: 167px auto;
+  }
+  &.telugu {
+    background: url(../../../../../../static/images/fonts-telugu-sprite.png) no-repeat 0 0;
+    background-size: 167px auto;
+  }
+  &.oriya {
+    background: url(../../../../../../static/images/fonts-oriya-sprite.png) no-repeat 0 0;
+    background-size: 167px auto;
+  }
+
+  @each $font in $fonts {
+    $i: index($fonts, $font);
+    &.#{$font} {
+      background-position: 0 #{-(($i - 1) * 29)}px;
+    }
+  }
+  @each $font in $fonts_hebrew {
+    $i: index($fonts_hebrew, $font);
+    &.#{$font} {
+      background-position: 0 #{-(($i - 1) * 29)}px;
+    }
+  }
+  @each $font in $fonts_hindi {
+    $i: index($fonts_hindi, $font);
+    &.#{$font} {
+      background-position: 0 #{-(($i - 1) * 29)}px;
+    }
+  }
+  @each $font in $fonts_bengali {
+    $i: index($fonts_bengali, $font);
+    &.#{$font} {
+      background-position: 0 #{-(($i - 1) * 29)}px;
+    }
+  }
+  @each $font in $fonts_gujarati {
+    $i: index($fonts_gujarati, $font);
+    &.#{$font} {
+      background-position: 0 #{-(($i - 1) * 29)}px;
+    }
+  }
+  @each $font in $fonts_kannada {
+    $i: index($fonts_kannada, $font);
+    &.#{$font} {
+      background-position: 0 #{-(($i - 1) * 29)}px;
+    }
+  }
+  @each $font in $fonts_malyalam {
+    $i: index($fonts_malyalam, $font);
+    &.#{$font} {
+      background-position: 0 #{-(($i - 1) * 29)}px;
+    }
+  }
+  @each $font in $fonts_marathi {
+    $i: index($fonts_marathi, $font);
+    &.#{$font} {
+      background-position: 0 #{-(($i - 1) * 29)}px;
+    }
+  }
+  @each $font in $fonts_tamil {
+    $i: index($fonts_tamil, $font);
+    &.#{$font} {
+      background-position: 0 #{-(($i - 1) * 29)}px;
+    }
+  }
+  @each $font in $fonts_telugu {
+    $i: index($fonts_telugu, $font);
+    &.#{$font} {
+      background-position: 0 #{-(($i - 1) * 29)}px;
+    }
+  }
+  @each $font in $fonts_oriya {
+    $i: index($fonts_oriya, $font);
+    &.#{$font} {
+      background-position: 0 #{-(($i - 1) * 29)}px;
+    }
+  }
+}

package/components/editor/editor_layers/editor_layer_forms/editor_layer_form_text/font-family_select/font-family-select.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="FontFamilySelect__wrapper">
+    <label
+      class="form-label"
+      @click="$refs.font.$el.focus()">
+      Choose typeface
+    </label>
+    <div class="FontFamilySelect__inputs">
+      <multiselect
+        v-model="lang"
+        class="FontFamilySelect__langs labelless"
+        :options="langs" />
+      <multiselect
+        ref="font"
+        v-model="model"
+        class="labelless"
+        :options="font_options"
+        value="value"
+        label="label"
+        placeholder=""
+        :searchable="true"
+        :allow-empty="false"
+        @select="select"
+        @open="open"
+        @close="close">
+        <div
+          slot="option"
+          slot-scope="props"
+          class="font-option FontFamilySelect__font-option"
+          :class="[props.option.value, lang]">
+        </div>
+        <span
+          slot="singleLabel"
+          slot-scope="props"
+          class="multiselect__single FontFamilySelect__single"
+          :style="{
+            fontFamily: props.option.label
+          }">
+          {{ props.option | selectedFontLabel }}
+        </span>
+      </multiselect>
+    </div>
+  </div>
+</template>
+
+<script>
+import { availableFonts, FONTS_LANGS, FONTS_LANGS_LIST, loadFont } from '@lancom/shared/assets/js/utils/fonts-helper';
+
+export default {
+  name: 'FontFamilySelect',
+  filters: {
+    selectedFontLabel(option) {
+      const { lang } = availableFonts.find(font => option.value === font.alias) || {};
+      switch (lang) {
+        case FONTS_LANGS.HEBREW:
+          return 'טקסט לדוגמא';
+        case FONTS_LANGS.HINDI:
+          return 'उदाहरण पाठ';
+        default:
+          return option.label;
+      }
+    }
+  },
+  props: {
+    value: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      currentValue: null,
+      isSelected: false,
+      isOpen: false,
+      lang: FONTS_LANGS.ENG,
+      langs: FONTS_LANGS_LIST
+    };
+  },
+  computed: {
+    model: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit('input', value);
+      }
+    },
+    currentLangFonts() {
+      return availableFonts.filter(f => f.lang === this.lang);
+    },
+    font_options() {
+      return this.currentLangFonts.map(({ label, alias, lang }) => ({ label, value: alias, lang }));
+    }
+  },
+  watch: {
+    lang() {
+      this.loadFonts();
+    }
+  },
+  mounted() {
+    this.currentValue = this.model;
+
+    this.$watch(
+      () => this.$refs.font && this.$refs.font.pointer,
+      index => {
+        if (this.isOpen) {
+          this.model = this.font_options[index];
+          this.loadFonts(index, index + 10);
+        }
+      }
+    );
+
+    this.loadFonts();
+  },
+  methods: {
+    select(font) {
+      this.isSelected = true;
+      this.$emit('select', font);
+    },
+    open() {
+      this.isSelected = false;
+      this.isOpen = true;
+      this.currentValue = { ...this.model };
+    },
+    close() {
+      this.isOpen = false;
+      if (!this.isSelected) {
+        this.select(this.currentValue);
+      }
+    },
+    async loadFonts(from = 0, to = 10) {
+      await Promise.all(
+        this.currentLangFonts.slice(from, to).map(font => loadFont(font.alias))
+      );
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import 'font-family-select';
+</style>

package/components/editor/editor_layers/editor_layer_forms/index.js

@@ -0,0 +1,7 @@
+import EditorLayerFormText from './editor_layer_form_text/editor-layer-form-text';
+import EditorLayerFormArt from './editor_layer_form_art/editor-layer-form-art';
+
+export default {
+  EditorLayerFormText,
+  EditorLayerFormArt
+};

package/components/editor/editor_layers/editor_layers_layer/editor-layers-layer.scss

@@ -0,0 +1,140 @@
+@import "@/assets/scss/variables";
+@import "@lancom/shared/assets/scss/ui_kit";
+
+.EditorLayersLayer {
+  &__wrapper {
+    padding: 30px 0px 20px 20px;
+    display: flex;
+    position: relative;
+    cursor: pointer;
+    user-select: none;
+    align-items: stretch;
+    border-bottom: 2px solid $grey_3;
+    position: relative;
+    &:before {
+      content: '';
+      position: absolute;
+      top: 30px;
+      left: 0;
+      bottom: 20px;
+      width: 2px;
+      background-color: transparent;
+      transition: background-color .2s ease-in-out;
+    }
+    &:hover:before {
+      background-color: $grey_3;
+    }
+    &.active:before {
+      background-color: $green;
+    }
+    @media (max-width: $bp-extra-small-max) {
+      padding-left: 8px;
+    }
+  }
+  &__thumb {
+    flex-shrink: 0;
+    width: 83px;
+    height: 83px;
+    background: transparent url(../../../../static/images/trasnparent-pattern.png) repeat 50%;
+    background-size: 18px;
+    border: 1px solid #e5e5e5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &-inner {
+      width: 90%;
+      height: 90%;
+      background-position: center;
+      background-size: contain;
+      background-repeat: no-repeat;
+    }
+
+    @media (max-width: $bp-extra-small-max) {
+      width: 67px;
+      height: 67px;
+    }
+  }
+  &__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding-left: 12px;
+    flex-grow: 1;
+  }
+  &__info {
+    width: calc(100% - 50px);
+    display: flex;
+    flex-direction: column;
+    &-row {
+      display: flex;
+      align-items: baseline;
+      & + & {
+        margin-top: 3px;
+      }
+    }
+
+    @media (max-width: $bp-extra-small-max) {
+      width: 100%;
+    }
+  }
+  &__badge {
+    @extend .lc_regular14;
+    background: $grey_3;
+    color: $black;
+    padding: 2px 18px;
+    border-radius: 2px;
+    display: inline-block;
+    margin-right: 4px;
+
+    @media (max-width: $bp-extra-small-max) {
+      font-size: 12px;
+    }
+  }
+  &__title {
+    margin-top: 2px;
+    color: $grey_1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  &__edit {
+    width: 100%;
+  }
+  &__remove {
+    position: absolute;
+    top: 16px;
+    right: 12px;
+    font-size: 18px;
+    color: #777;
+    cursor: pointer;
+  }
+  &__actions {
+    display: flex;
+    align-items: center;
+  }
+  &__action {
+    &:hover {
+      color: $black;
+    }
+  }
+  &__quality {
+    &-label {
+      font-size: 12px;
+      color: $black;
+    }
+    &-value {
+      margin-left: 12px;
+      font-size: 14px;
+      text-transform: capitalize;
+      &.too_small {
+        color: $error;
+      }
+      &.low_quality {
+        color: #f7c657;
+      }
+      &.good_quality {
+        color: $green;
+      }
+    }
+  }
+}

package/components/editor/editor_layers/editor_layers_layer/editor-layers-layer.vue

@@ -0,0 +1,127 @@
+<template>
+  <div
+    class="EditorLayersLayer__wrapper"
+    :class="{ active }"
+    @click="$emit('select')">
+    <i
+      class="icon-delete EditorLayersLayer__remove"
+      @click="$emit('remove')"></i>
+    <div class="EditorLayersLayer__thumb">
+      <i
+        v-if="layerIcon"
+        :class="layerIcon"></i>
+      <div
+        v-else-if="layer.type === 'art' && layer.url"
+        :style="{ 'background-image': `url(${layer.url})` }"
+        class="EditorLayersLayer__thumb-inner">
+      </div>
+    </div>
+    <div class="EditorLayersLayer__content">
+      <div class="EditorLayersLayer__info">
+        <div class="EditorLayersLayer__info-row">
+          <div class="EditorLayersLayer__badge">
+            {{ layer.type }}
+          </div>
+        </div>
+        <div class="EditorLayersLayer__info-row">
+          <div class="EditorLayersLayer__title">
+            {{ title }}
+          </div>
+        </div>
+        <div
+          v-if="artQuality"
+          class="EditorLayersLayer__info-row">
+          <div class="EditorLayersLayer__quality-label">
+            Print quality:
+          </div>
+          <div
+            class="EditorLayersLayer__quality-value"
+            :class="artQuality.class">
+            {{ artQuality.value }}
+          </div>
+        </div>
+      </div>
+      <div class="EditorLayersLayer__actions">
+        <div
+          v-if="layer.editableDetails"
+          class="lc_medium16 EditorLayersLayer__action"
+          @click.stop="$emit('edit')">
+          Edit
+        </div>
+        &nbsp;
+        &#124;
+        &nbsp;
+        <div
+          class="lc_medium16 EditorLayersLayer__action"
+          @click.stop="$emit('duplicate')">
+          Duplicate
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { number } from '@lancom/shared/assets/js/utils/filters';
+
+export default {
+  name: 'EditorLayersLayer',
+  filters: { number },
+  props: {
+    layer: {
+      type: Object,
+      required: true
+    },
+    active: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    layerIcon() {
+      return ({
+        text: 'icon-layer-text'
+      })[this.layer.type];
+    },
+    title() {
+      let title;
+      switch (this.layer.type) {
+        case 'text':
+          title = this.layer.copy;
+          break;
+        case 'art':
+          title = this.layer.fileName;
+          break;
+        default:
+          break;
+      }
+      return title;
+    },
+    artQuality() {
+      if (this.layer.type !== 'art') {
+        return null;
+      }
+      let quality;
+      switch (true) {
+        case this.layer.dpi < 100:
+          quality = 'too small';
+          break;
+        case this.layer.dpi >= 100 && this.layer.dpi < 150:
+          quality = 'low quality';
+          break;
+        case this.layer.dpi >= 150:
+          quality = 'good quality';
+          break;
+      }
+      return {
+        class: quality ? quality.replace(' ', '_') : null,
+        value: `${quality} / ${this.layer.dpi} DPI`
+      };
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'editor-layers-layer.scss';
+</style>

package/components/editor/editor_layers/editor_layers_toolbar/editor-layers-toolbar.scss

@@ -0,0 +1,75 @@
+@import "@/assets/scss/variables";
+@import "@lancom/shared/assets/scss/ui_kit";
+
+.EditorLayersToolbar {
+  &__wrapper {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-column-gap: 15px;
+    @media (max-width: $bp-extra-small-max) {
+      grid-column-gap: 6px;
+    }
+  }
+  &__popover {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    z-index: 999;
+  }
+  &__info {
+    font-size: 16px;
+    color: $green;
+    cursor: pointer;
+  }
+  &__option {
+    @extend .lc_medium18;
+    border: 1px solid $grey_3;
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    cursor: pointer;
+    box-shadow: $elevation0;
+    position: relative;
+    &-icon {
+      font-size: 40px;
+      color: $black;
+      margin-bottom: 6px;
+    }
+    transition: box-shadow .2s ease-in-out;
+
+    @media (max-width: $bp-extra-small-max) {
+      font-size: 12px;
+      white-space: nowrap;
+      &-icon {
+        font-size: 30px;
+      }
+    }
+
+    &:hover {
+      box-shadow: $elevation1;
+    }
+    &.disabled {
+      opacity: .5;
+      pointer-events: none;
+    }
+    &-progress {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: $white_high_emphasis;
+      opacity: .7;
+      &-indicator {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 0;
+        height: 100%;
+        background-color: $green;
+      }
+    }
+  }
+}