Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6911 | Rev 6948 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 6911 Rev 6947
Línea 5... Línea 5...
5 
import { EmojiNature } from './emojis/EmojiNature'
 5 
import { EmojiNature } from './emojis/EmojiNature'
6 
import { EmojiObjects } from './emojis/EmojiObjects'
 6 
import { EmojiObjects } from './emojis/EmojiObjects'
7 
import { EmojiPeople } from './emojis/EmojiPeople'
 7 
import { EmojiPeople } from './emojis/EmojiPeople'
8 
import { EmojiSymbols } from './emojis/EmojiSymbols'
 8 
import { EmojiSymbols } from './emojis/EmojiSymbols'
9 
import { EmojiTravel } from './emojis/EmojiTravel'
 9 
import { EmojiTravel } from './emojis/EmojiTravel'
- 
 
 10 
import { styled } from 'styled-components'
- 
 
 11 
 
- 
 
 12 
const StyledEmojiContainer = styled.div`
- 
 
 13 
  background-color: var(--bg-color);
- 
 
 14 
  bottom: 100%;
- 
 
 15 
  left: 0;
- 
 
 16 
  position: absolute;
- 
 
 17 
  width: 100%;
- 
 
 18 
  height: 200px;
- 
 
 19 
  transform: translateZ(0);
- 
 
 20 
  transform-origin: bottom;
- 
 
 21 
  overflow: hidden;
- 
 
 22 
`
- 
 
 23 
 
- 
 
 24 
const StyledEmojiTabs = styled.ul`
- 
 
 25 
  border-bottom: 1px solid #f7fafc;
- 
 
 26 
  border-top: 1px solid #f7fafc;
- 
 
 27 
  background: #f9f9f9;
- 
 
 28 
  display: flex;
- 
 
 29 
  align-items: center;
- 
 
 30 
 
- 
 
 31 
  li {
- 
 
 32 
    height: 50px;
- 
 
 33 
    flex: 1;
- 
 
 34 
    cursor: pointer;
- 
 
 35 
    text-align: center;
- 
 
 36 
  }
- 
 
 37 
`
Línea 10... Línea 38...
10 
 
 38 
 
11 
const Emojione = ({ onClickEmoji }) => {
 39 
const Emojione = ({ onClickEmoji }) => {
Línea 12... Línea 40...
12 
  const [currentTab, setCurrentTab] = useState('people')
 40 
  const [currentTab, setCurrentTab] = useState('people')
Línea 25... Línea 53...
25 
  const handleChangeTab = (tabToChange) => {
 53 
  const handleChangeTab = (tabToChange) => {
26 
    setCurrentTab(tabToChange)
 54 
    setCurrentTab(tabToChange)
27 
  }
 55 
  }
Línea 28... Línea 56...
28 
 
 56 
 
29 
  return (
 57 
  return (
30 
    <div className={'emojione-container'}>
 - 
 
31 
      <div className="smiley-panel">
 - 
 
32 
        <ul
 - 
 
33 
          className="nav customtab2 nav-tabs menu-tabs"
 58 
    <StyledEmojiContainer>
34 
          // style="padding: 0;"
 - 
 
35 
        >
 59 
      <StyledEmojiTabs>
36 
          <li
 60 
        <li
37 
            className={`menu-item ${
 61 
          className={`menu-item ${
38 
              currentTab === emojiTabs.people ? 'active' : ''
 62 
            currentTab === emojiTabs.people ? 'active' : ''
39 
            }`}
 63 
          }`}
40 
          >
 64 
        >
41 
            <a onClick={() => handleChangeTab(emojiTabs.people)}>
 65 
          <a onClick={() => handleChangeTab(emojiTabs.people)}>
42 
              <i className="ti-face-smile"></i>
 66 
            <i className="ti-face-smile"></i>
43 
            </a>
 67 
          </a>
44 
          </li>
 68 
        </li>
45 
          <li
 69 
        <li
46 
            className={`menu-item ${
 70 
          className={`menu-item ${
47 
              currentTab === emojiTabs.nature ? 'active' : ''
 71 
            currentTab === emojiTabs.nature ? 'active' : ''
48 
            }`}
 72 
          }`}
49 
          >
 73 
        >
50 
            <a onClick={() => handleChangeTab(emojiTabs.nature)}>
 74 
          <a onClick={() => handleChangeTab(emojiTabs.nature)}>
51 
              <i className="ti-gallery"></i>
 75 
            <i className="ti-gallery"></i>
52 
            </a>
 76 
          </a>
53 
          </li>
 77 
        </li>
54 
          <li
 78 
        <li
55 
            className={`menu-item ${
 79 
          className={`menu-item ${
56 
              currentTab === emojiTabs.food ? 'active' : ''
 - 
 
57 
            }`}
 - 
 
58 
          >
 - 
 
59 
            <a onClick={() => handleChangeTab(emojiTabs.food)}>
 - 
 
60 
              <i className="fa fa-cutlery"></i>
 - 
 
61 
            </a>
 - 
 
62 
          </li>
 - 
 
63 
          <li
 - 
 
64 
            className={`menu-item ${
 - 
 
65 
              currentTab === emojiTabs.activity ? 'active' : ''
 - 
 
66 
            }`}
 - 
 
67 
          >
 - 
 
68 
            <a onClick={() => handleChangeTab(emojiTabs.activity)}>
 - 
 
69 
              <i className="ti-basketball"></i>
 - 
 
70 
            </a>
 - 
 
71 
          </li>
 - 
 
72 
          <li
 - 
 
73 
            className={`menu-item ${
 - 
 
74 
              currentTab === emojiTabs.travel ? 'active' : ''
 - 
 
75 
            }`}
 - 
 
76 
          >
 - 
 
77 
            <a onClick={() => handleChangeTab(emojiTabs.travel)}>
 - 
 
78 
              <i className="fa fa-car"></i>
 - 
 
79 
            </a>
 - 
 
80 
          </li>
 - 
 
81 
          <li
 - 
 
82 
            className={`menu-item ${
 - 
 
83 
              currentTab === emojiTabs.objects ? 'active' : ''
 - 
 
84 
            }`}
 - 
 
85 
          >
 - 
 
86 
            <a onClick={() => handleChangeTab(emojiTabs.objects)}>
 - 
 
87 
              <i className="ti-light-bulb"></i>
 - 
 
88 
            </a>
 - 
 
89 
          </li>
 - 
 
90 
          <li
 - 
 
91 
            className={`menu-item ${
 - 
 
92 
              currentTab === emojiTabs.symbols ? 'active' : ''
 - 
 
93 
            }`}
 - 
 
94 
          >
 - 
 
95 
            <a onClick={() => handleChangeTab(emojiTabs.symbols)}>
 - 
 
96 
              <i className="ti-heart"></i>
 - 
 
97 
            </a>
 - 
 
98 
          </li>
 - 
 
99 
          <li
 - 
 
100 
            className={`menu-item ${
 - 
 
101 
              currentTab === emojiTabs.flags ? 'active' : ''
 80 
            currentTab === emojiTabs.food ? 'active' : ''
102 
            }`}
 - 
 
103 
          >
 - 
 
104 
            <a onClick={() => handleChangeTab(emojiTabs.flags)}>
 - 
 
105 
              <i className="ti-flag-alt"></i>
 - 
 
106 
            </a>
 - 
 
107 
          </li>
 - 
 
108 
        </ul>
 - 
 
109 
        <div
 - 
 
110 
          className="tab-content" /* style="margin: 0;text-align: center;" */
 81 
          }`}
- 
 
 82 
        >
111 
        >
 83 
          <a onClick={() => handleChangeTab(emojiTabs.food)}>
- 
 
 84 
            <i className="fa fa-cutlery"></i>
- 
 
 85 
          </a>
- 
 
 86 
        </li>
- 
 
 87 
        <li
- 
 
 88 
          className={`menu-item ${
- 
 
 89 
            currentTab === emojiTabs.activity ? 'active' : ''
- 
 
 90 
          }`}
- 
 
 91 
        >
- 
 
 92 
          <a onClick={() => handleChangeTab(emojiTabs.activity)}>
- 
 
 93 
            <i className="ti-basketball"></i>
- 
 
 94 
          </a>
- 
 
 95 
        </li>
- 
 
 96 
        <li
- 
 
 97 
          className={`menu-item ${
- 
 
 98 
            currentTab === emojiTabs.travel ? 'active' : ''
- 
 
 99 
          }`}
- 
 
 100 
        >
- 
 
 101 
          <a onClick={() => handleChangeTab(emojiTabs.travel)}>
- 
 
 102 
            <i className="fa fa-car"></i>
- 
 
 103 
          </a>
- 
 
 104 
        </li>
- 
 
 105 
        <li
- 
 
 106 
          className={`menu-item ${
- 
 
 107 
            currentTab === emojiTabs.objects ? 'active' : ''
- 
 
 108 
          }`}
- 
 
 109 
        >
- 
 
 110 
          <a onClick={() => handleChangeTab(emojiTabs.objects)}>
- 
 
 111 
            <i className="ti-light-bulb"></i>
- 
 
 112 
          </a>
- 
 
 113 
        </li>
- 
 
 114 
        <li
- 
 
 115 
          className={`menu-item ${
- 
 
 116 
            currentTab === emojiTabs.symbols ? 'active' : ''
- 
 
 117 
          }`}
- 
 
 118 
        >
- 
 
 119 
          <a onClick={() => handleChangeTab(emojiTabs.symbols)}>
- 
 
 120 
            <i className="ti-heart"></i>
- 
 
 121 
          </a>
- 
 
 122 
        </li>
- 
 
 123 
        <li
- 
 
 124 
          className={`menu-item ${
- 
 
 125 
            currentTab === emojiTabs.flags ? 'active' : ''
- 
 
 126 
          }`}
- 
 
 127 
        >
- 
 
 128 
          <a onClick={() => handleChangeTab(emojiTabs.flags)}>
- 
 
 129 
            <i className="ti-flag-alt"></i>
112 
          <div role="tabpanel" className="tab-pane active" id=""></div>
 130 
          </a>
- 
 
 131 
        </li>
- 
 
 132 
      </StyledEmojiTabs>
- 
 
 133 
      <div className="tab-content" /* style="margin: 0;text-align: center;" */>
113 
        </div>
 134 
        <div role="tabpanel" className="tab-pane active" id=""></div>
- 
 
 135 
      </div>
114 
      </div>
 136 
 
115 
      <EmojiPeople
 137 
      <EmojiPeople
116 
        onClickEmoji={onClickEmoji}
 138 
        onClickEmoji={onClickEmoji}
117 
        hidden={currentTab === emojiTabs.people}
 139 
        hidden={currentTab === emojiTabs.people}
118 
      />
 140 
      />
Línea 142... Línea 164...
142 
      />
 164 
      />
143 
      <EmojiFlags
 165 
      <EmojiFlags
144 
        onClickEmoji={onClickEmoji}
 166 
        onClickEmoji={onClickEmoji}
145 
        hidden={currentTab === emojiTabs.flags}
 167 
        hidden={currentTab === emojiTabs.flags}
146 
      />
 168 
      />
147 
    </div>
 169 
    </StyledEmojiContainer>
148 
  )
 170 
  )
149 
}
 171 
}
Línea 150... Línea 172...
150 
 
 172