@eturnity/eturnity_reusable_components 6.37.0-EPDM-8148.6 → 6.37.0-EPDM-2198.1

package/src/components/pageTitle/index.vue

@@ -1,5 +1,14 @@
 <template>
-  <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">{{ text }}</title-text>
+  <title-wrap :hasInfoText="!!infoText">
+    <title-text :color="color" :fontSize="fontSize" :uppercase="uppercase">
+      {{ text }}
+    </title-text>
+    <info-text
+      v-if="!!infoText"
+      :text="infoText"
+      :alignArrow="infoAlign"
+    />
+  </title-wrap>
 </template>
 
 <script>
@@ -10,20 +19,32 @@
 //   color="red"
 // />
 import styled from "vue-styled-components"
+import InfoText from "../infoText"
 
-const textAttrs = { color: String, fontSize: String, uppercase: Boolean }
-const TitleText = styled("div", textAttrs)`
+const wrapAttrs = { hasInfoText: Boolean }
+const TitleWrap = styled("div", wrapAttrs)`
+  display: grid;
+  align-items: center;
+  grid-gap: 12px;
+  grid-template-columns: ${(props) =>
+    props.hasInfoText ? "auto auto 1fr" : "1fr"};
+  margin-bottom: 20px;
+`
+
+const titleAttrs = { color: String, fontSize: String, uppercase: Boolean }
+const TitleText = styled('span', titleAttrs)`
   color: ${(props) => (props.color ? props.color : props.theme.colors.black)};
   font-weight: bold;
   font-size: ${(props) => (props.fontSize ? props.fontSize : '16px')};
   text-transform: ${(props) => (props.uppercase ? 'uppercase' : 'none')};
-  margin-bottom: 20px;
 `
 
 export default {
   name: "page-title",
   components: {
     TitleText,
+    TitleWrap,
+    InfoText
   },
   props: {
     text: {
@@ -39,6 +60,13 @@ export default {
     uppercase: {
       required: false,
       default: true
+    },
+    infoText: {
+      required: false,
+      default: null,
+    },
+    infoAlign: {
+      required: false,
     }
   },
 }

package/src/components/pagination/index.vue

@@ -1,137 +1,144 @@
 <template>
-    <!-- Check, if pages more than 1 -->
-    <paginationWrapper v-if="paginationParams.pages > 1">
-        <!-- Back button -->
-        <paginationLink
-          v-if="paginationParams.previous"
-          @click="fetchPage(paginationParams.previous)"
-        >
-        <arrowIconContainer>
-            <icon name="arrow_left" color="#1a237e" size="12px"/>
-        </arrowIconContainer>
-          <arrowText>{{ $gettext('back') }}</arrowText>
-        </paginationLink>
-  
-        <!-- First page -->
-        <paginationLink
-          v-if="currentPage > 2 && paginationParams.pages > 3"
-          @click="fetchPage(1)"
-          >1</paginationLink
-        >
-  
-        <!-- Back tree dots -->
-        <span v-if="currentPage > 3 && paginationParams.pages > 4">...</span>
-  
-        <!-- Current block -->
-        <paginationLink
-          v-for="number in paginationNumbers()"
-          :key="number"
-          :class="[currentPage === number ? 'active' : '']"
-          @click="fetchPage(number)"
-          >{{ number }}</paginationLink
-        >
-  
-        <!-- Forward tree dots -->
-        <span
-          v-if="
-            paginationParams.pages - currentPage > 2 && paginationParams.pages > 4
-          "
-          >...</span
-        >
-  
-        <!-- End page -->
-        <paginationLink
-          v-if="
-            paginationParams.pages - currentPage > 1 && paginationParams.pages > 3
-          "
-          @click="fetchPage(paginationParams.pages)"
-          >{{ paginationParams.pages }}</paginationLink
-        >
-  
-        <!-- Forward button -->
-        <paginationLink
-          v-if="paginationParams.next"
-          @click="fetchPage(paginationParams.next)"
-        >
-          <arrowText>{{ $gettext('forward') }}</arrowText>
-          <arrowIconContainer>
-            <icon name="arrow_right" color="#1a237e" size="12px" />
-        </arrowIconContainer>
-        </paginationLink>
-    </paginationWrapper>
-  </template>
-  
-  <script>
-import styled from "vue-styled-components"
-  import icon from "../icon"
-  const paginationWrapper=styled.nav`
-    color: #1a237e;
-    font-size: 13px;
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: flex;
-    -ms-flex-wrap: wrap;
-    flex-wrap: wrap;
-    -webkit-box-pack: end;
-    -ms-flex-pack: end;
-    justify-content: flex-end;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    align-items: center;
-    margin-bottom: 2px;
-    margin-top: 10px;
+  <!-- Check, if pages more than 1 -->
+  <paginationWrapper v-if="paginationParams.pages > 1">
+    <!-- Back button -->
+    <paginationLink
+      v-if="paginationParams.previous"
+      @click="fetchPage(paginationParams.previous)"
+    >
+      <arrowIconContainer>
+        <icon
+          name="arrow_left"
+          :color="getTheme.colors.brightBlue"
+          size="12px"
+        />
+      </arrowIconContainer>
+      <arrowText>{{ $gettext('back') }}</arrowText>
+    </paginationLink>
+
+    <!-- First page -->
+    <paginationLink
+      v-if="currentPage > 2 && paginationParams.pages > 3"
+      @click="fetchPage(1)"
+      >1</paginationLink
+    >
+
+    <!-- Back tree dots -->
+    <span v-if="currentPage > 3 && paginationParams.pages > 4">...</span>
+
+    <!-- Current block -->
+    <paginationLink
+      v-for="number in paginationNumbers()"
+      :key="number"
+      :class="[currentPage === number ? 'active' : '']"
+      @click="fetchPage(number)"
+      >{{ number }}</paginationLink
+    >
+
+    <!-- Forward tree dots -->
+    <span
+      v-if="
+        paginationParams.pages - currentPage > 2 && paginationParams.pages > 4
+      "
+      >...</span
+    >
+
+    <!-- End page -->
+    <paginationLink
+      v-if="
+        paginationParams.pages - currentPage > 1 && paginationParams.pages > 3
+      "
+      @click="fetchPage(paginationParams.pages)"
+      >{{ paginationParams.pages }}</paginationLink
+    >
+
+    <!-- Forward button -->
+    <paginationLink
+      v-if="paginationParams.next"
+      @click="fetchPage(paginationParams.next)"
+    >
+      <arrowText>{{ $gettext('forward') }}</arrowText>
+      <arrowIconContainer>
+        <icon
+          name="arrow_right"
+          :color="getTheme.colors.brightBlue"
+          size="12px"
+        />
+      </arrowIconContainer>
+    </paginationLink>
+  </paginationWrapper>
+</template>
+
+<script>
+import styled from 'vue-styled-components'
+import icon from '../icon'
+import theme from '@/assets/theme.js'
+
+const paginationWrapper = styled.nav`
+  color: ${(props) => props.theme.brightBlue};
+  font-size: 13px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: center;
+  margin-bottom: 2px;
+  margin-top: 10px;
 `
- const paginationLink=styled.div`
-    display: flex;
-    padding: 0px 5px;
-    margin: 0 2px;
-    text-align: center;
-    border-radius: 3px;
-    white-space: nowrap;
-    cursor: pointer;
+const paginationLink = styled.div`
+  display: flex;
+  padding: 0px 5px;
+  margin: 0 2px;
+  text-align: center;
+  border-radius: 3px;
+  white-space: nowrap;
+  cursor: pointer;
 
-    &.active{
-        color: #fff;
-        background-color: #5c67ac;
-        padding: 7px 12px;
-        border-radius: 4px;
+  &.active {
+    color: #fff;
+    background-color: ${(props) => props.theme.brightBlue};
+    padding: 7px 12px;
+    border-radius: 4px;
+  }
+`
+const arrowText = styled.div``
+const arrowIconContainer = styled.div`
+  margin: 0 10px;
+  display: flex;
+  align-items: center;
+`
+export default {
+  name: 'pagination-component',
+  components: {
+    paginationWrapper,
+    paginationLink,
+    icon,
+    arrowText,
+    arrowIconContainer
+  },
+  props: ['fetchPage', 'currentPage', 'paginationParams'],
+  computed: {
+    getTheme() {
+      return theme
     }
-    `
-    const arrowText=styled.div``
-    const arrowIconContainer=styled.div`
-    margin:0 10px;
-    display:flex;
-    align-items: center;
-    `
-  export default {
-    name: 'pagination-component',
-    components:{
-        paginationWrapper,
-        paginationLink,
-        icon,
-        arrowText,
-        arrowIconContainer
+  },
+  methods: {
+    getNewProjects(num) {
+      this.$emit('on-pagination-change', num)
     },
-    props: ["fetchPage","currentPage","paginationParams"],
-    methods: {
-      getNewProjects(num) {
-        this.$emit('on-pagination-change', num)
-      },
-      paginationNumbers() {
-        const prev = this.paginationParams.previous
-        const next = this.paginationParams.next
-        const n = prev + 1 || next - 1
-        if (this.paginationParams.pages === 2) {
-          return prev ? [n - 1, n] : [n, n + 1]
-        } else {
-          return prev
-            ? next
-              ? [n - 1, n, n + 1]
-              : [n - 2, n - 1, n]
-            : [n, n + 1, n + 2]
-        }
+    paginationNumbers() {
+      const prev = this.paginationParams.previous
+      const next = this.paginationParams.next
+      const n = prev + 1 || next - 1
+      if (this.paginationParams.pages === 2) {
+        return prev ? [n - 1, n] : [n, n + 1]
+      } else {
+        return prev
+          ? next
+            ? [n - 1, n, n + 1]
+            : [n - 2, n - 1, n]
+          : [n, n + 1, n + 2]
       }
     }
   }
-  </script>
-  
+}
+</script>

package/src/components/projectMarker/index.vue

@@ -1,16 +1,15 @@
 <template>
-  <page-container :withDate="!!date">
+  <page-container>
     <marker-container
       v-if="markerData"
+      :hasBorderRadius="hasBorderRadius"
+      :withDate="!!date"
       :backgroundColor="markerData.color"
       :hasIcon="!!iconName"
       :isEditionAllowed="editionAllowed"
       :isActive="activated"
       :cursor="cursor"
-      @click.native="editionAllowed
-        ? activated = !activated
-        : ''
-      "
+      @click.native="editionAllowed ? (activated = !activated) : ''"
     >
       <icon
         v-if="!!iconName"
@@ -20,10 +19,7 @@
         :cursor="cursor"
       />
       <span>{{ markerData.translations[activeLanguage].name }}</span>
-      <dot-wrapper
-        v-if="editionAllowed"
-        class="dotContainer"
-      >
+      <dot-wrapper v-if="editionAllowed" class="dotContainer">
         <dot-icon />
         <dot-icon />
         <dot-icon />
@@ -38,10 +34,7 @@
         </edit-item>
         <edit-item @click.native="onEditClick">
           <icon-container>
-            <icon
-              name="edit_button"
-              size="14px"
-            />
+            <icon name="edit_button" size="14px" />
           </icon-container>
           <div>{{ $gettext('Edit') }}</div>
         </edit-item>
@@ -59,10 +52,7 @@
         <page-title :text="$gettext('delete_confirm_text')" />
         <page-subtitle :text="$gettext('delete_confirm_subtext')" />
         <cta-container>
-          <main-button
-            @click.native="onDelete"
-            :text="$gettext('Delete')"
-          />
+          <main-button @click.native="onDelete" :text="$gettext('Delete')" />
           <main-button
             type="cancel"
             @click.native="closeDeleteModal"
@@ -88,21 +78,17 @@
 //   @deleteHandler="onMarkerDelete($event)"
 // />
 
-import styled from "vue-styled-components"
-import Icon from "../icon"
+import styled from 'vue-styled-components'
+import Icon from '../icon'
 import Modal from '../modals/modal'
 import PageTitle from '../pageTitle'
 import DeleteIcon from '../deleteIcon'
 import PageSubtitle from '../pageSubtitle'
 import MainButton from '../buttons/mainButton'
 
-const PageContainerAttrs = {
-  withDate: Boolean
-}
-const PageContainer = styled('div', PageContainerAttrs)`
+const PageContainer = styled.div`
   display: flex;
   align-items: center;
-  gap: 10px;
   font-size: 12px;
   line-height: 14px;
 `
@@ -119,7 +105,9 @@ const CtaContainer = styled.div`
 `
 
 const MarkerAttrs = {
+  hasBorderRadius: Boolean,
   backgroundColor: String,
+  withDate: Boolean,
   hasIcon: Boolean,
   isEditionAllowed: Boolean,
   isActive: Boolean,
@@ -128,17 +116,22 @@ const MarkerAttrs = {
 const MarkerContainer = styled('div', MarkerAttrs)`
   display: grid;
   grid-template-columns: ${(props) =>
-  props.hasIcon || props.isEditionAllowed ? 'auto 1fr' : '1fr'};
+    props.hasIcon || props.isEditionAllowed ? 'auto 1fr' : '1fr'};
   grid-gap: 5px;
   position: relative;
   align-items: center;
   padding: 2px 7px;
   color: ${(props) => props.theme.colors.white};
   background-color: ${(props) =>
-  props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
-  border-radius: 4px;
+    props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
+  border: 1px solid
+    ${(props) =>
+      props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
+  border-radius: ${(props) =>
+    props.hasBorderRadius ? (props.withDate ? '4px 0 0 4px' : '4px') : '0'};
+
   white-space: nowrap;
-  cursor: ${(props) => props.isEditionAllowed ? 'pointer' : props.cursor};
+  cursor: ${(props) => (props.isEditionAllowed ? 'pointer' : props.cursor)};
 
   .dotContainer {
     display: ${(props) => (props.isActive ? 'flex' : 'none')};
@@ -194,10 +187,15 @@ const IconContainer = styled.div`
   line-height: 0;
 `
 
-const Date = styled.div``
+const Date = styled.div`
+  padding: 2px 5px;
+  border: 1px solid ${(props) => props.theme.colors.grey4};
+  border-left: none;
+  border-radius: 0 4px 4px 0;
+`
 
 export default {
-  name: "project-marker",
+  name: 'project-marker',
   components: {
     PageContainer,
     MarkerContainer,
@@ -242,6 +240,10 @@ export default {
     cursor: {
       required: false,
       default: 'default'
+    },
+    hasBorderRadius: {
+      required: false,
+      default: true
     }
   },
   data() {
@@ -252,7 +254,11 @@ export default {
   },
   computed: {
     editionAllowed() {
-      return (this.markerData.can_be_deleted && (!this.isLimitedPartner || this.isGroupSupport)) && this.isEditable
+      return (
+        this.markerData.can_be_deleted &&
+        (!this.isLimitedPartner || this.isGroupSupport) &&
+        this.isEditable
+      )
     },
     iconName() {
       if (this.markerData.choice === 'sold') {
@@ -274,11 +280,11 @@ export default {
       this.deleteModalOpened = false
     },
     onEditClick() {
-      this.$emit("editHandler")
+      this.$emit('editHandler')
     },
     onDelete() {
       this.closeDeleteModal()
-      this.$emit("deleteHandler")
+      this.$emit('deleteHandler')
     }
   }
 }