contentoh-components-library 21.3.60 → 21.3.61
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.env.development +0 -2
- package/dist/components/molecules/CarouselImagesLogin/index.js +1 -1
- package/dist/components/molecules/HeaderTop/index.js +11 -68
- package/dist/components/organisms/Chat/Chat.stories.js +1 -21
- package/dist/components/organisms/Chat/ContainerItems/index.js +3 -19
- package/dist/components/organisms/Chat/ContainerItems/styles.js +1 -1
- package/dist/components/organisms/Chat/ContentChat/index.js +191 -343
- package/dist/components/organisms/Chat/Footer/index.js +39 -48
- package/dist/components/organisms/Chat/index.js +3 -48
- package/dist/components/organisms/FullProductNameHeader/index.js +2 -2
- package/dist/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js +127 -172
- package/dist/components/pages/ProviderProductEdition/index.js +129 -188
- package/dist/components/pages/ProviderProductEdition/styles.js +1 -1
- package/dist/components/pages/RetailerProductEdition/RetailerProductEdition.stories.js +28 -40
- package/dist/components/pages/RetailerProductEdition/index.js +281 -292
- package/dist/components/pages/RetailerProductEdition/styles.js +1 -1
- package/dist/components/pages/RetailerProductEdition/utils.js +2 -61
- package/package.json +1 -1
- package/src/components/molecules/CarouselImagesLogin/index.js +1 -1
- package/src/components/molecules/HeaderTop/index.js +6 -52
- package/src/components/organisms/Chat/Chat.stories.js +0 -21
- package/src/components/organisms/Chat/ContainerItems/index.js +2 -18
- package/src/components/organisms/Chat/ContainerItems/styles.js +2 -10
- package/src/components/organisms/Chat/ContentChat/index.js +6 -81
- package/src/components/organisms/Chat/Footer/index.js +0 -11
- package/src/components/organisms/Chat/index.js +3 -47
- package/src/components/organisms/FullProductNameHeader/index.js +1 -1
- package/src/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js +130 -177
- package/src/components/pages/ProviderProductEdition/index.js +55 -105
- package/src/components/pages/ProviderProductEdition/styles.js +1 -5
- package/src/components/pages/RetailerProductEdition/RetailerProductEdition.stories.js +26 -38
- package/src/components/pages/RetailerProductEdition/index.js +135 -130
- package/src/components/pages/RetailerProductEdition/styles.js +0 -4
- package/src/components/pages/RetailerProductEdition/utils.js +0 -37
- package/dist/components/organisms/SideModal/SideModal.stories.js +0 -42
- package/dist/components/organisms/SideModal/index.js +0 -61
- package/dist/components/organisms/SideModal/styles.js +0 -18
- package/src/components/organisms/SideModal/SideModal.stories.js +0 -23
- package/src/components/organisms/SideModal/index.js +0 -41
- package/src/components/organisms/SideModal/styles.js +0 -21
package/.env.development
CHANGED
|
@@ -24,8 +24,6 @@ REACT_APP_PENDING_INVITATIONS=https://fc069ovhuk.execute-api.us-east-1.amazonaws
|
|
|
24
24
|
REACT_APP_PRODUCTS_CHAT_ENDPOINT=https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/products-chat
|
|
25
25
|
REACT_APP_TICKETS_CHAT_ENDPOINT=https://ocqbzaa4a2.execute-api.us-east-1.amazonaws.com/dev/ticket-chat
|
|
26
26
|
REACT_APP_GET_AUDIT=https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/version-manager
|
|
27
|
-
REACT_APP_READ_MESSAGES=https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/read-messages
|
|
28
|
-
REACT_APP_CREATE_MESSAGES=https://fc069ovhuk.execute-api.us-east-1.amazonaws.com/dev/create-messages
|
|
29
27
|
|
|
30
28
|
REACT_APP_IMAGES_ENDPOINT=https://content-management-images.s3.amazonaws.com
|
|
31
29
|
REACT_APP_IMAGES_BUCKET=content-management-images
|
|
@@ -47,7 +47,7 @@ var CarouselImagesLogin = function CarouselImagesLogin(_ref) {
|
|
|
47
47
|
Array.from(circulos).forEach(function (cir) {
|
|
48
48
|
return cir.classList.remove("resaltado");
|
|
49
49
|
});
|
|
50
|
-
circulo_actual
|
|
50
|
+
circulo_actual.classList.add("resaltado");
|
|
51
51
|
img1.classList.add("right");
|
|
52
52
|
img2.classList.add("active");
|
|
53
53
|
i++;
|
|
@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.HeaderTop = void 0;
|
|
9
9
|
|
|
10
|
-
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
|
|
11
|
-
|
|
12
10
|
var _styles = require("./styles");
|
|
13
11
|
|
|
14
12
|
var _index = require("../../atoms/ScreenHeader/index");
|
|
@@ -21,14 +19,11 @@ var _Chat = require("../../organisms/Chat");
|
|
|
21
19
|
|
|
22
20
|
var _IconoAB = _interopRequireDefault(require("../../../../src/assets/images/generalButton/Icono AB.svg"));
|
|
23
21
|
|
|
24
|
-
var _react2 = require("@testing-library/react");
|
|
25
|
-
|
|
26
22
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
27
23
|
|
|
28
24
|
var HeaderTop = function HeaderTop(_ref) {
|
|
29
25
|
var setHeaderTop = _ref.setHeaderTop,
|
|
30
26
|
withChat = _ref.withChat,
|
|
31
|
-
chatType = _ref.chatType,
|
|
32
27
|
productSelected = _ref.productSelected,
|
|
33
28
|
token = _ref.token,
|
|
34
29
|
auditableVersion = _ref.auditableVersion,
|
|
@@ -36,78 +31,26 @@ var HeaderTop = function HeaderTop(_ref) {
|
|
|
36
31
|
isAuditor = _ref.isAuditor,
|
|
37
32
|
activeRetailer = _ref.activeRetailer;
|
|
38
33
|
var headerTop = (0, _react.useRef)();
|
|
39
|
-
|
|
40
|
-
var _useState = (0, _react.useState)(null),
|
|
41
|
-
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
42
|
-
chat = _useState2[0],
|
|
43
|
-
setChat = _useState2[1];
|
|
44
|
-
|
|
45
|
-
var _useState3 = (0, _react.useState)(null),
|
|
46
|
-
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
47
|
-
chatData = _useState4[0],
|
|
48
|
-
setChatData = _useState4[1];
|
|
49
|
-
|
|
50
|
-
(0, _react.useEffect)(function () {
|
|
51
|
-
if (activeRetailer.id && productSelected && token.length) {
|
|
52
|
-
var _productSelected$arti;
|
|
53
|
-
|
|
54
|
-
setChatData({
|
|
55
|
-
id: (productSelected === null || productSelected === void 0 ? void 0 : (_productSelected$arti = productSelected.article) === null || _productSelected$arti === void 0 ? void 0 : _productSelected$arti.id_article) || (productSelected === null || productSelected === void 0 ? void 0 : productSelected.id_article),
|
|
56
|
-
version: productSelected === null || productSelected === void 0 ? void 0 : productSelected.version,
|
|
57
|
-
retailerId: activeRetailer === null || activeRetailer === void 0 ? void 0 : activeRetailer.id,
|
|
58
|
-
status: productSelected === null || productSelected === void 0 ? void 0 : productSelected.status,
|
|
59
|
-
userToken: token
|
|
60
|
-
});
|
|
61
|
-
}
|
|
62
|
-
}, [activeRetailer, productSelected, token]);
|
|
63
|
-
(0, _react.useEffect)(function () {
|
|
64
|
-
if (chatType) renderChat(chatType);
|
|
65
|
-
}, [chatData, chatType]);
|
|
66
34
|
(0, _react.useEffect)(function () {
|
|
67
35
|
setHeaderTop && setHeaderTop(headerTop.current.clientHeight);
|
|
68
36
|
}, []);
|
|
69
|
-
|
|
70
|
-
var renderChat = function renderChat(chatType) {
|
|
71
|
-
switch (chatType) {
|
|
72
|
-
case "product_status":
|
|
73
|
-
chatData && setChat( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chat.Chat, {
|
|
74
|
-
chatType: "product_status",
|
|
75
|
-
chatContainerType: "popUp",
|
|
76
|
-
chatData: {
|
|
77
|
-
id: chatData === null || chatData === void 0 ? void 0 : chatData.id,
|
|
78
|
-
version: chatData === null || chatData === void 0 ? void 0 : chatData.version,
|
|
79
|
-
retailerId: chatData === null || chatData === void 0 ? void 0 : chatData.retailerId,
|
|
80
|
-
status: chatData === null || chatData === void 0 ? void 0 : chatData.status,
|
|
81
|
-
userToken: chatData === null || chatData === void 0 ? void 0 : chatData.userToken
|
|
82
|
-
},
|
|
83
|
-
size: 18,
|
|
84
|
-
activeRetailer: activeRetailer
|
|
85
|
-
}));
|
|
86
|
-
break;
|
|
87
|
-
|
|
88
|
-
default:
|
|
89
|
-
setChat( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chat.Chat, {
|
|
90
|
-
chatType: "merchant_product",
|
|
91
|
-
chatContainerType: "popUp",
|
|
92
|
-
chatData: {
|
|
93
|
-
userToken: token,
|
|
94
|
-
id: productSelected.id_article,
|
|
95
|
-
version: productSelected.version
|
|
96
|
-
},
|
|
97
|
-
size: 18,
|
|
98
|
-
activeRetailer: activeRetailer
|
|
99
|
-
}));
|
|
100
|
-
break;
|
|
101
|
-
}
|
|
102
|
-
};
|
|
103
|
-
|
|
104
37
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
|
|
105
38
|
ref: headerTop,
|
|
106
39
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ScreenHeader, {
|
|
107
40
|
text: "Edici\xF3n de producto"
|
|
108
41
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
109
42
|
className: "buttons-container",
|
|
110
|
-
children: [withChat &&
|
|
43
|
+
children: [withChat && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Chat.Chat, {
|
|
44
|
+
chatType: "merchant_product",
|
|
45
|
+
chatContainerType: "popUp",
|
|
46
|
+
chatData: {
|
|
47
|
+
userToken: token,
|
|
48
|
+
id: productSelected.id_article,
|
|
49
|
+
version: productSelected.version
|
|
50
|
+
},
|
|
51
|
+
size: 18,
|
|
52
|
+
activeRetailer: activeRetailer
|
|
53
|
+
}), isAuditor && auditableVersion && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Button, {
|
|
111
54
|
buttonType: "general-white-button circular-button",
|
|
112
55
|
onClick: function onClick() {
|
|
113
56
|
setCompare(function (current) {
|
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.default = exports.chatTicket_userTECH = exports.chatTicket_userNORMAL = exports.
|
|
8
|
+
exports.default = exports.chatTicket_userTECH = exports.chatTicket_userNORMAL = exports.chatPROV_orderProduct = exports.chatFAB_orderProduct_user49 = exports.chatFAB_orderProduct_user37 = exports.chatCAD_orderProduct = exports.chatCAD_merchantsProductProvider = exports.chatCAD_merchantsProduct = void 0;
|
|
9
9
|
|
|
10
10
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
|
|
11
11
|
|
|
@@ -172,24 +172,4 @@ chatTicket_userTECH.args = {
|
|
|
172
172
|
}
|
|
173
173
|
},
|
|
174
174
|
classNameContainerFixed: "chatTicket"
|
|
175
|
-
}; // ejemplo del chat para los cambios de status del producto.
|
|
176
|
-
|
|
177
|
-
var chatProduct_status = Template.bind({});
|
|
178
|
-
exports.chatProduct_status = chatProduct_status;
|
|
179
|
-
chatProduct_status.args = {
|
|
180
|
-
chatType: "product_status",
|
|
181
|
-
chatContainerType: "popUp",
|
|
182
|
-
chatData: {
|
|
183
|
-
id: 37414,
|
|
184
|
-
version: 7,
|
|
185
|
-
retailerId: 70,
|
|
186
|
-
status: "AA",
|
|
187
|
-
orderId: 15189,
|
|
188
|
-
userToken: "eyJraWQiOiJkQWJkZCtlclwvTlwveVRQUWNvUlVyOCtrNUd2M1hMM2N1MWUzQ09zWExVRnc9IiwiYWxnIjoiUlMyNTYifQ.eyJzdWIiOiI5YTIxMzEyOC02NDgyLTRjMTYtYTRiNi02ZTY0ZjIyNWIxYmQiLCJjb2duaXRvOmdyb3VwcyI6WyJjb2xhYm9yYWRvcmVzX2NvbnRlbnRvaCJdLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6XC9cL2NvZ25pdG8taWRwLnVzLWVhc3QtMS5hbWF6b25hd3MuY29tXC91cy1lYXN0LTFfWE1aUWRxa0dqIiwiY29nbml0bzp1c2VybmFtZSI6IjlhMjEzMTI4LTY0ODItNGMxNi1hNGI2LTZlNjRmMjI1YjFiZCIsImNvZ25pdG86cm9sZXMiOlsiYXJuOmF3czppYW06Ojg5ODY3MDIzMjgwNzpyb2xlXC9jb250ZW50b2gtZGV2LXVzLWVhc3QtMS1sYW1iZGFSb2xlIl0sImF1ZCI6IjVhYzh0cGdzNmdic3ExM2ZydnJwaWVlcDQwIiwiZXZlbnRfaWQiOiJhOWFhMDQ4Zi05YzRjLTQxODMtYWUzMS03OWVjNjBhY2NjZGYiLCJ0b2tlbl91c2UiOiJpZCIsImF1dGhfdGltZSI6MTY4MzU4ODM4OSwibmFtZSI6IkNvbGFib3JhZG9yIiwicGhvbmVfbnVtYmVyIjoiKzUyMTExMSIsImV4cCI6MTY4MzU5MTk4OSwiaWF0IjoxNjgzNTg4Mzg5LCJlbWFpbCI6ImlzbWFlbDk3bG9wZXpAZ21haWwuY29tIn0.k9FQfRR02XC3WWfOzWhrbJGmp69AmCHJEIrgtXKhIwC69trdphSm1AKkZnDJMsEdkpUgjF_zAOsa_xYRxO6goXy7WXVc_p7N-yFHlkhZrRyn3LEFKaLzD8vVqlWx4kgfSERm7KhI1AxPmrA-lw8eF6Axvqn3PvuszAw89_WhPOcnOt8vU0MxAVhLgS8oM6vyHFmHEHWQ2FnSYYed9sEvAxGh_B44aIgWeDteQGeGdYhsm6rUcxgkrskywZJp9FW5VgYXuDcC5NpvomMMRy_v95UV897JzCHl__sK2Z9ahm0eczVN3tAc0GbKnlN96ZrGTQ_nmNHbuMDPQBPXH5HXZQ",
|
|
189
|
-
currentUser: {
|
|
190
|
-
id: 37,
|
|
191
|
-
companyId: 2,
|
|
192
|
-
isUserTech: false
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
175
|
};
|
|
@@ -43,8 +43,6 @@ var _material = require("@mui/material");
|
|
|
43
43
|
|
|
44
44
|
var _ImagePreview = require("../../../atoms/ImagePreview");
|
|
45
45
|
|
|
46
|
-
var _Status = require("../../../atoms/Status");
|
|
47
|
-
|
|
48
46
|
var _handle_userTech = require("../../../../global-files/handle_userTech");
|
|
49
47
|
|
|
50
48
|
var _awsAmplify = require("aws-amplify");
|
|
@@ -89,7 +87,7 @@ var ContainerItems = function ContainerItems(props) {
|
|
|
89
87
|
var containerItems = (0, _react.useRef)(null);
|
|
90
88
|
(0, _react.useEffect)(function () {
|
|
91
89
|
if (!items) return;
|
|
92
|
-
if (["merchant_product", "order_product"
|
|
90
|
+
if (["merchant_product", "order_product"].includes(chatType)) renderItems();else if (chatType === "ticket") renderItemsTicket();else setCustomItems([]);
|
|
93
91
|
}, [items]);
|
|
94
92
|
(0, _react.useEffect)(function () {
|
|
95
93
|
var containerScroll = document.getElementById("ulItems");
|
|
@@ -163,20 +161,6 @@ var ContainerItems = function ContainerItems(props) {
|
|
|
163
161
|
});
|
|
164
162
|
};
|
|
165
163
|
|
|
166
|
-
var renderStatusItem = function renderStatusItem(item) {
|
|
167
|
-
var splitText = item.value.split("|");
|
|
168
|
-
var message = [];
|
|
169
|
-
splitText.forEach(function (text, i) {
|
|
170
|
-
if (i === 1 || i === 3) message.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Status.Status, {
|
|
171
|
-
statusType: text
|
|
172
|
-
}));else message.push(text);
|
|
173
|
-
});
|
|
174
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
|
|
175
|
-
className: "item-statusItem",
|
|
176
|
-
children: message
|
|
177
|
-
});
|
|
178
|
-
};
|
|
179
|
-
|
|
180
164
|
var renderStatusTicketNeutral = function renderStatusTicketNeutral(item) {
|
|
181
165
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.Tooltip, {
|
|
182
166
|
componentTooltip: /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
|
|
@@ -321,7 +305,7 @@ var ContainerItems = function ContainerItems(props) {
|
|
|
321
305
|
timeout: 500,
|
|
322
306
|
container: containerList.current,
|
|
323
307
|
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
|
|
324
|
-
className: (ownMessage
|
|
308
|
+
className: (ownMessage ? "own-message " : "") + (lastUserId === item.userId ? "sameUser" : ""),
|
|
325
309
|
children: [item.type !== "statusTicket" && lastUserId !== item.userId && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageTooltip.ImageTooltip, {
|
|
326
310
|
className: "container-imgUser",
|
|
327
311
|
sizeLoading: 25,
|
|
@@ -339,7 +323,7 @@ var ContainerItems = function ContainerItems(props) {
|
|
|
339
323
|
className: "label-nameUser",
|
|
340
324
|
children: users[item.userId].name
|
|
341
325
|
})
|
|
342
|
-
}), item.type === "message" ? renderMessage(item, differentCompany) : item.type === "comment" ? renderComment(item) : item.type === "img" ? renderImg(item) : item.type === "
|
|
326
|
+
}), item.type === "message" ? renderMessage(item, differentCompany) : item.type === "comment" ? renderComment(item) : item.type === "img" ? renderImg(item) : item.type === "file" ? renderFile(item, ownMessage) : item.type === "statusTicket" && [ticketCompany, 254].includes(currentUser.companyId) ? renderStatusTicket(item) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
|
|
343
327
|
className: "label-time",
|
|
344
328
|
children: (0, _utils.getTime)(item.date)
|
|
345
329
|
})]
|
|
@@ -15,6 +15,6 @@ var _variables = require("../../../../global-files/variables");
|
|
|
15
15
|
|
|
16
16
|
var _templateObject;
|
|
17
17
|
|
|
18
|
-
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n max-height: 100%;\n flex-grow: 2;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n gap: 8px;\n background: white;\n padding: 15px 11px;\n overflow: auto;\n //border: 1px solid red;\n\n .btn-loadMore {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n flex-grow: 2;\n\n .container-btnLoadMore {\n border-radius: 10px;\n .button {\n padding: 5px 10px;\n border: none;\n gap: 10px;\n font-family: ", ";\n .icon,\n .iconLoading {\n font-size: 10px;\n }\n }\n }\n }\n\n // lista de items\n > ul {\n --marginUserValue: 10px;\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 0px;\n\n // items cambio de estatus general del article\n // items cambio de estatus en servicio del article\n .label-statusArticle,\n .label-statusService {\n width: 100%;\n padding: 10px;\n border-radius: 10px;\n display: grid;\n place-items: center;\n cursor: default;\n\n text-align: left;\n font-family: ", ", sans-serif;\n color: white;\n font-size: 12px;\n\n .label {\n text-align: left;\n font-family: ", ", sans-serif;\n color: white;\n font-size: 12px;\n white-space: pre-wrap;\n cursor: inherit;\n }\n }\n .label-statusArticle {\n background-color: #85bc5b;\n }\n .label-statusService {\n background-color: #8a6caa;\n }\n\n // cada item dentro de la lista (fechas|message|img|file|status...)\n li {\n width: 90%;\n padding: 0px;\n margin: 16px 0px 0px 0px;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n flex-wrap: nowrap;\n gap: var(--marginUserValue);\n align-items: center;\n align-self: flex-start;\n //border: 1px solid blue;\n\n & > label:first-child,\n .item-img {\n margin: 0px 0px 0px 44px;\n }\n\n &.sameUser {\n margin: 2px 0px 0px 0px;\n /* padding: 0px 0px 0px calc(34px + var(--marginUserValue)); */\n }\n\n // items gray label (para fechas)\n &.label-gray {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px; //0px calc(34px + var(--marginUserValue));\n\n .separator {\n flex-grow: 2;\n min-width: 35px;\n border: 0.3px solid #f0f0f0;\n }\n label {\n padding: 4px 15px;\n text-align: center;\n font-family: ", ", sans-serif;\n color: #b3b3b3;\n font-size: 10px;\n }\n }\n\n // container ImageTooltip del user de un item\n .container-imgUser {\n display: grid;\n place-items: center;\n width: 34px;\n min-width: min-content;\n border-radius: 50%;\n overflow: hidden;\n align-self: flex-start;\n margin: 0;\n }\n .icon-imgUser.fill {\n padding: 0px;\n width: 34px;\n height: 34px;\n color: #9d9d9d;\n border-color: #9d9d9d;\n border-width: 2px;\n }\n .tooltip-imgUser {\n .label-nameUser {\n font-family: ", ", sans-serif;\n color: #262626;\n font-size: 12px;\n text-align: center;\n }\n }\n\n // items de tipo message, comment y file\n .item-message,\n .item-comment,\n .item-file,\n .item-statusTicket
|
|
18
|
+
var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n max-height: 100%;\n flex-grow: 2;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n gap: 8px;\n background: white;\n padding: 15px 11px;\n overflow: auto;\n //border: 1px solid red;\n\n .btn-loadMore {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n flex-grow: 2;\n\n .container-btnLoadMore {\n border-radius: 10px;\n .button {\n padding: 5px 10px;\n border: none;\n gap: 10px;\n font-family: ", ";\n .icon,\n .iconLoading {\n font-size: 10px;\n }\n }\n }\n }\n\n // lista de items\n > ul {\n --marginUserValue: 10px;\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 0px;\n\n // items cambio de estatus general del article\n // items cambio de estatus en servicio del article\n .label-statusArticle,\n .label-statusService {\n width: 100%;\n padding: 10px;\n border-radius: 10px;\n display: grid;\n place-items: center;\n cursor: default;\n\n text-align: left;\n font-family: ", ", sans-serif;\n color: white;\n font-size: 12px;\n\n .label {\n text-align: left;\n font-family: ", ", sans-serif;\n color: white;\n font-size: 12px;\n white-space: pre-wrap;\n cursor: inherit;\n }\n }\n .label-statusArticle {\n background-color: #85bc5b;\n }\n .label-statusService {\n background-color: #8a6caa;\n }\n\n // cada item dentro de la lista (fechas|message|img|file|status...)\n li {\n width: 90%;\n padding: 0px;\n margin: 16px 0px 0px 0px;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n flex-wrap: nowrap;\n gap: var(--marginUserValue);\n align-items: center;\n align-self: flex-start;\n //border: 1px solid blue;\n\n & > label:first-child,\n .item-img {\n margin: 0px 0px 0px 44px;\n }\n\n &.sameUser {\n margin: 2px 0px 0px 0px;\n /* padding: 0px 0px 0px calc(34px + var(--marginUserValue)); */\n }\n\n // items gray label (para fechas)\n &.label-gray {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px; //0px calc(34px + var(--marginUserValue));\n\n .separator {\n flex-grow: 2;\n min-width: 35px;\n border: 0.3px solid #f0f0f0;\n }\n label {\n padding: 4px 15px;\n text-align: center;\n font-family: ", ", sans-serif;\n color: #b3b3b3;\n font-size: 10px;\n }\n }\n\n // container ImageTooltip del user de un item\n .container-imgUser {\n display: grid;\n place-items: center;\n width: 34px;\n min-width: min-content;\n border-radius: 50%;\n overflow: hidden;\n align-self: flex-start;\n margin: 0;\n }\n .icon-imgUser.fill {\n padding: 0px;\n width: 34px;\n height: 34px;\n color: #9d9d9d;\n border-color: #9d9d9d;\n border-width: 2px;\n }\n .tooltip-imgUser {\n .label-nameUser {\n font-family: ", ", sans-serif;\n color: #262626;\n font-size: 12px;\n text-align: center;\n }\n }\n\n // items de tipo message, comment y file\n .item-message,\n .item-comment,\n .item-file,\n .item-statusTicket {\n border-radius: 10px;\n padding: 10px;\n font-family: ", ", sans-serif;\n font-size: 12px;\n text-align: left;\n white-space: pre-line;\n color: white;\n word-break: break-word;\n }\n .item-message,\n .item-comment,\n .item-file {\n background-color: #8386ee;\n }\n .item-statusTicket {\n background-color: #85bc5b;\n }\n\n .item-message {\n &.different-company {\n border: 1px solid #e33aa9;\n }\n }\n /*\n .item-comment {\n background-color: #5e61b2;\n }\n */\n\n // items de tipo img\n .item-img {\n display: grid;\n place-items: center;\n background-color: #f7f7f7;\n border-radius: 10px;\n overflow: hidden;\n max-width: 60%;\n max-height: 300px;\n\n .container-ImagePreview {\n max-height: inherit;\n\n > .img {\n max-height: inherit;\n }\n\n .label-nameImg {\n .iconDefaultImg {\n border-radius: 0px;\n border: none;\n padding: 0px;\n color: #8386ee;\n }\n }\n }\n }\n\n // items de tipo file\n .item-file {\n width: auto;\n max-width: 70%;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 6px;\n\n .btnDownloadFileItem {\n width: 28px;\n min-width: 28px;\n height: 28px;\n min-height: 28px;\n }\n\n // nameFile solo 1 linea\n .label-nameFileShort {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n flex-grow: 2;\n cursor: default;\n font-family: ", ", sans-serif;\n font-size: 12px;\n text-align: center;\n color: white;\n }\n }\n\n // label hora del item\n .label-time {\n min-width: fit-content;\n color: #c7c7c7;\n font-family: ", ", sans-serif;\n font-size: 9px;\n }\n\n & > .label-time:first-child {\n display: none;\n }\n\n // items del currentUser\n &.own-message {\n align-self: flex-end;\n flex-direction: row-reverse;\n\n /* &.sameUser {\n padding: 0px calc(34px + var(--marginUserValue)) 0px 0px;\n } */\n\n .item-message,\n .item-comment {\n color: #262626;\n }\n .item-message,\n .item-comment,\n .item-file {\n background-color: #f0f0f0;\n }\n\n & > .item-message:first-child {\n margin: 0px 40px 0px 0px;\n }\n /*\n .item-comment {\n background-color: #d7d7d7;\n }\n */\n\n // items de tipo img\n .item-img {\n .container-ImagePreview {\n .label-nameImg {\n .iconDefaultImg {\n color: #c9c7c7;\n }\n }\n }\n }\n\n // items de tipo file\n .item-file {\n .btnDownloadFileItem {\n .iconFile,\n .container-btnDownload .buttonMUI .icon {\n color: #262626;\n }\n }\n\n // nameFile solo 1 linea\n .label-nameFileShort {\n color: #262626;\n }\n }\n }\n\n // items neutrales (center aligned)\n &.itemNeutral {\n width: 100%;\n\n .itemStatus {\n width: 100%;\n padding: 10px;\n border-radius: 10px;\n display: grid;\n place-items: center;\n cursor: default;\n text-align: center;\n font-family: ", ", sans-serif;\n color: white;\n font-size: 12px;\n line-height: 1.2;\n white-space: pre-wrap;\n\n &.ticket {\n color: white;\n background-color: #85bc5b;\n }\n }\n }\n }\n }\n\n .content-chat {\n ::-webkit-scrollbar {\n width: 0;\n }\n }\n"])), _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular);
|
|
19
19
|
|
|
20
20
|
exports.Container = Container;
|