@eturnity/eturnity_reusable_components 8.7.5-EPIC-8593 → 8.7.5-EPIC-8593.1

package/src/components/inputs/inputText/index.vue

@@ -21,6 +21,7 @@
         <InfoText
           v-if="infoTextMessage != ''"
           :align-arrow="infoTextAlign"
+          :app-theme="appTheme"
           data-test-id="info_text_message"
           :size="fontSize ? fontSize : '16px'"
           :text="infoTextMessage"
@@ -263,6 +264,11 @@
         default: '',
         type: String,
       },
+      appTheme: {
+        type: String,
+        required: false,
+        default: 'light',
+      },
       alignItems: {
         required: false,
         default: 'horizontal',

package/src/components/inputs/select/index.vue

@@ -8,7 +8,9 @@
     <InputWrapper
       :align-items="alignItems"
       :has-label="!!label && label.length > 0"
+      :min-width="minWidth"
       :no-relative="noRelative"
+      :text-center="textCenter"
     >
       <LabelWrapper
         v-if="label"
@@ -72,6 +74,7 @@
           :show-border="showBorder"
           :show-disabled-background="showDisabledBackground"
           :table-padding-left="tablePaddingLeft"
+          :text-center="textCenter"
           @click="toggleDropdown"
           @keydown="onKeyDown"
         >
@@ -110,6 +113,7 @@
             <slot name="selector" :selected-value="selectedValue"></slot>
           </Selector>
           <Caret
+            v-if="showCaret"
             class="caret_dropdown"
             :color-mode="colorMode"
             @click.stop="toggleCaretDropdown"
@@ -274,11 +278,13 @@
     selectWidth: String,
     optionWidth: String,
     noRelative: Boolean,
+    textCenter: Boolean,
   }
   const Container = styled('div', inputProps)`
     width: ${(props) => props.selectWidth};
     position: ${(props) => (props.noRelative ? 'static' : 'relative')};
     display: inline-block;
+    text-align: ${(props) => (props.textCenter ? 'center' : 'left')};
   `
 
   const LabelWrapperAttrs = { infoTextMessage: Boolean }
@@ -315,6 +321,7 @@
     showDisabledBackground: Boolean,
     colorMode: String,
     isSearchBarVisible: Boolean,
+    textCenter: Boolean,
   }
   const SelectButton = styled('div', selectButtonAttrs)`
     position: ${(props) => (props.noRelative ? 'static' : 'relative')};
@@ -335,7 +342,7 @@
               ? props.tablePaddingLeft
               : props.paddingLeft
           }`};
-    text-align: left;
+    text-align: ${(props) => (props.textCenter ? 'center' : 'left')};
     min-height: ${(props) =>
       props.selectHeight
         ? props.selectHeight
@@ -440,6 +447,7 @@
   const inputAttrs = {
     alignItems: String,
     hasLabel: Boolean,
+    minWidth: String,
     noRelative: Boolean,
   }
   const InputWrapper = styled('div', inputAttrs)`
@@ -647,6 +655,16 @@
         type: String,
         required: false,
       },
+      showCaret: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+      textCenter: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
 
     data() {

package/src/components/modals/modal/index.vue

@@ -8,14 +8,19 @@
   >
     <ModalContainer
       v-if="isOpen"
+      :is-loading="isLoading"
       :overflow="overflowRule"
       @click="onClickModalContainer"
     >
       <Spinner v-if="isLoading" :limited-to-modal="true" size="50px" />
-      <ContentContainer :visible="!isLoading">
+      <ContentContainer v-if="!isLoading">
         <slot></slot>
       </ContentContainer>
-      <CloseButton v-if="!hideClose" class="close" @click="onCloseModal()" />
+      <CloseButton
+        v-if="!hideClose && !isLoading"
+        class="close"
+        @click="onCloseModal()"
+      />
     </ModalContainer>
   </PageWrapper>
 </template>
@@ -62,7 +67,7 @@
   }
 `
 
-  const modalContainerAttrs = { overflow: String }
+  const modalContainerAttrs = { overflow: String, isLoading: Boolean }
   const ModalContainer = styled('div', modalContainerAttrs)`
     align-self: center;
     justify-self: center;
@@ -74,8 +79,8 @@
     overflow: ${(props) => props.overflow};
     max-width: 95%;
     max-height: 95%;
-    min-width: 100px;
-    min-height: 100px;
+    min-width: ${(props) => (props.isLoading ? '400px' : '100px')};
+    min-height: ${(props) => (props.isLoading ? '500px' : '100px')};
 
     ::-webkit-scrollbar {
       width: 0.3em;

package/src/components/paginationV2/index.vue

@@ -0,0 +1,175 @@
+<template>
+  <!-- Check, if pages more than 1 -->
+  <PaginationWrapper v-if="paginationParams.pages > 1">
+    <PaginationLink v-if="paginationParams.previous" @click="fetchPage(1)">
+      <ArrowIconContainer>
+        <RCIcon name="start_of_the_list" size="14px" />
+      </ArrowIconContainer>
+    </PaginationLink>
+
+    <PaginationLink
+      v-if="paginationParams.previous"
+      @click="fetchPage(paginationParams.previous)"
+    >
+      <ArrowIconContainer>
+        <RCIcon name="arrow_left" size="14px" />
+      </ArrowIconContainer>
+    </PaginationLink>
+
+    <!-- Current block -->
+    <SelectWrapper>
+      <RCSelect
+        :button-font-color="getTheme.colors.gray1"
+        :dropdown-font-color="getTheme.colors.gray1"
+        font-size="14px"
+        :has-select-button-padding="false"
+        :is-auto-search="false"
+        :is-searchable="false"
+        :label-font-color="getTheme.colors.gray1"
+        left-padding="0px"
+        min-width="0px"
+        no-border
+        :no-max-width="true"
+        option-width="75px"
+        select-width="100%"
+        :show-border="false"
+        :show-caret="false"
+        text-center
+        :value="currentPage"
+        @input-change="fetchPage($event)"
+      >
+        <template #selector>
+          <SelectText>
+            {{ currentPage }} of {{ paginationParams.pages }}
+          </SelectText>
+        </template>
+        <template #dropdown>
+          <RCOption
+            v-for="number in paginationNumbers()"
+            :key="number"
+            text-center
+            :value="number"
+          >
+            {{ number }}
+          </RCOption>
+        </template>
+      </RCSelect>
+    </SelectWrapper>
+
+    <!-- Forward button -->
+    <PaginationLink
+      v-if="paginationParams.next"
+      @click="fetchPage(paginationParams.next)"
+    >
+      <ArrowIconContainer>
+        <RCIcon name="arrow_right" size="14px" />
+      </ArrowIconContainer>
+    </PaginationLink>
+    <PaginationLink
+      v-if="paginationParams.next"
+      @click="fetchPage(paginationParams.pages)"
+    >
+      <ArrowIconContainer>
+        <RCIcon name="end_of_the_list" size="14px" />
+      </ArrowIconContainer>
+    </PaginationLink>
+  </PaginationWrapper>
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+  import RCIcon from '../icon'
+  import RCSelect from '../inputs/select'
+  import RCOption from '../inputs/select/option'
+  import theme from '@/assets/theme.js'
+
+  const PaginationWrapper = styled.nav`
+    gap: 5px;
+    font-size: 13px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    align-items: center;
+  `
+  const PaginationLink = styled.div`
+    display: flex;
+    padding: 0px 5px;
+    margin: 0 2px;
+    text-align: center;
+    border-radius: 3px;
+    white-space: nowrap;
+    cursor: pointer;
+    color: ${(props) => props.theme.colors.brightBlue};
+
+    &.active {
+      color: ${(props) => props.theme.colors.white};
+      background-color: ${(props) => props.theme.colors.brightBlue};
+      padding: 7px 12px;
+      border-radius: 4px;
+    }
+  `
+  const ArrowIconContainer = styled.div`
+    display: flex;
+    align-items: center;
+  `
+
+  const SelectText = styled.div`
+    font-size: 14px;
+    color: ${(props) => props.theme.colors.grey1};
+  `
+
+  const SelectWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    width: 75px;
+  `
+
+  export default {
+    name: 'PaginationV2',
+    components: {
+      PaginationWrapper,
+      PaginationLink,
+      RCIcon,
+      RCSelect,
+      RCOption,
+      SelectWrapper,
+      SelectText,
+      ArrowIconContainer,
+    },
+    props: {
+      fetchPage: {
+        type: Function,
+        required: true,
+      },
+      currentPage: {
+        type: Number,
+        required: true,
+      },
+      paginationParams: {
+        type: Object,
+        required: true,
+      },
+    },
+    data() {
+      return {
+        selectedValue: this.currentPage,
+      }
+    },
+    computed: {
+      getTheme() {
+        return theme
+      },
+    },
+    methods: {
+      getNewProjects(num) {
+        this.$emit('on-pagination-change', num)
+      },
+      paginationNumbers() {
+        return Array.from(
+          { length: this.paginationParams.pages },
+          (_, i) => i + 1
+        )
+      },
+    },
+  }
+</script>

package/src/components/projectMarker/index.vue

@@ -59,7 +59,8 @@
           <MainButton :text="$gettext('Delete')" @click="onDelete" />
           <MainButton
             :text="$gettext('Cancel')"
-            type="cancel"
+            type="primary"
+            variant="cancel"
             @click="closeDeleteModal"
           />
         </CtaContainer>

package/src/components/selectedOptions/index.vue

@@ -153,6 +153,7 @@
     width: auto;
     max-width: 70%;
     transform: translateX(-50%);
+    z-index: 999;
   `
 
   const CenterPageContainer = styled.div`

package/src/components/sideMenu/index.vue

@@ -9,34 +9,54 @@
           v-if="!item.children"
           :key="idx"
           :data-id="`sub_menu_settings_${item.key}`"
+          :fill-type="item.icon === 'free_technology' ? 'stroke' : 'fill'"
           :is-active="activeTab === item.key || activeParentTab === item.key"
           @click="$emit('tab-click', { activeKey: item.key })"
         >
-          <IconContainer
-            :is-active="activeTab === item.key || activeParentTab === item.key"
-          >
-            <Icon color="#fff" cursor="pointer" :name="item.icon" size="18px" />
+          <IconContainer :is-active="activeTab === item.key">
+            <Icon
+              :color="
+                activeTab === item.key ? theme.semanticColors.purple[500] : ''
+              "
+              cursor="pointer"
+              :fill-type="item.fillType"
+              :name="item.icon"
+              size="18px"
+            />
           </IconContainer>
-          <ListText>{{ $gettext(item.label) }}</ListText>
+          <ListText :is-active="activeTab === item.key">{{
+            $gettext(item.label)
+          }}</ListText>
         </ListItem>
         <CollapseWrapper v-else :key="idx + item.key">
           <CollapseContainer
             :data-id="`sub_menu_settings_${item.key}`"
+            :is-active="activeParentTab === item.key"
             @click="toggleActiveDropdown(item.key)"
           >
             <IconContainer :is-active="activeParentTab === item.key">
               <Icon
-                color="#fff"
+                :color="
+                  activeParentTab === item.key
+                    ? theme.semanticColors.purple[500]
+                    : ''
+                "
                 cursor="pointer"
                 :name="item.icon"
                 size="18px"
               />
             </IconContainer>
-            <ListText>{{ $gettext(item.label) }}</ListText>
+            <ListText :is-active="activeTab === item.key">{{
+              $gettext(item.label)
+            }}</ListText>
             <ArrowContainer>
               <Icon
-                color="white"
-                :name="activeDropdown === item.key ? 'arrow_up' : 'arrow_down'"
+                :color="theme.semanticColors.grey[800]"
+                :name="
+                  activeDropdown === item.key
+                    ? 'arrow_up_unfilled'
+                    : 'arrow_down_unfilled'
+                "
                 size="10px"
               />
             </ArrowContainer>
@@ -68,7 +88,7 @@
         @click="$emit('on-logout')"
       >
         <RotateIcon
-          color="#fff"
+          :color="theme.semanticColors.teal[800]"
           cursor="pointer"
           name="initial_situation"
           size="18px"
@@ -83,11 +103,11 @@
   import styled from 'vue3-styled-components'
   import Icon from '../icon'
   import Spinner from '../spinner'
+  import theme from '@/assets/theme.js'
 
   const PageAttrs = { isLoading: Boolean }
   const PageContainer = styled('div', PageAttrs)`
-    background-color: ${(props) =>
-      props.isLoading ? props.theme.colors.white : props.theme.colors.grey6};
+    background-color: ${(props) => props.theme.semanticColors.grey[100]};
     padding: 14px 12px;
     min-width: 220px;
     display: flex;
@@ -100,7 +120,7 @@
     grid-gap: 6px;
   `
 
-  const IconAttrs = { isActive: Boolean, isButton: Boolean }
+  const IconAttrs = { isActive: Boolean, isButton: Boolean, fillType: String }
 
   const ListItem = styled('div', IconAttrs)`
     display: grid;
@@ -109,19 +129,28 @@
     grid-gap: 20px;
     cursor: pointer;
     padding: 4px;
-    border-radius: 6px;
+    border-radius: 4px;
     background-color: ${(props) =>
-      props.isActive ? 'rgba(255, 255, 255, 0.1)' : ''};
+      props.isActive ? props.theme.semanticColors.purple[50] : ''};
+    color: ${(props) =>
+      props.isActive
+        ? props.theme.semanticColors.purple[500]
+        : props.theme.semanticColors.teal[800]};
 
     :hover {
-      background-color: rgba(255, 255, 255, 0.1);
+      background-color: ${(props) => props.theme.semanticColors.purple[100]};
+      color: ${(props) => props.theme.semanticColors.purple[500]};
+      svg path:not(.fix) {
+        ${(props) => props.fillType}: ${(props) =>
+          props.theme.semanticColors.purple[500]};
+      }
     }
   `
 
-  const ListText = styled.div`
-    font-size: 16px;
-    font-weight: 700;
-    color: ${(props) => props.theme.colors.white};
+  const ListTextAttrs = { isActive: Boolean }
+  const ListText = styled('div', ListTextAttrs)`
+    font-size: 14px;
+    font-weight: 400;
   `
 
   const IconContainer = styled('div', IconAttrs)`
@@ -130,18 +159,16 @@
     justify-items: center;
     width: 32px;
     height: 32px;
-    background-color: ${(props) =>
-      props.isActive ? props.theme.colors.red : 'rgba(255, 255, 255, 0.2)'};
     border-radius: 6px;
 
     ${({ isButton = false }) =>
       isButton &&
       `
-  cursor: pointer;
-  &:hover {
-    background-color: rgba(255, 255, 255, 0.3);
-  }
-  `}
+        cursor: pointer;
+        &:hover {
+          background-color: ${(props) =>
+            props.theme.semanticColors.purple[100]};
+        `}
   `
 
   const SpinnerContainer = styled.div`
@@ -161,7 +188,7 @@
   const AppVersion = styled.p`
     font-size: 11px;
     line-height: 13px;
-    color: ${(props) => props.theme.colors.white};
+    color: ${(props) => props.theme.semanticColors.teal[800]};
     margin-right: 6px;
   `
 
@@ -174,30 +201,46 @@
     cursor: pointer;
     margin-left: 65px;
     padding: 8px;
-    border-radius: 6px;
-    color: ${(props) => props.theme.colors.white};
-    font-weight: 700;
-    ${({ isActive }) =>
-      isActive &&
-      `
-    background: rgba(255, 255, 255, 0.1);
-  `}
+    border-radius: 4px;
+    color: ${(props) =>
+      props.isActive
+        ? props.theme.semanticColors.purple[500]
+        : props.theme.semanticColors.teal[800]};
+    font-weight: 400;
+    font-size: 14px;
+    background: ${(props) =>
+      props.isActive ? props.theme.semanticColors.purple[50] : ''};
 
     &:hover {
-      background: rgba(255, 255, 255, 0.1);
+      background: ${(props) => props.theme.semanticColors.purple[100]};
+      color: ${(props) => props.theme.semanticColors.purple[500]} !important;
     }
   `
 
-  const CollapseContainer = styled.div`
+  const CollapseContainerAttrs = { isActive: Boolean }
+  const CollapseContainer = styled('div', CollapseContainerAttrs)`
     display: grid;
     grid-template-columns: auto 1fr auto;
     grid-gap: 20px;
     padding: 4px;
+    padding-right: 13px;
     border-radius: 6px;
     align-items: center;
     cursor: pointer;
+    background: ${(props) =>
+      props.isActive ? props.theme.semanticColors.purple[50] : ''};
+
+    div {
+      color: ${(props) =>
+        props.isActive ? props.theme.semanticColors.purple[500] : ''};
+    }
+
     &:hover {
-      background: rgba(255, 255, 255, 0.1);
+      background: ${(props) => props.theme.semanticColors.purple[100]};
+      color: ${(props) => props.theme.semanticColors.purple[500]};
+      svg path:not(.fix) {
+        fill: ${(props) => props.theme.semanticColors.purple[500]};
+      }
     }
   `
 
@@ -254,17 +297,9 @@
     data() {
       return {
         activeDropdown: null,
+        theme,
       }
     },
-    methods: {
-      toggleActiveDropdown(value) {
-        if (this.activeDropdown === value) {
-          this.activeDropdown = null
-        } else {
-          this.activeDropdown = value
-        }
-      },
-    },
     watch: {
       activeTab: {
         // once active tab is received, check if any parent
@@ -277,5 +312,14 @@
         once: true,
       },
     },
+    methods: {
+      toggleActiveDropdown(value) {
+        if (this.activeDropdown === value) {
+          this.activeDropdown = null
+        } else {
+          this.activeDropdown = value
+        }
+      },
+    },
   }
 </script>