Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 7226 Rev 7228
Línea 11... Línea 11...
11 
 
 11 
 
12 
const StyledCommentForm = styled.form`
 12 
const StyledCommentForm = styled.form`
13 
  display: flex;
 13 
  display: flex;
14 
  justify-content: flex-start;
 14 
  justify-content: flex-start;
15 
  align-items: center;
 - 
 
16 
  img {
 - 
 
17 
    margin-right: 0.5rem;
 - 
 
18 
    width: 43px;
 - 
 
19 
    height: 43px;
 - 
 
20 
  }
 15 
  align-items: center;
21 
  input {
 16 
  input {
22 
    flex-grow: 1;
 17 
    flex-grow: 1;
23 
    padding: 0.5rem;
 18 
    padding: 0.5rem;
24 
    background-color: var(--bg-color-secondary);
 19 
    background-color: var(--bg-color-secondary);
25 
    border: 1px solid var(--border-primary);
 - 
 
26 
    border-top-left-radius: var(--border-radius);
 20 
    border: 1px solid var(--border-primary);
27 
    border-bottom-left-radius: var(--border-radius);
 21 
    border-radius: var(--border-radius) 0 0 var(--border-radius);
28 
  }
 22 
  }
29 
  button {
 23 
  button {
- 
 
 24 
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
- 
 
 25 
    border: 1px solid var(--button-bg) !important;
- 
 
 26 
  }
- 
 
 27 
`
- 
 
 28 
 
- 
 
 29 
const StyledCommentList = styled.ul`
- 
 
 30 
  display: flex;
- 
 
 31 
  flex-direction: column;
- 
 
 32 
  padding-right: 0.5rem;
- 
 
 33 
  gap: 0.5rem;
- 
 
 34 
  margin-top: 0.5rem;
- 
 
 35 
  max-height: 300px;
- 
 
 36 
  overflow-y: auto;
- 
 
 37 
`
- 
 
 38 
 
- 
 
 39 
const StyledComment = styled.ul`
- 
 
 40 
  display: flex;
- 
 
 41 
  gap: 0.5rem;
- 
 
 42 
  align-items: flex-start;
- 
 
 43 
  .content {
30 
    border-top-right-radius: var(--border-radius);
 44 
    background-color: var(--chat-send);
- 
 
 45 
    border-radius: var(--border-radius);
- 
 
 46 
    display: flex;
- 
 
 47 
    flex-direction: column;
- 
 
 48 
    flex-grow: 1;
- 
 
 49 
    gap: 0.5rem;
- 
 
 50 
    padding: 0.5rem;
- 
 
 51 
  }
- 
 
 52 
  .info {
- 
 
 53 
    h3 {
- 
 
 54 
      color: var(--title-color);
- 
 
 55 
      font-weight: 600;
- 
 
 56 
    }
- 
 
 57 
    span {
- 
 
 58 
      color: var(--subtitle-color);
- 
 
 59 
      font-size: 0.9rem;
31 
    border-bottom-right-radius: var(--border-radius);
 60 
    }
32 
  }
 61 
  }
Línea 33... Línea 62...
33 
`
 62 
`
34 
 
 63 
 
Línea 46... Línea 75...
46 
  })
 75 
  })
Línea 47... Línea 76...
47 
 
 76 
 
48 
  return (
 77 
  return (
49 
    <>
 78 
    <>
- 
 
 79 
      <StyledCommentForm onSubmit={submitHandler}>
- 
 
 80 
        {image && (
- 
 
 81 
          <Avatar
50 
      <StyledCommentForm onSubmit={submitHandler}>
 82 
            src={image}
- 
 
 83 
            alt="Profile image"
- 
 
 84 
            sx={{ marginRight: '.5rem', width: '45px', height: '45px' }}
- 
 
 85 
          />
51 
        {image && <Avatar src={image} alt="Profile image" />}
 86 
        )}
52 
        <input
 87 
        <input
53 
          type="text"
 88 
          type="text"
54 
          name="comment"
 89 
          name="comment"
55 
          maxLength="256"
 90 
          maxLength="256"
Línea 67... Línea 102...
67 
  )
 102 
  )
68 
}
 103 
}
Línea 69... Línea 104...
69 
 
 104 
 
70 
export const CommentsList = ({ comments, onDelete }) => {
 105 
export const CommentsList = ({ comments, onDelete }) => {
- 
 
 106 
  return (
71 
  return (
 107 
    <>
72 
    <ul className="comment-list">
 108 
      <StyledCommentList>
73 
      {comments.map((comment) => {
 109 
        {comments.map((comment) => {
74 
        return (
 - 
 
75 
          <CommentsList.Item
 110 
          return (
76 
            comment={comment}
 111 
            <li key={comment.unique}>
77 
            onDelete={onDelete}
 112 
              <CommentsList.Item comment={comment} onDelete={onDelete} />
78 
            key={comment.unique}
 113 
            </li>
79 
          />
 114 
          )
80 
        )
 115 
        })}
81 
      })}
 116 
      </StyledCommentList>
82 
    </ul>
 117 
    </>
83 
  )
 118 
  )
Línea 84... Línea 119...
84 
}
 119 
}
85 
 
 120 
 
Línea 100... Línea 135...
100 
  const toggleModal = () => {
 135 
  const toggleModal = () => {
101 
    setShowConfirmModal(!showConfirmModal)
 136 
    setShowConfirmModal(!showConfirmModal)
102 
  }
 137 
  }
Línea 103... Línea 138...
103 
 
 138 
 
104 
  return (
 139 
  return (
105 
    <li>
 140 
    <>
106 
      <div className="comment-container">
 141 
      <StyledComment>
107 
        <div className="comment-content">
 142 
        <div className="content">
108 
          <div className="info">
 143 
          <div className="info">
109 
            <a href={user_url}>
 144 
            <a href={user_url}>
110 
              <h3>{user_name}</h3>
 145 
              <h3>{user_name}</h3>
111 
            </a>
 146 
            </a>
112 
            <span>{time_elapsed}</span>
 - 
 
113 
            <span>
 - 
 
114 
              {link_delete && (
 - 
 
115 
                <Options
 - 
 
116 
                  options={[
 - 
 
117 
                    {
 - 
 
118 
                      label: labels.delete,
 - 
 
119 
                      action: toggleModal,
 - 
 
120 
                    },
 - 
 
121 
                  ]}
 - 
 
122 
                />
 - 
 
123 
              )}
 - 
 
124 
            </span>
 147 
            <span>{time_elapsed}</span>
- 
 
 148 
          </div>
- 
 
 149 
          {link_delete && (
- 
 
 150 
            <Options
- 
 
 151 
              options={[
- 
 
 152 
                {
- 
 
 153 
                  label: labels.delete,
- 
 
 154 
                  action: toggleModal,
- 
 
 155 
                },
- 
 
 156 
              ]}
- 
 
 157 
            />
125 
          </div>
 158 
          )}
126 
          <p>{content}</p>
 159 
          <p>{content}</p>
127 
        </div>
 160 
        </div>
128 
      </div>
 161 
      </StyledComment>
129 
      <ConfirmModal
 162 
      <ConfirmModal
130 
        show={showConfirmModal}
 163 
        show={showConfirmModal}
131 
        onClose={toggleModal}
 164 
        onClose={toggleModal}
132 
        onAccept={() => onDelete(unique, link_delete)}
 165 
        onAccept={() => onDelete(unique, link_delete)}
133 
        acceptLabel={labels.accept}
 166 
        acceptLabel={labels.accept}
134 
      />
 167 
      />
135 
    </li>
 168 
    </>
136 
  )
 169 
  )
Línea 137... Línea 170...
137 
}
 170 
}