@eturnity/eturnity_reusable_components 7.51.3-EPDM-12810.1 → 7.51.3-EPDM-12810.2

package/src/components/tableDropdown/index.vue

@@ -14,6 +14,7 @@
           'table-dropdown-item': item.type !== 'input',
         }"
         :is-nested="isNested"
+        :show-archived="showArchived"
       >
         <NestedContainer :is-nested="isNested">
           <NestedIcon
@@ -31,6 +32,7 @@
               (item.value === '' || item.value === '-')
             "
             :key="index + '_button'"
+            :show-archived="showArchived"
             @click.stop="onTemplateClick(item.row)"
           >
             {{ $gettext('Use template...') }}
@@ -39,30 +41,38 @@
             v-else-if="
               item.type && item.type === 'template' && item.value !== ''
             "
+            :show-archived="showArchived"
             @click.stop="onSelectedTemplateClick(item.row)"
           >
-            <!-- <img :src="fileIcon" alt="icon" width="12" height="16" /> -->
             <Icon
-              :color="theme.colors.brightBlue"
+              :color="showArchived ? theme.colors.red : theme.colors.brightBlue"
               name="template_icon_not_clickable"
               size="14px"
             />
             <div>{{ item.value }}</div>
           </TemplateLink>
-          <NoTemplate v-if="item.type && item.type === 'no-template'">
+          <NoTemplate
+            v-if="item.type && item.type === 'no-template'"
+            :show-archived="showArchived"
+          >
             {{ $gettext('No main component template') }}
           </NoTemplate>
           <InputContainer
             v-if="item.type === 'input'"
             @click.stop="onInputClick()"
           >
-            <TextContainer v-if="customInputDisabled" class="input-placeholder">
+            <TextContainer
+              v-if="customInputDisabled"
+              class="input-placeholder"
+              :show-archived="showArchived"
+            >
               <span> {{ item.value }}</span>
             </TextContainer>
             <InputText
               v-else
               class="inputField"
               :disabled="customInputDisabled"
+              :font-color="showArchived ? theme.colors.red : 'black'"
               :min-width="item.value.length + 'ch'"
               :no-border="true"
               :value="item.value"
@@ -75,6 +85,7 @@
               item.type !== 'no-template' &&
               item.type !== 'template'
             "
+            :show-archived="showArchived"
           >
             <span> {{ item.value }}</span>
           </TextContainer>
@@ -82,14 +93,14 @@
       </ComponentItem>
       <ArrowContainer class="arrow-container" :is-disabled="disabled">
         <ArrowWrapper :show-archived="showArchived">
-          <EtPopover
-            v-if="showArchived"
-            button-class="error"
-            :text="
-              $gettext(`Component has been archived and shouldn't be used`)
-            "
-            trigger-type="hover"
-          />
+          <InfoWrapper v-if="showArchived">
+            <InfoText
+              icon-color="red"
+              :text="
+                $gettext(`Component has been archived and shouldn't be used`)
+              "
+            />
+          </InfoWrapper>
           <ArrowDown
             v-if="!isOpen"
             class="arrow-dropdown"
@@ -184,6 +195,7 @@
   import fileIconPng from '../../assets/icons/file_icon.png'
   import Icon from '../icon'
   import theme from '@/assets/theme.js'
+  import InfoText from '../infoText'
 
   const rowAttrs = { disabled: Boolean, isOpen: Boolean }
   const DropdownRow = styled('div', rowAttrs)`
@@ -200,12 +212,14 @@
     }
   `
 
-  const ItemAttrs = { isNested: Boolean }
+  const ItemAttrs = { isNested: Boolean, showArchived: Boolean }
   const ComponentItem = styled('td', ItemAttrs)`
     padding-left: ${(props) => (props.isNested ? '14px !important' : '0')};
     overflow: hidden;
     text-overflow: ellipsis;
     padding-right: 0 !important;
+    color: ${(props) =>
+      props.showArchived ? props.theme.colors.red : 'inherit'};
 
     &.table-dropdown-item {
       background-clip: content-box;
@@ -339,10 +353,12 @@
     height: 40px;
   `
 
-  const TemplateButton = styled.div`
+  const templateAttrs = { showArchived: Boolean }
+  const TemplateButton = styled('div', templateAttrs)`
     cursor: pointer;
     background-color: #263238;
-    color: ${(props) => props.theme.colors.white};
+    color: ${(props) =>
+      props.showArchived ? props.theme.colors.red : props.theme.colors.white};
     padding: 4px 10px;
     display: inline-block;
     border-radius: 4px;
@@ -350,16 +366,20 @@
     margin-left: 15px;
   `
 
-  const NoTemplate = styled.div`
-    color: ${(props) => props.theme.colors.gray1};
+  const NoTemplate = styled('div', templateAttrs)`
+    color: ${(props) =>
+      props.showArchived ? props.theme.colors.red : props.theme.colors.gray1};
     font-style: italic;
     overflow: hidden;
     text-overflow: ellipsis;
     padding-left: 15px;
   `
 
-  const TemplateLink = styled.div`
-    color: ${(props) => props.theme.colors.brightBlue};
+  const TemplateLink = styled('div', templateAttrs)`
+    color: ${(props) =>
+      props.showArchived
+        ? props.theme.colors.red
+        : props.theme.colors.brightBlue};
     cursor: pointer;
     display: grid;
     grid-template-columns: auto 1fr;
@@ -394,10 +414,12 @@
     color: ${(props) => props.theme.colors.grey3};
   `
 
-  const TextContainer = styled.div`
+  const TextContainer = styled('div', templateAttrs)`
     height: 100%;
     display: grid;
     align-items: center;
+    color: ${(props) =>
+      props.showArchived ? props.theme.colors.red : 'inherit'};
   `
 
   const NestedIcon = styled(SubpositionMarkerIcon)`
@@ -413,6 +435,13 @@
     align-items: center;
   `
 
+  const InfoWrapper = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-left: 8px;
+  `
+
   export default {
     name: 'TableDropdown',
     components: {
@@ -442,6 +471,8 @@
       NestedIcon,
       NestedContainer,
       Icon,
+      InfoText,
+      InfoWrapper,
     },
     props: {
       colSpan: {