@eturnity/eturnity_reusable_components 6.46.5-qa-16-11.27 → 6.48.0-EPDM-9012.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "6.46.5-qa-16-11.27",
+  "version": "6.48.0-EPDM-9012.0",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <ThemeProvider :theme="getTheme()" :style="{ height: '100%' }">
     <page-container>
-
+      <page-title text="Hello" infoText="The ElektroForm solar integration has been activated for your company. Please log in with your Brunner Informatik Cloud-ID. Eturnity will not store your credentials but just a token for the connection."></page-title>
       <br/>
       <input-number
           :value="value"
@@ -114,6 +114,7 @@ import iconCollection from '@/components/icon/iconCollection'
 import dropdownComponent from '@/components/dropdown'
 import videoThumbnail from '@/components/videoThumbnail'
 import icon from '@/components/icon'
+import pageTitle from '@/components/pageTitle'
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -137,6 +138,7 @@ export default {
     SwitchField,
     iconCollection,
     dropdownComponent,
+    pageTitle,
     videoThumbnail,
     icon
   },

package/src/assets/svgIcons/collections.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 10H1C0.45 10 0 10.45 0 11V17C0 17.55 0.45 18 1 18H17C17.55 18 18 17.55 18 17V11C18 10.45 17.55 10 17 10ZM4 16C2.9 16 2 15.1 2 14C2 12.9 2.9 12 4 12C5.1 12 6 12.9 6 14C6 15.1 5.1 16 4 16ZM17 0H1C0.45 0 0 0.45 0 1V7C0 7.55 0.45 8 1 8H17C17.55 8 18 7.55 18 7V1C18 0.45 17.55 0 17 0ZM4 6C2.9 6 2 5.1 2 4C2 2.9 2.9 2 4 2C5.1 2 6 2.9 6 4C6 5.1 5.1 6 4 6Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/dashboard.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 10H8V0H0V10ZM0 18H8V12H0V18ZM10 18H18V8H10V18ZM10 0V6H18V0H10Z" fill="white"/>
+</svg>

package/src/assets/svgIcons/subscriptions.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 12H8V10H0V12ZM0 16H8V14H0V16ZM0 8H8V6H0V8ZM0 2V4H8V2H0ZM10 2H18V16H10V2Z" fill="white"/>
+</svg>

package/src/components/filter/filterSettings.vue

@@ -127,7 +127,7 @@
                       ? $gettext('min') + ' (' + filter.unit + ')'
                       : $gettext('min')
                   "
-                  :numberPrecision="2"
+                  :numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
                   :value="filter.range.start"
                   @input-change="
                     onChange({
@@ -147,7 +147,7 @@
                       ? $gettext('max') + ' (' + filter.unit + ')'
                       : $gettext('max')
                   "
-                  :numberPrecision="2"
+                  :numberPrecision="isIntegerRange(filter.filter_type) ? 0 : 2"
                   :value="filter.range.end"
                   @input-change="
                     onChange({
@@ -340,7 +340,7 @@ const DragContainer = styled.div`
 
 const RowContainer = styled('div', TitleAttrs)`
   padding: 10px 14px;
-  width: 300px;
+  min-width: 300px;
 
   ${({ showBorder, theme }) =>
     showBorder &&
@@ -615,6 +615,9 @@ export default {
       return type === 'multi_select_integer' || type === 'multi_select_string'
     },
     isRangeSelector(type) {
+      return type === 'integer_range' || type === 'number_range'
+    },
+    isIntegerRange(type) {
       return type === 'integer_range'
     },
     isDateSelector(type) {

package/src/components/iconWrapper/index.vue

@@ -120,10 +120,11 @@ export default {
       isStriked:{
         required:false,
         default:false
+    
+      }
+    },
+    data() {
+      return {}
     }
-  },
-  data() {
-    return {}
   }
-}
 </script>

package/src/components/infoText/index.vue

@@ -10,7 +10,6 @@
       </icon-img>
       <text-overlay
         v-if="showInfo"
-        :borderColor="borderColor"
         :width="width"
         :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
         :alignArrow="alignArrow"
@@ -27,7 +26,6 @@
 //To use:
 // <info-text
 //     text="Veritatis et quasi architecto beatae vitae"
-//     borderColor="#ccc"
 //     size="20"
 //     alignArrow="right" // which side the arrow should be on
 // />
@@ -37,7 +35,6 @@ import icon from '../icon'
 
 const textAttrs = {
   iconSize: String,
-  borderColor: String,
   alignArrow: String,
   width: String,
   halfComputedTextInfoWidth: Number
@@ -111,10 +108,6 @@ export default {
     text: {
       required: false
     },
-    borderColor: {
-      required: false,
-      default: null
-    },
     size: {
       required: false,
       default: '14px'
@@ -156,11 +149,7 @@ export default {
   },
   computed: {
     iconColor() {
-      return this.isActive
-        ? this.borderColor
-          ? this.borderColor
-          : theme.colors.secondary
-        : theme.colors.mediumGray
+      return theme.colors.mediumGray
     },
     halfComputedTextInfoWidth() {
       return parseInt(this.width) / 2

package/src/components/inputs/inputNumber/InputNumber.stories.js

@@ -32,7 +32,6 @@ const Template = (args, { argTypes }) => ({
   //     fontSize="13px"
   //     labelText="Number of Modules"
   //     labelInfoText="Here is some information for you..."
-  //     labelInfoAlign="left"
   // />
 })
 
@@ -129,8 +128,7 @@ WithLabelInfo.args = {
   textAlign: "left",
   showLinearUnitName: false,
   labelText: "Number Input",
-  labelInfoText: "Here is some information for you...",
-  labelInfoAlign: "right",
+  labelInfoText: "Here is some information for you..."
 }
 
 export const LargerFont = Template.bind({})

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

@@ -19,9 +19,6 @@
       <info-text
         v-if="labelInfoText"
         :text="labelInfoText"
-        borderColor="#ccc"
-        size="14px"
-        :alignText="labelInfoAlign"
       />
     </label-wrapper>
     <input-wrapper>
@@ -95,7 +92,6 @@
 //     fontSize="13px"
 //     labelText="Number of Modules"
 //     labelInfoText="Here is some information for you..."
-//     labelInfoAlign="left"
 //     :minNumber="0"
 //     fontColor="blue"
 // />
@@ -400,10 +396,6 @@ export default {
       required: false,
       default: null
     },
-    labelInfoAlign: {
-      required: false,
-      default: 'left'
-    },
     defaultNumber: {
       required: false,
       default: null

package/src/components/inputs/inputText/InputText.stories.js

@@ -21,7 +21,6 @@ const Template = (args, { argTypes }) => ({
   //   @input-change="onInputChange({ value: $event, type: 'companyName' })"
   //   :isError="checkErrors()"
   //   :errorMessage="This is my error message"
-  //   infoTextAlign="right" // left by default
   //   infoTextMessage="My info message"
   //   label="Question 5"
   //   alignItems="horizontal" // horizontal, vertical

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

@@ -17,9 +17,7 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
           :size="fontSize ? fontSize : '16px'"
-          :alignText="infoTextAlign"
         />
       </label-wrapper>
       <input-error-wrapper>
@@ -206,7 +204,6 @@ export default {
   //   @input-blur="onInputBlur($event)"
   //   :isError="checkErrors()"
   //   :errorMessage="This is my error message"
-  //   infoTextAlign="right" // left by default
   //   infoTextMessage="My info message"
   //   label="Question 5"
   //   alignItems="horizontal" // horizontal, vertical
@@ -270,9 +267,6 @@ export default {
     infoTextMessage: {
       required: false
     },
-    infoTextAlign: {
-      required: false
-    },
     label: {
       required: false
     },

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

@@ -22,9 +22,7 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
           :size="fontSize ? fontSize : '16px'"
-          :alignText="infoTextAlign"
         />
       </label-wrapper>
       <select-button-wrapper :disabled="disabled">
@@ -104,6 +102,7 @@
             :selectedValue="selectedValue"
             @option-selected="optionSelected"
             @option-hovered="optionHovered"
+            @mouseleave="optionLeave"
           >
             <slot name="dropdown"></slot>
           </selectDropdown>
@@ -312,9 +311,6 @@ export default {
     infoTextMessage: {
       required: false
     },
-    infoTextAlign: {
-      required: false
-    },
     selectWidth: {
       required: false,
       default: null
@@ -340,6 +336,10 @@ export default {
       required: false,
       default: false
     },
+    dropdownAutoClose: {
+      required: false,
+      default: false
+    },
     alignItems: {
       required: false,
       default: 'horizontal'
@@ -465,6 +465,11 @@ export default {
         this.blur()
       }
     },
+    optionLeave() {
+      if(this.dropdownAutoClose) {
+        this.isDropdownOpen = false
+      }
+    },
     searchChange(value) {
       this.textSearch = value
       this.$emit('search-change', value)

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

@@ -15,9 +15,6 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
         />
       </label-container>
 
@@ -48,9 +45,6 @@
           @click.native.stop
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
         />
       </label-container>
     </flex-wrapper>
@@ -202,9 +196,6 @@ export default {
     infoTextMessage: {
       required: false
     },
-    infoTextAlign: {
-      required: false
-    },
     colorMode: {
       required: false,
       default: 'light'

package/src/components/inputs/textAreaInput/TextAreaInput.stories.js

@@ -22,7 +22,6 @@ const Template = (args, { argTypes }) => ({
   //     rowHeight="4" //optional
   //     :isError="false"
   //     :errorText="$gettext('field_required')"
-  //     infoTextAlign="right" // left by default
   //     infoTextMessage="My info message"
   //     label="Question 5"
   //     alignItems="horizontal" // horizontal, vertical
@@ -37,7 +36,6 @@ Default.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "",
   label: "",
   value: "",
@@ -52,7 +50,6 @@ Disabled.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "",
   label: "",
   value: "",
@@ -67,7 +64,6 @@ Error.args = {
   rowHeight: "2",
   isError: true,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "",
   label: "",
   value: "",
@@ -82,7 +78,6 @@ WithLabel.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",
@@ -97,7 +92,6 @@ HorizontalLabel.args = {
   rowHeight: "2",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",
@@ -112,7 +106,6 @@ LargerTextArea.args = {
   rowHeight: "5",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",
@@ -127,7 +120,6 @@ LargerFontSize.args = {
   fontSize: "24px",
   isError: false,
   errorText: "This field is required",
-  infoTextAlign: "right",
   infoTextMessage: "Here is some information",
   label: "Description",
   value: "Here is my description!",

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

@@ -11,9 +11,7 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
           size="16px"
-          :alignText="infoTextAlign"
         />
       </label-wrapper>
       <input-container
@@ -47,7 +45,6 @@
 //     rowHeight="4" //optional
 //     :isError="false"
 //     :errorText="$gettext('field_required')"
-//     infoTextAlign="right" // left by default
 //     infoTextMessage="My info message"
 //     label="Question 5"
 //     alignItems="horizontal" // horizontal, vertical
@@ -167,9 +164,6 @@ export default {
     infoTextMessage: {
       required: false
     },
-    infoTextAlign: {
-      required: false
-    },
     label: {
       required: false
     },

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

@@ -9,9 +9,6 @@
         <info-text
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
         />
       </label-container>
       <toggle-wrapper
@@ -45,9 +42,6 @@
           @click.native.stop
           v-if="infoTextMessage"
           :text="infoTextMessage"
-          borderColor="#ccc"
-          size="14px"
-          :alignText="infoTextAlign"
         />
       </label-container>
     </flex-wrapper>
@@ -67,7 +61,6 @@
 //   labelAlign="right"
 //   fontColor="black"
 //   :disabled="true"
-//   infoTextAlign="right" // left by default
 //   infoTextMessage="My info message"
 // />
 
@@ -271,10 +264,7 @@ export default {
     },
     infoTextMessage: {
       required: false,
-    },
-    infoTextAlign: {
-      required: false,
-    },
+    }
   },
   methods: {
     onToggleChange() {

package/src/components/pageSubtitle/index.vue

@@ -4,11 +4,8 @@
       {{ text }}
     </span>
     <info-text
-      :text="infoText"
       v-if="!!infoText"
-      size="14px"
-      borderColor="#ccc"
-      :alignText="alignInfoText"
+      :text="infoText"
     />
   </subtitle-text>
 </template>
@@ -55,10 +52,6 @@ export default {
       required: false,
       default: null,
     },
-    alignInfoText: {
-      required: false,
-      default: "left",
-    },
     marginBottom: {
       required: false,
       default: "30px",

package/src/components/pageTitle/index.vue

@@ -1,5 +1,13 @@
 <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"
+    />
+  </title-wrap>
 </template>
 
 <script>
@@ -10,25 +18,41 @@
 //   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: {
       required: true,
     },
+    infoText: {
+      required: false,
+      default: null,
+    },
     color: {
       required: false,
     },

package/src/components/pagination/index.vue

@@ -1,137 +1,129 @@
 <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="#0068de" 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="#0068de" size="12px" />
+      </arrowIconContainer>
+    </paginationLink>
+  </paginationWrapper>
+</template>
+
+<script>
+import styled from 'vue-styled-components'
+import icon from '../icon'
+const paginationWrapper = styled.nav`
+  color: #0068de;
+  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;
-    }
-    `
-    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
+  &.active {
+    color: #fff;
+    background-color: #0068de;
+    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'],
+  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,7 +1,9 @@
 <template>
-  <page-container :withDate="!!date">
+  <page-container>
     <marker-container
       v-if="markerData"
+      :hasBorderRadius="hasBorderRadius"
+      :withDate="!!date"
       :backgroundColor="markerData.color"
       :hasIcon="!!iconName"
       :isEditionAllowed="editionAllowed"
@@ -96,13 +98,9 @@ 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 +117,9 @@ const CtaContainer = styled.div`
 `
 
 const MarkerAttrs = {
+  hasBorderRadius: Boolean,
   backgroundColor: String,
+  withDate: Boolean,
   hasIcon: Boolean,
   isEditionAllowed: Boolean,
   isActive: Boolean,
@@ -136,7 +136,12 @@ const MarkerContainer = styled('div', MarkerAttrs)`
   color: ${(props) => props.theme.colors.white};
   background-color: ${(props) =>
   props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
-  border-radius: 4px;
+<<<<<<< HEAD
+  border-radius: ${(props) => (props.hasBorderRadius ? '4px' : '0')};
+=======
+  border: 1px solid ${(props) => props.backgroundColor ? props.backgroundColor : props.theme.colors.grey3};
+  border-radius: ${(props) => props.withDate ? '4px 0 0 4px' : '4px'};
+>>>>>>> origin/EPDM-9185
   white-space: nowrap;
   cursor: ${(props) => props.isEditionAllowed ? 'pointer' : props.cursor};
 
@@ -194,7 +199,12 @@ 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",
@@ -242,6 +252,10 @@ export default {
     cursor: {
       required: false,
       default: 'default'
+    },
+    hasBorderRadius: {
+      required: false,
+      default: true
     }
   },
   data() {

package/src/components/sideMenu/index.vue

@@ -0,0 +1,264 @@
+<template>
+  <page-container :isLoading="!tabsData.length">
+    <spinner-container v-if="!tabsData.length">
+      <spinner />
+    </spinner-container>
+    <list-container v-else>
+      <template v-for="(item, idx) in tabsData">
+        <list-item
+          v-if="!item.children"
+          :key="idx"
+          :isActive="activeTab === item.key"
+          @click="$emit('tab-click', { activeKey: item.key })"
+        >
+          <icon-container :isActive="activeTab === item.key">
+            <icon :name="item.icon" color="#fff" cursor="pointer" size="18px" />
+          </icon-container>
+          <list-text>{{ $gettext(item.label) }}</list-text>
+        </list-item>
+        <collapse-wrapper v-else :key="idx + item.key">
+          <collapse-container @click="toggleActiveDropdown(item.key)">
+            <icon-container :isActive="activeParentTab === item.key">
+              <icon
+                :name="item.icon"
+                color="#fff"
+                cursor="pointer"
+                size="18px"
+              />
+            </icon-container>
+            <list-text>{{ $gettext(item.label) }}</list-text>
+            <arrow-container>
+              <icon
+                :name="activeDropdown === item.key ? 'arrow_up' : 'arrow_down'"
+                color="white"
+                size="10px"
+              />
+            </arrow-container>
+          </collapse-container>
+          <template v-if="activeDropdown === item.key">
+            <sub-router
+              v-for="subItem in item.children"
+              :key="subItem.key"
+              :isActive="activeTab === subItem.key"
+              @click="
+                $emit('tab-click', {
+                  activeKey: subItem.key,
+                  parentKey: item.key
+                })
+              "
+            >
+              {{ $gettext(subItem.label) }}
+            </sub-router>
+          </template>
+        </collapse-wrapper>
+      </template>
+    </list-container>
+    <bottom-section v-if="hasLogout">
+      <icon-container
+        :isActive="false"
+        :isButton="true"
+        @click="$emit('on-logout')"
+      >
+        <rotate-icon
+          name="initial_situation"
+          color="#fff"
+          cursor="pointer"
+          size="18px"
+        />
+      </icon-container>
+      <app-version>{{ appVersion }}</app-version>
+    </bottom-section>
+  </page-container>
+</template>
+
+<script>
+import styled from 'vue-styled-components'
+import Icon from '../icon'
+import Spinner from '../spinner'
+
+const PageAttrs = { isLoading: Boolean }
+const PageContainer = styled('div', PageAttrs)`
+  background-color: ${(props) =>
+    props.isLoading ? props.theme.colors.white : props.theme.colors.grey6};
+  padding: 14px 12px;
+  min-width: 220px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`
+
+const ListContainer = styled.div`
+  display: grid;
+  grid-gap: 6px;
+`
+
+const IconAttrs = { isActive: Boolean, isButton: Boolean }
+
+const ListItem = styled('div', IconAttrs)`
+  display: grid;
+  align-items: center;
+  grid-template-columns: auto 1fr;
+  grid-gap: 20px;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 6px;
+  background-color: ${(props) =>
+    props.isActive ? 'rgba(255, 255, 255, 0.1)' : ''};
+
+  :hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+`
+
+const ListText = styled.div`
+  font-size: 16px;
+  font-weight: 700;
+  color: ${(props) => props.theme.colors.white};
+`
+
+const IconContainer = styled('div', IconAttrs)`
+  display: grid;
+  align-items: center;
+  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);
+  }
+  `}
+`
+
+const SpinnerContainer = styled.div`
+  margin-top: 30px;
+`
+
+const BottomSection = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`
+
+const RotateIcon = styled(Icon)`
+  transform: rotate(-90deg);
+`
+
+const AppVersion = styled.p`
+  font-size: 11px;
+  line-height: 13px;
+  color: ${(props) => props.theme.colors.white};
+  margin-right: 6px;
+`
+
+const SubRouter = styled('div', IconAttrs)`
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 10px;
+  align-items: center;
+  justify-items: flex-start;
+  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);
+  `}
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+`
+
+const CollapseContainer = styled.div`
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  grid-gap: 20px;
+  padding: 4px;
+  border-radius: 6px;
+  align-items: center;
+  cursor: pointer;
+  &:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+`
+
+const CollapseWrapper = styled.div`
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: 10px;
+  user-select: none;
+  margin-bottom: 2px;
+`
+
+const ArrowContainer = styled.div`
+  padding-bottom: 5px;
+`
+
+export default {
+  name: 'SideMenu',
+  components: {
+    PageContainer,
+    ListContainer,
+    ListItem,
+    ListText,
+    Icon,
+    IconContainer,
+    Spinner,
+    SpinnerContainer,
+    BottomSection,
+    RotateIcon,
+    AppVersion,
+    CollapseWrapper,
+    CollapseContainer,
+    SubRouter,
+    ArrowContainer
+  },
+  data() {
+    return {
+      activeDropdown: null
+    }
+  },
+  mounted() {
+    this.activeDropdown = this.activeParentTab
+  },
+  props: {
+    tabsData: {
+      required: true
+    },
+    activeTab: {
+      required: true
+    },
+    activeParentTab: {
+      required: false
+    },
+    hasLogout: {
+      required: false,
+      default: true
+    },
+    appVersion: {
+      required: false,
+      type: String
+    }
+  },
+  methods: {
+    toggleActiveDropdown(value) {
+      if (this.activeDropdown === value) {
+        this.activeDropdown = null
+      } else {
+        this.activeDropdown = value
+      }
+    }
+  }
+}
+</script>

package/src/components/threeDots/index.vue

@@ -331,7 +331,7 @@ export default {
     },
     findRelativeParent(element) {
       while (element.parentElement) {
-        if (window.getComputedStyle(element.parentElement).position === 'relative') {
+        if (window.getComputedStyle(element.parentElement).position === 'relative' || window.getComputedStyle(element.parentElement).position === 'absolute') {
           return element.parentElement
         }
         element = element.parentElement