User Picker Implementation

This commit is contained in:
yanas 2017-06-14 13:41:22 -05:00 committed by virtuacoplenny
parent 47b6166d79
commit f5d443d194
27 changed files with 1058 additions and 226 deletions

View File

@ -47,10 +47,6 @@ button, input, select, textarea {
button, select, input[type="button"], button, select, input[type="button"],
input[type="reset"], input[type="submit"] { input[type="reset"], input[type="submit"] {
height: 32px;
line-height: 32px;
padding-left: 4px;
padding-right: 4px;
cursor: pointer; cursor: pointer;
} }

View File

@ -151,3 +151,6 @@
.icon-telephone:before { .icon-telephone:before {
content: "\e0cd"; content: "\e0cd";
} }
.icon-add:before {
content: "\e145";
}

View File

@ -73,6 +73,7 @@
@import 'policy'; @import 'policy';
@import 'filmstrip'; @import 'filmstrip';
@import 'unsupported-browser/main'; @import 'unsupported-browser/main';
@import 'modals/invite/add-people';
@import 'vertical_filmstrip_overrides'; @import 'vertical_filmstrip_overrides';
/* Modules END */ /* Modules END */

View File

@ -79,6 +79,7 @@
.modal-dialog-form { .modal-dialog-form {
color: $modalTextColor; color: $modalTextColor;
margin-top: 5px !important;
.input-control { .input-control {
background: $modalMockAKInputBackground; background: $modalMockAKInputBackground;
@ -89,3 +90,21 @@
.modal-dialog-footer { .modal-dialog-footer {
font-size: $modalButtonFontSize; font-size: $modalButtonFontSize;
} }
/**
* Styling inline dialog errors.
*/
.inline-dialog-error {
margin-top: 16px;
&-text {
color: $dialogErrorText;
margin-bottom: 8px;
text-align: center;
}
&-button {
display: block;
margin: 16px auto 0 auto;
}
}

View File

@ -0,0 +1,32 @@
/**
* Styles errors and links in the AddPeopleDialog.
*/
.modal-dialog-form {
.add-people-form-wrap {
.error {
padding-left: 5px;
a {
padding-left: 5px;
}
}
}
}
/**
* Styles the loading element in the MultiSelectAutocomplete.
*/
.autocomplete-loading {
justify-content: center;
display: flex;
min-width: 260px;
padding: 20px;
}
/**
* Styles errors in the MultiSelectAutocomplete.
*/
.autocomplete-error {
min-width: 260px;
}

View File

@ -58,6 +58,7 @@ $auiDialogBg: #f5f5f5;
$auiDialogContentBg: $baseLight; $auiDialogContentBg: $baseLight;
$auiBorderColor: #ccc; $auiBorderColor: #ccc;
$dialogTitleFontWeight: 400; $dialogTitleFontWeight: 400;
$dialogErrorText: #344563;
/** /**
* Inlay colors * Inlay colors

Binary file not shown.

View File

@ -8,6 +8,7 @@
<missing-glyph horiz-adv-x="1024" /> <missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" d="" /> <glyph unicode="&#x20;" d="" />
<glyph unicode="&#xe0cd;" glyph-name="phone" d="M282 564c62-120 162-220 282-282l94 94c12 12 30 16 44 10 48-16 100-24 152-24 24 0 42-18 42-42v-150c0-24-18-42-42-42-400 0-726 326-726 726 0 24 18 42 42 42h150c24 0 42-18 42-42 0-54 8-104 24-152 4-14 2-32-10-44z" /> <glyph unicode="&#xe0cd;" glyph-name="phone" d="M282 564c62-120 162-220 282-282l94 94c12 12 30 16 44 10 48-16 100-24 152-24 24 0 42-18 42-42v-150c0-24-18-42-42-42-400 0-726 326-726 726 0 24 18 42 42 42h150c24 0 42-18 42-42 0-54 8-104 24-152 4-14 2-32-10-44z" />
<glyph unicode="&#xe145;" glyph-name="add" d="M810 470h-256v-256h-84v256h-256v84h256v256h84v-256h256v-84z" />
<glyph unicode="&#xe603;" glyph-name="presentation" horiz-adv-x="1088" d="M952.495 1019.065h-818.689c-72.81 0-132.183-60.63-132.183-135.162v-750.719c0-74.473 59.372-135.101 132.183-135.101h818.686c72.936 0 132.314 60.625 132.314 135.101v750.722c0.003 74.532-59.378 135.159-132.311 135.159zM946.346 139.651h-806.14v737.822h806.015l0.126-737.822zM685.753 738.544h216.911v-566.758h-216.911v566.758zM428.672 610.002h216.911v-438.216h-216.911v438.216zM172.339 481.46h216.161v-309.677h-216.161v309.677z" /> <glyph unicode="&#xe603;" glyph-name="presentation" horiz-adv-x="1088" d="M952.495 1019.065h-818.689c-72.81 0-132.183-60.63-132.183-135.162v-750.719c0-74.473 59.372-135.101 132.183-135.101h818.686c72.936 0 132.314 60.625 132.314 135.101v750.722c0.003 74.532-59.378 135.159-132.311 135.159zM946.346 139.651h-806.14v737.822h806.015l0.126-737.822zM685.753 738.544h216.911v-566.758h-216.911v566.758zM428.672 610.002h216.911v-438.216h-216.911v438.216zM172.339 481.46h216.161v-309.677h-216.161v309.677z" />
<glyph unicode="&#xe613;" glyph-name="recDisable" horiz-adv-x="1140" d="M1123.444 1003.015c-23.593 26.481-64.131 28.989-90.74 5.395l-1008.269-893.436c-26.609-23.468-28.991-64.131-5.46-90.676 12.674-14.306 30.308-21.649 48.126-21.649 15.123 0 30.372 5.401 42.544 16.195l130.045 115.22c90.743-81.844 210.569-132.165 342.473-132.101 282.816 0.061 510.913 227.969 511.287 510.972 0.126 109.934-34.682 211.367-93.499 294.72l118.088 104.625c26.483 23.526 28.997 64.129 5.404 90.735zM944.422 513.818c0.128-200.922-161.896-363.201-362.509-362.952-87.56 0.123-167.573 31.151-230.061 82.569l331.277 293.509v-73.176c1.071-60.993 32.696-92.18 94.944-93.692 61.997 1.512 93.686 32.763 95.131 93.756v41.096h-72.227v-47.499c0.251-4.642-0.564-10.607-2.511-17.949-1.25-3.261-3.448-6.020-6.525-8.093-3.197-2.572-7.845-3.828-13.868-3.828-10.543 0.31-17.132 4.268-19.827 11.921-1.068 3.512-1.947 6.905-2.508 10.163-0.254 2.887-0.377 5.532-0.377 7.786v143.511l42.477 37.634c0.215-0.432 0.452-0.851 0.63-1.303 1.947-6.467 2.762-12.799 2.511-19.076v-36.772h72.227v30.121c-0.246 31.245-9.086 54.699-26.363 70.447l40.711 36.069c35.787-56.055 56.803-122.585 56.867-194.244zM239.795 395.47c-12.613 37.023-19.827 76.557-19.827 117.913-0.19 200.236 161.584 362.009 361.945 362.135 56.853 0 110.313-13.302 158.133-36.398l117.846 104.421c-79.444 50.952-173.758 80.817-275.292 80.948-283.377 0.181-511.354-227.729-511.789-511.675-0.126-79.567 18.636-154.679 51.137-221.882l117.848 104.538zM388.576 690.020h-97.514v-249.057l72.23 64.070v0.689h0.815l117.72 104.418c0 0.564 0.123 0.94 0.123 1.509 0.753 53.898-30.369 80.069-93.374 78.37zM405.959 625.517c1.942-2.767 3.074-6.469 3.323-11.112 0.312-4.452 0.438-9.6 0.438-15.246 0.251-10.916-0.689-19.83-2.949-26.985-2.952-7.594-10.983-11.357-24.159-11.357h-19.325v74.043h15.31c7.842 0 13.865-0.683 18.072-2.19 4.397-1.573 7.468-3.953 9.29-7.153z" /> <glyph unicode="&#xe613;" glyph-name="recDisable" horiz-adv-x="1140" d="M1123.444 1003.015c-23.593 26.481-64.131 28.989-90.74 5.395l-1008.269-893.436c-26.609-23.468-28.991-64.131-5.46-90.676 12.674-14.306 30.308-21.649 48.126-21.649 15.123 0 30.372 5.401 42.544 16.195l130.045 115.22c90.743-81.844 210.569-132.165 342.473-132.101 282.816 0.061 510.913 227.969 511.287 510.972 0.126 109.934-34.682 211.367-93.499 294.72l118.088 104.625c26.483 23.526 28.997 64.129 5.404 90.735zM944.422 513.818c0.128-200.922-161.896-363.201-362.509-362.952-87.56 0.123-167.573 31.151-230.061 82.569l331.277 293.509v-73.176c1.071-60.993 32.696-92.18 94.944-93.692 61.997 1.512 93.686 32.763 95.131 93.756v41.096h-72.227v-47.499c0.251-4.642-0.564-10.607-2.511-17.949-1.25-3.261-3.448-6.020-6.525-8.093-3.197-2.572-7.845-3.828-13.868-3.828-10.543 0.31-17.132 4.268-19.827 11.921-1.068 3.512-1.947 6.905-2.508 10.163-0.254 2.887-0.377 5.532-0.377 7.786v143.511l42.477 37.634c0.215-0.432 0.452-0.851 0.63-1.303 1.947-6.467 2.762-12.799 2.511-19.076v-36.772h72.227v30.121c-0.246 31.245-9.086 54.699-26.363 70.447l40.711 36.069c35.787-56.055 56.803-122.585 56.867-194.244zM239.795 395.47c-12.613 37.023-19.827 76.557-19.827 117.913-0.19 200.236 161.584 362.009 361.945 362.135 56.853 0 110.313-13.302 158.133-36.398l117.846 104.421c-79.444 50.952-173.758 80.817-275.292 80.948-283.377 0.181-511.354-227.729-511.789-511.675-0.126-79.567 18.636-154.679 51.137-221.882l117.848 104.538zM388.576 690.020h-97.514v-249.057l72.23 64.070v0.689h0.815l117.72 104.418c0 0.564 0.123 0.94 0.123 1.509 0.753 53.898-30.369 80.069-93.374 78.37zM405.959 625.517c1.942-2.767 3.074-6.469 3.323-11.112 0.312-4.452 0.438-9.6 0.438-15.246 0.251-10.916-0.689-19.83-2.949-26.985-2.952-7.594-10.983-11.357-24.159-11.357h-19.325v74.043h15.31c7.842 0 13.865-0.683 18.072-2.19 4.397-1.573 7.468-3.953 9.29-7.153z" />
<glyph unicode="&#xe614;" glyph-name="recEnable" horiz-adv-x="1142" d="M581.278 1025.708c284.857-0.19 514.807-230.517 514.427-514.997-0.378-285.047-230.073-514.553-514.869-514.615-284.541-0.062-515.311 230.517-514.933 514.422 0.439 285.936 230.009 515.439 515.375 515.19zM580.579 875.756c-201.764-0.123-364.666-163.032-364.478-364.663 0-202.018 162.524-364.735 364.478-364.984 202.018-0.316 365.174 163.030 365.048 365.423-0.252 201.767-163.156 364.35-365.048 364.224zM287.698 688.907h98.196c63.442 1.767 94.785-24.518 94.027-78.863 0.254-19.081-2.211-34.882-7.456-47.521-6.005-12.508-18.706-21.988-38.167-28.181v-0.819c28.373-6.259 43.031-23.573 43.981-51.946v-57.689c0-11.247 0.254-22.813 0.758-34.756 0.819-12.005 3.033-20.979 6.696-27.043h-71.846c-3.727 6.064-6.128 15.038-7.14 27.043-1.012 11.943-1.454 23.509-1.138 34.756v52.321c0 9.603-2.214 16.553-6.573 20.979-4.675 4.107-12.701 6.19-24.012 6.19h-14.599v-141.291h-72.73v326.82zM360.428 558.861h19.463c13.271 0 21.359 3.794 24.331 11.375 2.276 7.204 3.221 16.304 2.969 27.171 0 5.815-0.126 10.867-0.442 15.418-0.252 4.675-1.392 8.404-3.352 11.247-1.831 3.157-4.926 5.561-9.352 7.14-4.233 1.454-10.299 2.211-18.2 2.211h-15.418v-74.564zM498.372 688.907h162.082v-62.687h-89.35v-65.587h78.103v-62.685h-78.103v-73.11h92.822v-62.749h-165.557v326.818zM682.507 599.999c0.316 31.782 9.416 55.542 27.425 71.407 17.44 15.29 40.185 22.936 68.181 22.936 28.247 0 51.119-7.646 68.623-23 17.82-15.798 26.92-39.623 27.171-71.407v-30.333h-72.73v37.031c0.254 6.192-0.57 12.639-2.527 19.209-1.264 3.157-3.475 5.938-6.573 8.214-3.221 1.515-7.898 2.404-13.964 2.404-10.615-0.316-17.249-3.855-19.967-10.618-2.211-6.573-3.223-13.017-2.907-19.209v-161.956c0-2.273 0.126-4.865 0.38-7.772 0.568-3.411 1.454-6.824 2.527-10.233 2.717-7.775 9.352-11.756 19.967-12.007 6.067 0 10.744 1.261 13.964 3.791 3.098 2.15 5.309 4.867 6.573 8.216 1.96 7.33 2.782 13.33 2.527 18.007v47.837h72.73v-41.328c-1.451-61.547-33.364-93.015-95.794-94.469-62.685 1.454-94.53 32.922-95.607 94.343v148.937z" /> <glyph unicode="&#xe614;" glyph-name="recEnable" horiz-adv-x="1142" d="M581.278 1025.708c284.857-0.19 514.807-230.517 514.427-514.997-0.378-285.047-230.073-514.553-514.869-514.615-284.541-0.062-515.311 230.517-514.933 514.422 0.439 285.936 230.009 515.439 515.375 515.19zM580.579 875.756c-201.764-0.123-364.666-163.032-364.478-364.663 0-202.018 162.524-364.735 364.478-364.984 202.018-0.316 365.174 163.030 365.048 365.423-0.252 201.767-163.156 364.35-365.048 364.224zM287.698 688.907h98.196c63.442 1.767 94.785-24.518 94.027-78.863 0.254-19.081-2.211-34.882-7.456-47.521-6.005-12.508-18.706-21.988-38.167-28.181v-0.819c28.373-6.259 43.031-23.573 43.981-51.946v-57.689c0-11.247 0.254-22.813 0.758-34.756 0.819-12.005 3.033-20.979 6.696-27.043h-71.846c-3.727 6.064-6.128 15.038-7.14 27.043-1.012 11.943-1.454 23.509-1.138 34.756v52.321c0 9.603-2.214 16.553-6.573 20.979-4.675 4.107-12.701 6.19-24.012 6.19h-14.599v-141.291h-72.73v326.82zM360.428 558.861h19.463c13.271 0 21.359 3.794 24.331 11.375 2.276 7.204 3.221 16.304 2.969 27.171 0 5.815-0.126 10.867-0.442 15.418-0.252 4.675-1.392 8.404-3.352 11.247-1.831 3.157-4.926 5.561-9.352 7.14-4.233 1.454-10.299 2.211-18.2 2.211h-15.418v-74.564zM498.372 688.907h162.082v-62.687h-89.35v-65.587h78.103v-62.685h-78.103v-73.11h92.822v-62.749h-165.557v326.818zM682.507 599.999c0.316 31.782 9.416 55.542 27.425 71.407 17.44 15.29 40.185 22.936 68.181 22.936 28.247 0 51.119-7.646 68.623-23 17.82-15.798 26.92-39.623 27.171-71.407v-30.333h-72.73v37.031c0.254 6.192-0.57 12.639-2.527 19.209-1.264 3.157-3.475 5.938-6.573 8.214-3.221 1.515-7.898 2.404-13.964 2.404-10.615-0.316-17.249-3.855-19.967-10.618-2.211-6.573-3.223-13.017-2.907-19.209v-161.956c0-2.273 0.126-4.865 0.38-7.772 0.568-3.411 1.454-6.824 2.527-10.233 2.717-7.775 9.352-11.756 19.967-12.007 6.067 0 10.744 1.261 13.964 3.791 3.098 2.15 5.309 4.867 6.573 8.216 1.96 7.33 2.782 13.33 2.527 18.007v47.837h72.73v-41.328c-1.451-61.547-33.364-93.015-95.794-94.469-62.685 1.454-94.53 32.922-95.607 94.343v148.937z" />

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Binary file not shown.

View File

@ -1,62 +1,6 @@
{ {
"IcoMoonType": "selection", "IcoMoonType": "selection",
"icons": [ "icons": [
{
"icon": {
"paths": [
"M330.667 554.667c-0.427-14.933 6.4-29.44 17.92-39.253 32 6.827 61.867 20.053 88.747 39.253 0 29.013-23.893 52.907-53.333 52.907s-52.907-23.467-53.333-52.907zM586.667 554.667c26.88-18.773 56.747-32 88.747-38.827 11.52 9.813 18.347 24.32 17.92 38.827 0 29.867-23.893 53.76-53.333 53.76s-53.333-23.893-53.333-53.76v0zM512 384c-118.187-1.707-234.667 27.733-338.347 85.333l-2.987 42.667c0 52.48 12.373 104.107 35.84 151.040 101.12-15.36 203.093-23.040 305.493-23.040s204.373 7.68 305.493 23.040c23.467-46.933 35.84-98.56 35.84-151.040l-2.987-42.667c-103.68-57.6-220.16-87.040-338.347-85.333zM512 85.333c235.641 0 426.667 191.025 426.667 426.667s-191.025 426.667-426.667 426.667c-235.641 0-426.667-191.025-426.667-426.667s191.025-426.667 426.667-426.667z"
],
"attrs": [
{}
],
"isMulticolor": false,
"isMulticolor2": false,
"grid": 24,
"tags": [
"ninja"
]
},
"attrs": [
{}
],
"properties": {
"order": 851,
"id": 121,
"name": "ninja",
"prevSize": 32,
"code": 59657
},
"setIdx": 0,
"setId": 1,
"iconIdx": 0
},
{
"icon": {
"paths": [
"M282 460c62 120 162 220 282 282l94-94c12-12 30-16 44-10 48 16 100 24 152 24 24 0 42 18 42 42v150c0 24-18 42-42 42-400 0-726-326-726-726 0-24 18-42 42-42h150c24 0 42 18 42 42 0 54 8 104 24 152 4 14 2 32-10 44z"
],
"attrs": [],
"isMulticolor": false,
"isMulticolor2": false,
"tags": [
"phone"
],
"defaultCode": 57549,
"grid": 24
},
"attrs": [],
"properties": {
"ligatures": "call, local_phone, phone",
"id": 120,
"order": 848,
"prevSize": 32,
"code": 57549,
"name": "phone"
},
"setIdx": 0,
"setId": 1,
"iconIdx": 41
},
{ {
"icon": { "icon": {
"paths": [ "paths": [
@ -76,15 +20,15 @@
{} {}
], ],
"properties": { "properties": {
"order": 109, "order": 856,
"id": 0, "id": 0,
"name": "mic-camera-combined", "name": "mic-camera-combined",
"prevSize": 32, "prevSize": 32,
"code": 59651 "code": 59651
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 1 "iconIdx": 0
}, },
{ {
"icon": { "icon": {
@ -105,15 +49,15 @@
{} {}
], ],
"properties": { "properties": {
"order": 104, "order": 857,
"id": 1, "id": 1,
"name": "feedback", "name": "feedback",
"prevSize": 32, "prevSize": 32,
"code": 59677 "code": 59677
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 2 "iconIdx": 1
}, },
{ {
"icon": { "icon": {
@ -134,15 +78,15 @@
{} {}
], ],
"properties": { "properties": {
"order": 103, "order": 858,
"id": 2, "id": 2,
"name": "toggle-filmstrip", "name": "toggle-filmstrip",
"prevSize": 32, "prevSize": 32,
"code": 59676 "code": 59676
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 3 "iconIdx": 2
}, },
{ {
"icon": { "icon": {
@ -160,15 +104,15 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 3, "id": 3,
"order": 60, "order": 859,
"ligatures": "account_circle", "ligatures": "account_circle",
"prevSize": 32, "prevSize": 32,
"code": 59649, "code": 59649,
"name": "avatar" "name": "avatar"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 4 "iconIdx": 3
}, },
{ {
"icon": { "icon": {
@ -186,15 +130,15 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 4, "id": 4,
"order": 849, "order": 860,
"ligatures": "call_end", "ligatures": "call_end",
"prevSize": 32, "prevSize": 32,
"code": 59653, "code": 59653,
"name": "hangup" "name": "hangup"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 5 "iconIdx": 4
}, },
{ {
"icon": { "icon": {
@ -212,15 +156,15 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 5, "id": 5,
"order": 61, "order": 861,
"ligatures": "chat_bubble_outline", "ligatures": "chat_bubble_outline",
"prevSize": 32, "prevSize": 32,
"code": 59654, "code": 59654,
"name": "chat" "name": "chat"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 6 "iconIdx": 5
}, },
{ {
"icon": { "icon": {
@ -238,15 +182,15 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 6, "id": 6,
"order": 99, "order": 862,
"ligatures": "cloud_download", "ligatures": "cloud_download",
"prevSize": 32, "prevSize": 32,
"code": 59650, "code": 59650,
"name": "download" "name": "download"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 7 "iconIdx": 6
}, },
{ {
"icon": { "icon": {
@ -264,15 +208,15 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 7, "id": 7,
"order": 89, "order": 863,
"ligatures": "create, edit, mode_edit", "ligatures": "create, edit, mode_edit",
"prevSize": 32, "prevSize": 32,
"code": 59655, "code": 59655,
"name": "edit" "name": "edit"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 8 "iconIdx": 7
}, },
{ {
"icon": { "icon": {
@ -290,15 +234,15 @@
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 8, "id": 8,
"order": 85, "order": 864,
"ligatures": "description", "ligatures": "description",
"prevSize": 32, "prevSize": 32,
"code": 59656, "code": 59656,
"name": "share-doc" "name": "share-doc"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 9 "iconIdx": 8
}, },
{ {
"icon": { "icon": {
@ -315,16 +259,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 10, "id": 9,
"order": 98, "order": 865,
"ligatures": "eject", "ligatures": "eject",
"prevSize": 32, "prevSize": 32,
"code": 59652, "code": 59652,
"name": "kick" "name": "kick"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 10 "iconIdx": 9
}, },
{ {
"icon": { "icon": {
@ -341,16 +285,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 11, "id": 10,
"order": 106, "order": 866,
"ligatures": "expand_less", "ligatures": "expand_less",
"prevSize": 32, "prevSize": 32,
"code": 59679, "code": 59679,
"name": "menu-up" "name": "menu-up"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 11 "iconIdx": 10
}, },
{ {
"icon": { "icon": {
@ -367,16 +311,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 12, "id": 11,
"order": 107, "order": 867,
"ligatures": "expand_more", "ligatures": "expand_more",
"prevSize": 32, "prevSize": 32,
"code": 59680, "code": 59680,
"name": "menu-down" "name": "menu-down"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 12 "iconIdx": 11
}, },
{ {
"icon": { "icon": {
@ -393,16 +337,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 13, "id": 12,
"order": 94, "order": 868,
"ligatures": "fullscreen", "ligatures": "fullscreen",
"prevSize": 32, "prevSize": 32,
"code": 59659, "code": 59659,
"name": "full-screen" "name": "full-screen"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 13 "iconIdx": 12
}, },
{ {
"icon": { "icon": {
@ -419,16 +363,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 14, "id": 13,
"order": 92, "order": 869,
"ligatures": "fullscreen_exit", "ligatures": "fullscreen_exit",
"prevSize": 32, "prevSize": 32,
"code": 59660, "code": 59660,
"name": "exit-full-screen" "name": "exit-full-screen"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 14 "iconIdx": 13
}, },
{ {
"icon": { "icon": {
@ -445,16 +389,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 15, "id": 14,
"order": 101, "order": 870,
"ligatures": "grade, star", "ligatures": "grade, star",
"prevSize": 32, "prevSize": 32,
"code": 59658, "code": 59658,
"name": "star-full" "name": "star-full"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 15 "iconIdx": 14
}, },
{ {
"icon": { "icon": {
@ -471,16 +415,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 16, "id": 15,
"order": 66, "order": 871,
"ligatures": "lock_open", "ligatures": "lock_open",
"prevSize": 32, "prevSize": 32,
"code": 59661, "code": 59661,
"name": "security" "name": "security"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 16 "iconIdx": 15
}, },
{ {
"icon": { "icon": {
@ -497,16 +441,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 17, "id": 16,
"order": 65, "order": 872,
"ligatures": "lock_outline", "ligatures": "lock_outline",
"prevSize": 32, "prevSize": 32,
"code": 59662, "code": 59662,
"name": "security-locked" "name": "security-locked"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 17 "iconIdx": 16
}, },
{ {
"icon": { "icon": {
@ -523,16 +467,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 18, "id": 17,
"order": 67, "order": 873,
"ligatures": "loop, sync", "ligatures": "loop, sync",
"prevSize": 32, "prevSize": 32,
"code": 59663, "code": 59663,
"name": "reload" "name": "reload"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 18 "iconIdx": 17
}, },
{ {
"icon": { "icon": {
@ -549,16 +493,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 19, "id": 18,
"order": 68, "order": 874,
"ligatures": "mic", "ligatures": "mic",
"prevSize": 32, "prevSize": 32,
"code": 59664, "code": 59664,
"name": "microphone" "name": "microphone"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 19 "iconIdx": 18
}, },
{ {
"icon": { "icon": {
@ -575,16 +519,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 20, "id": 19,
"order": 69, "order": 875,
"ligatures": "mic_none", "ligatures": "mic_none",
"prevSize": 32, "prevSize": 32,
"code": 59665, "code": 59665,
"name": "mic-empty" "name": "mic-empty"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 20 "iconIdx": 19
}, },
{ {
"icon": { "icon": {
@ -601,16 +545,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 21, "id": 20,
"order": 70, "order": 876,
"ligatures": "mic_off", "ligatures": "mic_off",
"prevSize": 32, "prevSize": 32,
"code": 59666, "code": 59666,
"name": "mic-disabled" "name": "mic-disabled"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 21 "iconIdx": 20
}, },
{ {
"icon": { "icon": {
@ -627,16 +571,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 22, "id": 21,
"order": 105, "order": 877,
"ligatures": "pan_tool", "ligatures": "pan_tool",
"prevSize": 32, "prevSize": 32,
"code": 59678, "code": 59678,
"name": "raised-hand" "name": "raised-hand"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 22 "iconIdx": 21
}, },
{ {
"icon": { "icon": {
@ -653,16 +597,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 23, "id": 22,
"order": 100, "order": 878,
"ligatures": "people_outline", "ligatures": "people_outline",
"prevSize": 32, "prevSize": 32,
"code": 59675, "code": 59675,
"name": "contactList" "name": "contactList"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 23 "iconIdx": 22
}, },
{ {
"icon": { "icon": {
@ -679,16 +623,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 24, "id": 23,
"order": 87, "order": 879,
"ligatures": "person_add", "ligatures": "person_add",
"prevSize": 32, "prevSize": 32,
"code": 59667, "code": 59667,
"name": "link" "name": "link"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 24 "iconIdx": 23
}, },
{ {
"icon": { "icon": {
@ -705,16 +649,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 25, "id": 24,
"order": 82, "order": 880,
"ligatures": "play_circle_outline", "ligatures": "play_circle_outline",
"prevSize": 32, "prevSize": 32,
"code": 59668, "code": 59668,
"name": "shared-video" "name": "shared-video"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 25 "iconIdx": 24
}, },
{ {
"icon": { "icon": {
@ -731,16 +675,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 26, "id": 25,
"order": 81, "order": 881,
"ligatures": "settings", "ligatures": "settings",
"prevSize": 32, "prevSize": 32,
"code": 59669, "code": 59669,
"name": "settings" "name": "settings"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 26 "iconIdx": 25
}, },
{ {
"icon": { "icon": {
@ -757,16 +701,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 27, "id": 26,
"order": 76, "order": 882,
"ligatures": "star_border", "ligatures": "star_border",
"prevSize": 32, "prevSize": 32,
"code": 59670, "code": 59670,
"name": "star" "name": "star"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 27 "iconIdx": 26
}, },
{ {
"icon": { "icon": {
@ -783,16 +727,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 28, "id": 27,
"order": 108, "order": 883,
"ligatures": "switch_camera", "ligatures": "switch_camera",
"prevSize": 32, "prevSize": 32,
"code": 59681, "code": 59681,
"name": "switch-camera" "name": "switch-camera"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 28 "iconIdx": 27
}, },
{ {
"icon": { "icon": {
@ -809,16 +753,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 29, "id": 28,
"order": 93, "order": 884,
"ligatures": "tv", "ligatures": "tv",
"prevSize": 32, "prevSize": 32,
"code": 59671, "code": 59671,
"name": "share-desktop" "name": "share-desktop"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 29 "iconIdx": 28
}, },
{ {
"icon": { "icon": {
@ -835,16 +779,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 30, "id": 29,
"order": 77, "order": 885,
"ligatures": "videocam", "ligatures": "videocam",
"prevSize": 32, "prevSize": 32,
"code": 59672, "code": 59672,
"name": "camera" "name": "camera"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 30 "iconIdx": 29
}, },
{ {
"icon": { "icon": {
@ -861,16 +805,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 31, "id": 30,
"order": 78, "order": 886,
"ligatures": "videocam_off", "ligatures": "videocam_off",
"prevSize": 32, "prevSize": 32,
"code": 59673, "code": 59673,
"name": "camera-disabled" "name": "camera-disabled"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 31 "iconIdx": 30
}, },
{ {
"icon": { "icon": {
@ -887,16 +831,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"id": 32, "id": 31,
"order": 79, "order": 887,
"ligatures": "volume_up", "ligatures": "volume_up",
"prevSize": 32, "prevSize": 32,
"code": 59674, "code": 59674,
"name": "volume" "name": "volume"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 32 "iconIdx": 31
}, },
{ {
"icon": { "icon": {
@ -936,15 +880,15 @@
{} {}
], ],
"properties": { "properties": {
"order": 33, "order": 888,
"id": 33, "id": 32,
"name": "connection-lost", "name": "connection-lost",
"prevSize": 32, "prevSize": 32,
"code": 59648 "code": 59648
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 33 "iconIdx": 32
}, },
{ {
"icon": { "icon": {
@ -1008,16 +952,16 @@
} }
], ],
"properties": { "properties": {
"order": 37, "order": 889,
"id": 34, "id": 33,
"prevSize": 32, "prevSize": 32,
"code": 58906, "code": 58906,
"name": "connection", "name": "connection",
"ligatures": "" "ligatures": ""
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 34 "iconIdx": 33
}, },
{ {
"icon": { "icon": {
@ -1037,16 +981,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"order": 43, "order": 890,
"id": 35, "id": 34,
"prevSize": 32, "prevSize": 32,
"code": 58899, "code": 58899,
"name": "recDisable", "name": "recDisable",
"ligatures": "" "ligatures": ""
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 35 "iconIdx": 34
}, },
{ {
"icon": { "icon": {
@ -1067,16 +1011,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"order": 44, "order": 891,
"id": 36, "id": 35,
"prevSize": 32, "prevSize": 32,
"code": 58900, "code": 58900,
"name": "recEnable", "name": "recEnable",
"ligatures": "" "ligatures": ""
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 36 "iconIdx": 35
}, },
{ {
"icon": { "icon": {
@ -1097,16 +1041,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"order": 53, "order": 892,
"id": 37, "id": 36,
"prevSize": 32, "prevSize": 32,
"code": 58883, "code": 58883,
"name": "presentation", "name": "presentation",
"ligatures": "" "ligatures": ""
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 37 "iconIdx": 36
}, },
{ {
"icon": { "icon": {
@ -1123,16 +1067,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"order": 115, "order": 893,
"ligatures": "dialpad", "ligatures": "dialpad",
"id": 38, "id": 37,
"prevSize": 32, "prevSize": 32,
"code": 59685, "code": 59685,
"name": "dialpad" "name": "dialpad"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 38 "iconIdx": 37
}, },
{ {
"icon": { "icon": {
@ -1149,16 +1093,16 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"order": 114, "order": 894,
"ligatures": "remove_red_eye, visibility", "ligatures": "remove_red_eye, visibility",
"id": 39, "id": 38,
"prevSize": 32, "prevSize": 32,
"code": 59683, "code": 59683,
"name": "visibility" "name": "visibility"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 39 "iconIdx": 38
}, },
{ {
"icon": { "icon": {
@ -1175,16 +1119,99 @@
}, },
"attrs": [], "attrs": [],
"properties": { "properties": {
"order": 113, "order": 895,
"ligatures": "visibility_off", "ligatures": "visibility_off",
"id": 40, "id": 39,
"prevSize": 32, "prevSize": 32,
"code": 59684, "code": 59684,
"name": "visibility-off" "name": "visibility-off"
}, },
"setIdx": 0, "setIdx": 0,
"setId": 1, "setId": 5,
"iconIdx": 40 "iconIdx": 39
},
{
"icon": {
"paths": [
"M330.667 554.667c-0.427-14.933 6.4-29.44 17.92-39.253 32 6.827 61.867 20.053 88.747 39.253 0 29.013-23.893 52.907-53.333 52.907s-52.907-23.467-53.333-52.907zM586.667 554.667c26.88-18.773 56.747-32 88.747-38.827 11.52 9.813 18.347 24.32 17.92 38.827 0 29.867-23.893 53.76-53.333 53.76s-53.333-23.893-53.333-53.76v0zM512 384c-118.187-1.707-234.667 27.733-338.347 85.333l-2.987 42.667c0 52.48 12.373 104.107 35.84 151.040 101.12-15.36 203.093-23.040 305.493-23.040s204.373 7.68 305.493 23.040c23.467-46.933 35.84-98.56 35.84-151.040l-2.987-42.667c-103.68-57.6-220.16-87.040-338.347-85.333zM512 85.333c235.641 0 426.667 191.025 426.667 426.667s-191.025 426.667-426.667 426.667c-235.641 0-426.667-191.025-426.667-426.667s191.025-426.667 426.667-426.667z"
],
"attrs": [
{}
],
"isMulticolor": false,
"isMulticolor2": false,
"tags": [
"ninja"
],
"grid": 24
},
"attrs": [
{}
],
"properties": {
"order": 850,
"id": 0,
"name": "ninja",
"prevSize": 32,
"code": 59657
},
"setIdx": 1,
"setId": 4,
"iconIdx": 0
},
{
"icon": {
"paths": [
"M282 460c62 120 162 220 282 282l94-94c12-12 30-16 44-10 48 16 100 24 152 24 24 0 42 18 42 42v150c0 24-18 42-42 42-400 0-726-326-726-726 0-24 18-42 42-42h150c24 0 42 18 42 42 0 54 8 104 24 152 4 14 2 32-10 44z"
],
"attrs": [],
"isMulticolor": false,
"isMulticolor2": false,
"tags": [
"phone"
],
"defaultCode": 57549,
"grid": 24
},
"attrs": [],
"properties": {
"ligatures": "call, local_phone, phone",
"id": 1,
"order": 851,
"prevSize": 32,
"code": 57549,
"name": "phone"
},
"setIdx": 1,
"setId": 4,
"iconIdx": 1
},
{
"icon": {
"paths": [
"M810 554h-256v256h-84v-256h-256v-84h256v-256h84v256h256v84z"
],
"attrs": [],
"isMulticolor": false,
"isMulticolor2": false,
"tags": [
"add"
],
"defaultCode": 57669,
"grid": 24
},
"attrs": [],
"properties": {
"ligatures": "add",
"id": 12,
"order": 896,
"prevSize": 32,
"code": 57669,
"name": "add"
},
"setIdx": 3,
"setId": 0,
"iconIdx": 12
} }
], ],
"height": 1024, "height": 1024,

View File

@ -35,7 +35,7 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
//main toolbar //main toolbar
'microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'fodeviceselection', 'hangup', // jshint ignore:line 'microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'fodeviceselection', 'hangup', // jshint ignore:line
//extended toolbar //extended toolbar
'profile', 'contacts', 'chat', 'recording', 'etherpad', 'sharedvideo', 'dialout', 'settings', 'raisehand', 'filmstrip'], // jshint ignore:line 'profile', 'addtocall', 'contacts', 'chat', 'recording', 'etherpad', 'sharedvideo', 'dialout', 'settings', 'raisehand', 'filmstrip'], // jshint ignore:line
/** /**
* Main Toolbar Buttons * Main Toolbar Buttons
* All of them should be in TOOLBAR_BUTTONS * All of them should be in TOOLBAR_BUTTONS
@ -91,6 +91,7 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
* @type {boolean} * @type {boolean}
*/ */
MOBILE_APP_PROMO: true, MOBILE_APP_PROMO: true,
/** /**
* Maximum coeficient of the ratio of the large video to the visible area * Maximum coeficient of the ratio of the large video to the visible area
* after the large video is scaled to fit the window. * after the large video is scaled to fit the window.
@ -98,4 +99,10 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
* @type {number} * @type {number}
*/ */
MAXIMUM_ZOOMING_COEFFICIENT: 1.3 MAXIMUM_ZOOMING_COEFFICIENT: 1.3
/*
* If indicated some of the error dialogs may point to the support URL for
* help.
*/
// SUPPORT_URL: ""
}; };

View File

@ -96,6 +96,7 @@
"rejoinKeyTitle": "Rejoin" "rejoinKeyTitle": "Rejoin"
}, },
"toolbar": { "toolbar": {
"addPeople": "Add people to your call",
"audioonly": "Enable / Disable audio only mode (saves bandwidth)", "audioonly": "Enable / Disable audio only mode (saves bandwidth)",
"mute": "Mute / Unmute", "mute": "Mute / Unmute",
"videomute": "Start / Stop camera", "videomute": "Start / Stop camera",
@ -456,5 +457,17 @@
"statusMessage": "is now __status__", "statusMessage": "is now __status__",
"enterPhone": "Enter phone number", "enterPhone": "Enter phone number",
"phoneNotAllowed": "Oh, we don't support that destination yet! Sorry!" "phoneNotAllowed": "Oh, we don't support that destination yet! Sorry!"
},
"addPeople": {
"add": "Add",
"noResults": "No matching search results",
"searchPlaceholder": "Search for people and rooms to add",
"title": "Add people to your call"
},
"inlineDialogFailure": {
"msg": "We stumbled a bit.",
"retry": "Try again",
"support": "Support",
"supportMsg": "If this keeps happening, reach out to"
} }
} }

View File

@ -16,13 +16,17 @@
"readmeFilename": "README.md", "readmeFilename": "README.md",
"//": "Callstats.io does not work with recent versions of jsSHA (2.0.1 in particular)", "//": "Callstats.io does not work with recent versions of jsSHA (2.0.1 in particular)",
"dependencies": { "dependencies": {
"@atlaskit/button": "1.0.3", "@atlaskit/avatar": "4.0.5",
"@atlaskit/button-group": "1.0.0", "@atlaskit/button": "3.0.0",
"@atlaskit/button-group": "1.1.3",
"@atlaskit/dropdown-menu": "1.4.0", "@atlaskit/dropdown-menu": "1.4.0",
"@atlaskit/field-text": "2.7.0", "@atlaskit/field-text": "2.7.0",
"@atlaskit/icon": "6.0.0", "@atlaskit/icon": "7.0.0",
"@atlaskit/modal-dialog": "1.2.4", "@atlaskit/inline-dialog": "3.2.0",
"@atlaskit/tabs": "1.2.5", "@atlaskit/modal-dialog": "2.1.2",
"@atlaskit/multi-select": "6.2.0",
"@atlaskit/spinner": "2.2.3",
"@atlaskit/tabs": "2.0.0",
"@atlassian/aui": "6.0.6", "@atlassian/aui": "6.0.6",
"async": "0.9.0", "async": "0.9.0",
"autosize": "1.18.13", "autosize": "1.18.13",
@ -42,6 +46,7 @@
"jwt-decode": "2.2.0", "jwt-decode": "2.2.0",
"lib-jitsi-meet": "jitsi/lib-jitsi-meet", "lib-jitsi-meet": "jitsi/lib-jitsi-meet",
"lodash": "4.17.4", "lodash": "4.17.4",
"nuclear-js": "1.4.0",
"postis": "2.2.0", "postis": "2.2.0",
"react": "15.4.2", "react": "15.4.2",
"react-dom": "15.4.2", "react-dom": "15.4.2",

View File

@ -217,9 +217,9 @@ class StatelessDialog extends Component {
return ( return (
<header> <header>
<h2> <h3>
{ this.props.titleString || t(this.props.titleKey) } { this.props.titleString || t(this.props.titleKey) }
</h2> </h3>
</header> </header>
); );
} }
@ -275,6 +275,9 @@ class StatelessDialog extends Component {
} }
if (event.key === 'Enter') { if (event.key === 'Enter') {
event.preventDefault();
event.stopPropagation();
if (this.props.submitDisabled && !this.props.cancelDisabled) { if (this.props.submitDisabled && !this.props.cancelDisabled) {
this._onCancel(); this._onCancel();
} else if (!this.props.okDisabled) { } else if (!this.props.okDisabled) {

View File

@ -0,0 +1,72 @@
import AKButton from '@atlaskit/button';
import React, { Component } from 'react';
import { translate } from '../../../i18n';
declare var interfaceConfig: Object;
/**
* Inline dialog that represents a failure and allows a retry.
*/
class InlineDialogFailure extends Component {
/**
* {@code InlineDialogFailure}'s property types.
*
* @static
*/
static propTypes = {
/**
* Allows to retry the call that previously didn't succeed.
*/
onRetry: React.PropTypes.func,
/**
* Invoked to obtain translated strings.
*/
t: React.PropTypes.func
};
/**
* Renders the content of this component.
*
* @returns {ReactElement}
*/
render() {
const { t } = this.props;
const supportLink = interfaceConfig.SUPPORT_URL;
const supportLinkElem
= supportLink
? ( // eslint-disable-line no-extra-parens
<div className = 'inline-dialog-error-text'>
<span>{ t('inlineDialogFailure.supportMsg') }</span>
<span>
<a
href = { supportLink }
rel = 'noopener noreferrer'
target = '_blank'>
{ t('inlineDialogFailure.support') }
</a>
</span>
<span>.</span>
</div>
)
: null;
return (
<div className = 'inline-dialog-error'>
<div className = 'inline-dialog-error-text'>
{ t('inlineDialogFailure.msg') }
</div>
{ supportLinkElem }
<AKButton
className = 'inline-dialog-error-button'
onClick = { this.props.onRetry } >
{ t('inlineDialogFailure.retry') }
</AKButton>
</div>
);
}
}
export default translate(InlineDialogFailure);

View File

@ -0,0 +1,319 @@
import { MultiSelectStateless } from '@atlaskit/multi-select';
import AKInlineDialog from '@atlaskit/inline-dialog';
import Spinner from '@atlaskit/spinner';
import _debounce from 'lodash/debounce';
import React, { Component } from 'react';
import InlineDialogFailure from './InlineDialogFailure';
/**
* A MultiSelect that is also auto-completing.
*/
class MultiSelectAutocomplete extends Component {
/**
* {@code MultiSelectAutocomplete} component's property types.
*
* @static
*/
static propTypes = {
/**
* The default value of the selected item.
*/
defaultValue: React.PropTypes.array,
/**
* Indicates if the component is disabled.
*/
isDisabled: React.PropTypes.bool,
/**
* The text to show when no matches are found.
*/
noMatchesFound: React.PropTypes.string,
/**
* The function called when the selection changes.
*/
onSelectionChange: React.PropTypes.func,
/**
* The placeholder text of the input component.
*/
placeholder: React.PropTypes.string,
/**
* The service providing the search.
*/
resourceClient: React.PropTypes.shape({
makeQuery: React.PropTypes.func,
parseResults: React.PropTypes.func
}).isRequired,
/**
* Indicates if the component should fit the container.
*/
shouldFitContainer: React.PropTypes.bool,
/**
* Indicates if we should focus.
*/
shouldFocus: React.PropTypes.bool
};
/**
* Initializes a new {@code MultiSelectAutocomplete} instance.
*
* @param {Object} props - The read-only properties with which the new
* instance is to be initialized.
*/
constructor(props) {
super(props);
const defaultValue = this.props.defaultValue || [];
this.state = {
/**
* Indicates if the dropdown is open.
*/
isOpen: false,
/**
* The text that filters the query result of the search.
*/
filterValue: '',
/**
* Indicates if the component is currently loading results.
*/
loading: false,
/**
* Indicates if there was an error.
*/
error: false,
/**
* The list of result items.
*/
items: [],
/**
* The list of selected items.
*/
selectedItems: [ ...defaultValue ]
};
this._onFilterChange = this._onFilterChange.bind(this);
this._onRetry = this._onRetry.bind(this);
this._onSelectionChange = this._onSelectionChange.bind(this);
this._sendQuery = _debounce(this._sendQuery.bind(this), 200);
}
/**
* Clears the selected items.
*
* @returns {void}
*/
clear() {
this.setState({
selectedItems: []
});
}
/**
* Renders the content of this component.
*
* @returns {ReactElement}
*/
render() {
const shouldFitContainer = this.props.shouldFitContainer || false;
const shouldFocus = this.props.shouldFocus || false;
const isDisabled = this.props.isDisabled || false;
const placeholder = this.props.placeholder || '';
const noMatchesFound = this.props.noMatchesFound || '';
return (
<div>
<MultiSelectStateless
filterValue = { this.state.filterValue }
isDisabled = { isDisabled }
isOpen = { this.state.isOpen }
items = { this.state.items }
noMatchesFound = { noMatchesFound }
onFilterChange = { this._onFilterChange }
onRemoved = { this._onSelectionChange }
onSelected = { this._onSelectionChange }
placeholder = { placeholder }
selectedItems = { this.state.selectedItems }
shouldFitContainer = { shouldFitContainer }
shouldFocus = { shouldFocus } />
{ this._renderLoadingIndicator() }
{ this._renderError() }
</div>
);
}
/**
* Sets the state and sends a query on filter change.
*
* @param {string} filterValue - The filter text value.
* @private
* @returns {void}
*/
_onFilterChange(filterValue) {
this.setState({
// Clean the error if the filterValue is empty.
error: this.state.error && Boolean(filterValue),
filterValue,
isOpen: Boolean(this.state.items.length) && Boolean(filterValue),
items: filterValue ? this.state.items : []
});
if (filterValue) {
this._sendQuery(filterValue);
}
}
/**
* Retries the query on retry.
*
* @private
* @returns {void}
*/
_onRetry() {
this._sendQuery(this.state.filterValue);
}
/**
* Updates the selected items when a selection event occurs.
*
* @param {Object} item - The selected item.
* @private
* @returns {void}
*/
_onSelectionChange(item) {
const existing
= this.state.selectedItems.find(k => k.value === item.value);
let selectedItems = this.state.selectedItems;
if (existing) {
selectedItems = selectedItems.filter(k => k !== existing);
} else {
selectedItems.push(item);
}
this.setState({
isOpen: false,
selectedItems
});
if (this.props.onSelectionChange) {
this.props.onSelectionChange(selectedItems);
}
}
/**
* Renders the error UI.
*
* @returns {ReactElement|null}
*/
_renderError() {
if (!this.state.error) {
return null;
}
const content = ( // eslint-disable-line no-extra-parens
<div className = 'autocomplete-error'>
<InlineDialogFailure
onRetry = { this._onRetry } />
</div>
);
return (
<AKInlineDialog
content = { content }
isOpen = { true } />
);
}
/**
* Renders the loading indicator.
*
* @returns {ReactElement|null}
*/
_renderLoadingIndicator() {
if (!(this.state.loading
&& !this.state.items.length
&& this.state.filterValue.length)) {
return null;
}
const content = ( // eslint-disable-line no-extra-parens
<div className = 'autocomplete-loading'>
<Spinner
isCompleting = { false }
size = 'medium' />
</div>
);
return (
<AKInlineDialog
content = { content }
isOpen = { true } />
);
}
/**
* Sends a query to the resourceClient.
*
* @param {string} filterValue - The string to use for the search.
* @returns {void}
*/
_sendQuery(filterValue) {
if (!filterValue) {
return;
}
this.setState({
loading: true,
error: false
});
const resourceClient = this.props.resourceClient || {
makeQuery: () => Promise.resolve([]),
parseResults: results => results
};
resourceClient.makeQuery(filterValue)
.then(results => {
if (this.state.filterValue !== filterValue) {
this.setState({
loading: false,
error: false
});
return;
}
const itemGroups = [
{
items: resourceClient.parseResults(results)
}
];
this.setState({
items: itemGroups,
isOpen: true,
loading: false,
error: false
});
})
.catch(() => {
this.setState({
error: true,
loading: false,
isOpen: false
});
});
}
}
export default MultiSelectAutocomplete;

View File

@ -1,3 +1,4 @@
export { default as Container } from './Container'; export { default as Container } from './Container';
export { default as Text } from './Text'; export { default as Text } from './Text';
export { default as Watermarks } from './Watermarks'; export { default as Watermarks } from './Watermarks';
export { default as MultiSelectAutocomplete } from './MultiSelectAutocomplete';

View File

@ -4,8 +4,6 @@ import React, { Component } from 'react';
import { translate } from '../../base/i18n'; import { translate } from '../../base/i18n';
const EXPAND_ICON = <ExpandIcon label = 'expand' />;
/** /**
* React component for selecting a device from a select element. Wraps * React component for selecting a device from a select element. Wraps
* AKDropdownMenu with device selection specific logic. * AKDropdownMenu with device selection specific logic.
@ -117,7 +115,9 @@ class DeviceSelector extends Component {
<span className = 'device-selector-trigger-text'> <span className = 'device-selector-trigger-text'>
{ triggerText } { triggerText }
</span> </span>
{ EXPAND_ICON } <ExpandIcon
label = 'expand'
size = 'large' />
</div> </div>
); );
} }

View File

@ -109,7 +109,7 @@ class DialOutDialog extends Component {
/** /**
* Renders the dialog content. * Renders the dialog content.
* *
* @returns {XML} * @returns {ReactElement}
* @private * @private
*/ */
_renderContent() { _renderContent() {
@ -127,7 +127,7 @@ class DialOutDialog extends Component {
* Renders the error message to display if the dial phone number is not * Renders the error message to display if the dial phone number is not
* allowed. * allowed.
* *
* @returns {XML} * @returns {ReactElement}
* @private * @private
*/ */
_renderErrorMessage() { _renderErrorMessage() {

View File

@ -4,7 +4,7 @@ import {
UPDATE_DIAL_IN_NUMBERS_FAILED, UPDATE_DIAL_IN_NUMBERS_FAILED,
UPDATE_DIAL_IN_NUMBERS_SUCCESS UPDATE_DIAL_IN_NUMBERS_SUCCESS
} from './actionTypes'; } from './actionTypes';
import { InviteDialog } from './components'; import { AddPeopleDialog, InviteDialog } from './components';
declare var $: Function; declare var $: Function;
declare var APP: Object; declare var APP: Object;
@ -18,6 +18,15 @@ export function openInviteDialog() {
return openDialog(InviteDialog); return openDialog(InviteDialog);
} }
/**
* Opens the Add People Dialog.
*
* @returns {Function}
*/
export function openAddPeopleDialog() {
return openDialog(AddPeopleDialog);
}
/** /**
* Sends AJAX requests for dial-in numbers and conference ID. * Sends AJAX requests for dial-in numbers and conference ID.
* *

View File

@ -0,0 +1,3 @@
/**
* Created by ystamcheva on 8/6/17.
*/

View File

@ -0,0 +1,259 @@
import React, { Component } from 'react';
import { Immutable } from 'nuclear-js';
import { connect } from 'react-redux';
import Avatar from '@atlaskit/avatar';
import { getInviteURL } from '../../base/connection';
import { Dialog } from '../../base/dialog';
import { translate } from '../../base/i18n';
import MultiSelectAutocomplete
from '../../base/react/components/web/MultiSelectAutocomplete';
import { invitePeople, searchPeople } from '../functions';
/**
* The dialog that allows to invite people to the call.
*/
class AddPeopleDialog extends Component {
/**
* {@code AddPeopleDialog}'s property types.
*
* @static
*/
static propTypes = {
/**
* The URL pointing to the service allowing for people invite.
*/
_inviteServiceUrl: React.PropTypes.string,
/**
* The url of the conference to invite people to.
*/
_inviteUrl: React.PropTypes.string,
/**
* The JWT token.
*/
_jwt: React.PropTypes.string,
/**
* The URL pointing to the service allowing for people search.
*/
_peopleSearchUrl: React.PropTypes.string,
/**
* Invoked to obtain translated strings.
*/
t: React.PropTypes.func
};
/**
* Initializes a new {@code AddPeopleDialog} instance.
*
* @param {Object} props - The read-only properties with which the new
* instance is to be initialized.
*/
constructor(props) {
super(props);
this.state = {
/**
* Indicating that an error occurred when adding people to the call.
*/
addToCallError: false,
/**
* Indicating that we're currently adding the new people to the
* call.
*/
addToCallInProgress: false,
/**
* The list of invite items.
*/
inviteItems: new Immutable.List()
};
this._multiselect = null;
this._resourceClient = {
makeQuery: text => searchPeople(
this.props._peopleSearchUrl, this.props._jwt, text),
parseResults: response => response.map(user => {
const avatar = ( // eslint-disable-line no-extra-parens
<Avatar
size = 'medium'
src = { user.avatar } />
);
return {
content: user.name,
value: user.id,
elemBefore: avatar,
item: user
};
})
};
this._isAddDisabled = this._isAddDisabled.bind(this);
this._onSelectionChange = this._onSelectionChange.bind(this);
this._onSubmit = this._onSubmit.bind(this);
this._setMultiSelectElement = this._setMultiSelectElement.bind(this);
}
/**
* React Component method that executes once component is updated.
*
* @param {Object} prevState - The state object before the update.
* @returns {void}
*/
componentDidUpdate(prevState) {
/**
* Clears selected items from the multi select component on successful
* invite.
*/
if (prevState.addToCallError
&& !this.state.addToCallInProgress
&& !this.state.addToCallError
&& this._multiselect) {
this._multiselect.clear();
}
}
/**
* Renders the content of this component.
*
* @returns {ReactElement}
*/
render() {
return (
<Dialog
okDisabled = { this._isAddDisabled() }
okTitleKey = 'addPeople.add'
onSubmit = { this._onSubmit }
titleKey = 'addPeople.title'
width = 'small'>
{ this._getUserInputForm() }
</Dialog>
);
}
/**
* Renders the input form.
*
* @returns {ReactElement}
* @private
*/
_getUserInputForm() {
const { t } = this.props;
return (
<div className = 'add-people-form-wrap'>
<MultiSelectAutocomplete
isDisabled
= { this.state.addToCallInProgress || false }
noMatchesFound = { t('addPeople.noResults') }
onSelectionChange = { this._onSelectionChange }
placeholder = { t('addPeople.searchPlaceholder') }
ref = { this._setMultiSelectElement }
resourceClient = { this._resourceClient }
shouldFitContainer = { true }
shouldFocus = { true } />
</div>
);
}
/**
* Indicates if the Add button should be disabled.
*
* @returns {boolean} - True to indicate that the Add button should
* be disabled, false otherwise.
* @private
*/
_isAddDisabled() {
return !this.state.inviteItems.length
|| this.state.addToCallInProgress;
}
/**
* Handles a selection change.
*
* @param {Map} selectedItems - The list of selected items.
* @private
* @returns {void}
*/
_onSelectionChange(selectedItems) {
const selectedIds = selectedItems.map(o => o.item);
this.setState({
inviteItems: selectedIds
});
}
/**
* Handles the submit button action.
*
* @private
* @returns {void}
*/
_onSubmit() {
if (!this._isAddDisabled()) {
this.setState({
addToCallInProgress: true
});
invitePeople(
this.props._inviteServiceUrl,
this.props._inviteUrl,
this.props._jwt,
this.state.inviteItems)
.then(() => {
this.setState({
addToCallInProgress: false
});
})
.catch(() => {
this.setState({
addToCallInProgress: false,
addToCallError: true
});
});
}
}
/**
* Sets the instance variable for the multi select component
* element so it can be accessed directly.
*
* @param {Object} element - The DOM element for the component's dialog.
* @private
* @returns {void}
*/
_setMultiSelectElement(element) {
this._multiselect = element;
}
}
/**
* Maps (parts of) the Redux state to the associated
* {@code AddPeopleDialog}'s props.
*
* @param {Object} state - The Redux state.
* @private
* @returns {{
* _peopleSearchUrl: React.PropTypes.string,
* _jwt: React.PropTypes.string
* }}
*/
function _mapStateToProps(state) {
const { peopleSearchUrl, inviteServiceUrl } = state['features/base/config'];
return {
_jwt: state['features/jwt'].jwt,
_inviteUrl: getInviteURL(state),
_inviteServiceUrl: inviteServiceUrl,
_peopleSearchUrl: peopleSearchUrl
};
}
export default translate(
connect(_mapStateToProps)(AddPeopleDialog));

View File

@ -1 +1,2 @@
export { default as InviteDialog } from './InviteDialog'; export { default as InviteDialog } from './InviteDialog';
export { default as AddPeopleDialog } from './AddPeopleDialog';

View File

@ -0,0 +1,46 @@
declare var $: Function;
/**
* Sends an ajax request to a directory service.
*
* @param {string} serviceUrl - The service to query.
* @param {string} jwt - The jwt token to pass to the search service.
* @param {string} text - Text to search.
* @returns {Promise} - The promise created by the request.
*/
export function searchPeople(serviceUrl, jwt, text) {
const queryTypes = '["conferenceRooms","user","room"]';
return new Promise((resolve, reject) => {
$.getJSON(`${serviceUrl}?query=${encodeURIComponent(text)}
&queryTypes=${queryTypes}&jwt=${jwt}`,
response => resolve(response)
).fail((jqxhr, textStatus, error) =>
reject(error)
);
});
}
/**
* Sends a post request to an invite service.
*
* @param {string} inviteServiceUrl - The invite service that generates the
* invitation.
* @param {string} inviteUrl - The url to the conference.
* @param {string} jwt - The jwt token to pass to the search service.
* @param {Immutable.List} inviteItems - The list of items to invite.
* @returns {Promise} - The promise created by the request.
*/
export function invitePeople(inviteServiceUrl, inviteUrl, jwt, inviteItems) { // eslint-disable-line max-params, max-len
return new Promise((resolve, reject) => {
$.post(`${inviteServiceUrl}?token=${jwt}`,
JSON.stringify({
'invited': inviteItems,
'url': inviteUrl }),
response => resolve(response),
'json')
.fail((jqxhr, textStatus, error) =>
reject(error)
);
});
}

View File

@ -180,6 +180,7 @@ function _setJWT(store, next, action) {
if (jwtPayload) { if (jwtPayload) {
const { context, iss } = jwtPayload; const { context, iss } = jwtPayload;
action.jwt = jwt;
action.issuer = iss; action.issuer = iss;
if (context) { if (context) {
action.callee = context.callee; action.callee = context.callee;

View File

@ -4,7 +4,7 @@ import React from 'react';
import { openDeviceSelectionDialog } from '../device-selection'; import { openDeviceSelectionDialog } from '../device-selection';
import { openDialOutDialog } from '../dial-out'; import { openDialOutDialog } from '../dial-out';
import { openInviteDialog } from '../invite'; import { openAddPeopleDialog, openInviteDialog } from '../invite';
import UIEvents from '../../../service/UI/UIEvents'; import UIEvents from '../../../service/UI/UIEvents';
declare var APP: Object; declare var APP: Object;
@ -15,6 +15,19 @@ declare var JitsiMeetJS: Object;
* All toolbar buttons' descriptors. * All toolbar buttons' descriptors.
*/ */
const buttons: Object = { const buttons: Object = {
addtocall: {
classNames: [ 'button', 'icon-add' ],
enabled: true,
id: 'toolbar_button_add',
isDisplayed: () => !APP.store.getState()['features/jwt'].isGuest,
onClick() {
JitsiMeetJS.analytics.sendEvent('toolbar.add.clicked');
return openAddPeopleDialog();
},
tooltipKey: 'toolbar.addPeople'
},
/** /**
* The descriptor of the camera toolbar button. * The descriptor of the camera toolbar button.
*/ */