From 5d03bdf9ba72cfab23b4d224bd22443b2f19e1f3 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Tue, 7 Nov 2017 18:01:54 -0200 Subject: [PATCH 1/4] modal --- .../client/imports/components/modal.css | 82 +++++++++++++++++++ .../client/imports/components/popover.css | 2 +- .../client/imports/forms/button.css | 19 +++++ packages/rocketchat-theme/client/main.css | 1 + .../rocketchat-ui/client/views/app/modal.html | 29 +++++++ .../rocketchat-ui/client/views/app/modal.js | 43 ++++++++++ packages/rocketchat-ui/package.js | 4 +- 7 files changed, 177 insertions(+), 3 deletions(-) create mode 100644 packages/rocketchat-theme/client/imports/components/modal.css create mode 100644 packages/rocketchat-ui/client/views/app/modal.html create mode 100644 packages/rocketchat-ui/client/views/app/modal.js diff --git a/packages/rocketchat-theme/client/imports/components/modal.css b/packages/rocketchat-theme/client/imports/components/modal.css new file mode 100644 index 000000000000..f15ed02813ee --- /dev/null +++ b/packages/rocketchat-theme/client/imports/components/modal.css @@ -0,0 +1,82 @@ + +.rc-modal { + min-width: 300px; + background: white; + + boder-radius: 15px; + animation: dropdown-show 0.3s cubic-bezier(0.45, 0.05, 0.55, 0.95); + + box-shadow: 0 0 2px 0 rgba(47, 52, 61, 0.08), 0 0 12px 0 rgba(47, 52, 61, 0.12); + + &-wrapper { + z-index: 10; + display: flex; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(47, 52, 61, 0.8); + align-items: center; + justify-content: center; + } + + &__title { + text-align: left; + flex: 1 1 auto; + font-size: 16px; + } + + &__close { + cursor: pointer; + transform: rotate(45deg); + font-size: 20px; + &:hover { + color: var(--color-link-active); + } + } + + &__header { + display: flex; + flex-direction: row; + padding: 16px; + + font-size: 21px; + justify-content: flex-end; + } + &__content { + padding: 16px; + display: flex; + + flex-direction: column; + + animation: dropdown-show 0.1s cubic-bezier(0.45, 0.05, 0.55, 0.95); + + white-space: nowrap; + + background-color: var(--modal-background); + } + &__footer { + padding: 16px; + background: #F7F8FA; + & > .rc-button { + margin: 0; + } + & .rc-button--primary { + float: right; + } + } +} +@media (width <= 400px) { + .rc-modal { + top: initial !important; + bottom: 0; + left: 0 !important; + min-width: 100%; + max-width: 100%; + width: 100%; + margin: 0 16px; + + animation: dropup-show 0.3s cubic-bezier(0.45, 0.05, 0.55, 0.95); + } +} diff --git a/packages/rocketchat-theme/client/imports/components/popover.css b/packages/rocketchat-theme/client/imports/components/popover.css index 7fce75d15093..8238f3adda0d 100644 --- a/packages/rocketchat-theme/client/imports/components/popover.css +++ b/packages/rocketchat-theme/client/imports/components/popover.css @@ -130,7 +130,7 @@ @keyframes dropdown-show { 0% { - transform: translate(0, -2%); + transform: translate(0, -5%); opacity: 0; } diff --git a/packages/rocketchat-theme/client/imports/forms/button.css b/packages/rocketchat-theme/client/imports/forms/button.css index 57b856fd3e57..712a063e5d4b 100644 --- a/packages/rocketchat-theme/client/imports/forms/button.css +++ b/packages/rocketchat-theme/client/imports/forms/button.css @@ -1,8 +1,10 @@ .rc-button { + margin: 0.5rem 0; padding: var(--button-padding); cursor: pointer; transition: background-color 0.3s; + text-align: center; border-width: var(--button-border-width); border-style: solid; @@ -19,12 +21,29 @@ background-color: var(--button-disabled-background); } + &--nude { + border: none; + background: inherit; + } + &--primary { color: var(--button-primary-text-color); border: 0; background-color: var(--button-primary-background); } + &--secondary { + color: var(--button-secondary-text-color); + border: 0; + background-color: var(--button-secondary-background); + } + + &--cancel { + color: var(--button-primary-text-color); + border: 0; + background-color: var(--button-cancel-color); + } + &--small { padding: var(--button-padding-small); } diff --git a/packages/rocketchat-theme/client/main.css b/packages/rocketchat-theme/client/main.css index dc41e7515e1d..3c9f5af48013 100644 --- a/packages/rocketchat-theme/client/main.css +++ b/packages/rocketchat-theme/client/main.css @@ -29,6 +29,7 @@ @import 'imports/components/avatar.css'; @import 'imports/components/badge.css'; @import 'imports/components/popover.css'; +@import 'imports/components/modal.css'; @import 'imports/components/tooltip.css'; @import 'imports/components/slider.css'; @import 'imports/components/chip.css'; diff --git a/packages/rocketchat-ui/client/views/app/modal.html b/packages/rocketchat-ui/client/views/app/modal.html new file mode 100644 index 000000000000..9a5f4ca9976b --- /dev/null +++ b/packages/rocketchat-ui/client/views/app/modal.html @@ -0,0 +1,29 @@ + diff --git a/packages/rocketchat-ui/client/views/app/modal.js b/packages/rocketchat-ui/client/views/app/modal.js new file mode 100644 index 000000000000..296a94a85dbc --- /dev/null +++ b/packages/rocketchat-ui/client/views/app/modal.js @@ -0,0 +1,43 @@ +/* globals modal */ + +this.modal = { + renderedModal: null, + open(config) { + this.close(); + this.renderedModal = Blaze.renderWithData(Template.rc_modal, config, document.body); + }, + close() { + if (this.renderedModal) { + Blaze.remove(this.renderedModal); + } + + } +}; + +Template.rc_modal.helpers({ + hasAction() { + return !!this.action; + } +}); + +Template.rc_modal.onRendered(function() { + if (this.data.onRendered) { + this.data.onRendered(); + } + + $('.rc-modal-wrapper').click(function(e) { + if (e.currentTarget === e.target) { + modal.close(); + } + }); +}); + +Template.rc_modal.events({ + 'click .js-action'(e, instance) { + !this.action || this.action.call(instance.data.data, e, instance); + modal.close(); + }, + 'click .js-close'() { + modal.close(); + } +}); diff --git a/packages/rocketchat-ui/package.js b/packages/rocketchat-ui/package.js index 30638a861d4c..f23eb29a3608 100644 --- a/packages/rocketchat-ui/package.js +++ b/packages/rocketchat-ui/package.js @@ -98,6 +98,7 @@ Package.onUse(function(api) { api.addFiles('client/views/app/videoCall/videoButtons.html', 'client'); api.addFiles('client/views/app/videoCall/videoCall.html', 'client'); api.addFiles('client/views/app/popover.html', 'client'); + api.addFiles('client/views/app/modal.html', 'client'); api.addFiles('client/views/app/photoswipe.html', 'client'); api.addFiles('client/views/cmsPage.js', 'client'); @@ -115,6 +116,7 @@ Package.onUse(function(api) { api.addFiles('client/views/app/videoCall/videoButtons.js', 'client'); api.addFiles('client/views/app/videoCall/videoCall.js', 'client'); api.addFiles('client/views/app/popover.js', 'client'); + api.addFiles('client/views/app/modal.js', 'client'); api.addFiles('client/views/app/photoswipe.js', 'client'); api.addFiles('client/components/icon.html', 'client'); @@ -125,7 +127,5 @@ Package.onUse(function(api) { api.addFiles('client/components/selectDropdown.html', 'client'); api.addFiles('client/components/selectDropdown.js', 'client'); - - api.export('fileUpload'); }); From 86101256cfd15079233db6092974ec9bb9cef50c Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Tue, 14 Nov 2017 17:43:43 -0200 Subject: [PATCH 2/4] share files to new modal --- .../.npm/package/npm-shrinkwrap.json | 6 +-- .../rocketchat-livechat/app/package-lock.json | 22 ++++----- .../client/imports/components/modal.css | 8 ++-- .../startup/messageBoxActions.js | 5 +- .../rocketchat-ui/client/lib/fileUpload.js | 48 ++++++++++++------- .../rocketchat-ui/client/views/app/modal.html | 13 ++++- .../rocketchat-ui/client/views/app/modal.js | 23 ++++++++- 7 files changed, 86 insertions(+), 39 deletions(-) diff --git a/packages/rocketchat-google-vision/.npm/package/npm-shrinkwrap.json b/packages/rocketchat-google-vision/.npm/package/npm-shrinkwrap.json index 27b919ce0bb8..2b45ef4db29d 100644 --- a/packages/rocketchat-google-vision/.npm/package/npm-shrinkwrap.json +++ b/packages/rocketchat-google-vision/.npm/package/npm-shrinkwrap.json @@ -47,9 +47,9 @@ "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=" }, "async": { - "version": "2.5.0", - "resolved": "https://registry.npmjs.org/async/-/async-2.5.0.tgz", - "integrity": "sha512-e+lJAJeNWuPCNyxZKOBdaJGyLGHugXVQtrAwtuAe2vhxTYxFTKE73p8JuTmdH0qdQZtDvI4dhJwjZc5zsfIsYw==" + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.0.tgz", + "integrity": "sha512-xAfGg1/NTLBBKlHFmnd7PlmUW9KhVQIUuSrYem9xzFUZy13ScvtyGGejaae9iAVRiRq9+Cx7DPFaAAhCpyxyPw==" }, "asynckit": { "version": "0.4.0", diff --git a/packages/rocketchat-livechat/app/package-lock.json b/packages/rocketchat-livechat/app/package-lock.json index aeb329e7a281..a7c086508bf6 100644 --- a/packages/rocketchat-livechat/app/package-lock.json +++ b/packages/rocketchat-livechat/app/package-lock.json @@ -86,7 +86,7 @@ "bcrypt": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/bcrypt/-/bcrypt-1.0.3.tgz", - "integrity": "sha512-pRyDdo73C8Nim3jwFJ7DWe3TZCgwDfWZ6nHS5LSdU77kWbj1frruvdndP02AOavtD4y8v6Fp2dolbHgp4SDrfg==", + "integrity": "sha1-sC3cbAtS6ha40883XVoy54DatUg=", "requires": { "nan": "2.6.2", "node-pre-gyp": "0.6.36" @@ -314,7 +314,7 @@ "glob": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz", - "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==", + "integrity": "sha1-wZyd+aAocC1nhhI4SmVSQExjbRU=", "requires": { "fs.realpath": "1.0.0", "inflight": "1.0.6", @@ -469,7 +469,7 @@ "minimatch": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", - "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==", + "integrity": "sha1-UWbihkV/AzBgZL5Ul+jbsMPTIIM=", "requires": { "brace-expansion": "1.1.8" } @@ -530,7 +530,7 @@ "npmlog": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz", - "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==", + "integrity": "sha1-CKfyqL9zRgR3mp76StXMcXq7lUs=", "requires": { "are-we-there-yet": "1.1.4", "console-control-strings": "1.1.0", @@ -626,7 +626,7 @@ "readable-stream": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz", - "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==", + "integrity": "sha1-No8lEtefnUb9/HE0mueHi7weuVw=", "requires": { "core-util-is": "1.0.2", "inherits": "2.0.3", @@ -640,7 +640,7 @@ "regenerator-runtime": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.0.tgz", - "integrity": "sha512-/aA0kLeRb5N9K0d4fw7ooEbI+xDe+DKD499EQqygGqeS8N3xto15p09uY2xj7ixP81sNPXvRLnAQIqdVStgb1A==" + "integrity": "sha1-flT+W1zNXWYk6mJVw0c74JC4AuE=" }, "request": { "version": "2.83.0", @@ -682,12 +682,12 @@ "safe-buffer": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", - "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==" + "integrity": "sha1-iTMSr2myEj3vcfV4iQAWce6yyFM=" }, "semver": { "version": "5.4.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.4.1.tgz", - "integrity": "sha512-WfG/X9+oATh81XtllIo/I8gOiY9EXRdv1cQdyykeXK17YcUW3EXUAi2To4pcH6nZtJPr7ZOpM5OMyWJZm+8Rsg==" + "integrity": "sha1-4FnAnYVx8FQII3M0M1BdOi8AsY4=" }, "set-blocking": { "version": "2.0.0", @@ -740,7 +740,7 @@ "string_decoder": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", - "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", + "integrity": "sha1-D8Z9fBQYJd6UKC3VNr7GubzoYKs=", "requires": { "safe-buffer": "5.1.1" } @@ -842,7 +842,7 @@ "uuid": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.1.0.tgz", - "integrity": "sha512-DIWtzUkw04M4k3bf1IcpS2tngXEL26YUD2M0tMDUpnUrz2hgzUBlD55a4FjdLGPvfHxS6uluGWvaVEqgBcVa+g==" + "integrity": "sha1-PdPT55Crwk17DToDT/q6vijrvAQ=" }, "verror": { "version": "1.10.0", @@ -857,7 +857,7 @@ "wide-align": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz", - "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==", + "integrity": "sha1-Vx4PGwYEY268DfwhsDObvjE0FxA=", "requires": { "string-width": "1.0.2" } diff --git a/packages/rocketchat-theme/client/imports/components/modal.css b/packages/rocketchat-theme/client/imports/components/modal.css index f15ed02813ee..268439660323 100644 --- a/packages/rocketchat-theme/client/imports/components/modal.css +++ b/packages/rocketchat-theme/client/imports/components/modal.css @@ -1,6 +1,6 @@ .rc-modal { - min-width: 300px; + min-width: 400px; background: white; boder-radius: 15px; @@ -9,6 +9,7 @@ box-shadow: 0 0 2px 0 rgba(47, 52, 61, 0.08), 0 0 12px 0 rgba(47, 52, 61, 0.12); &-wrapper { + padding: 10px; z-index: 10; display: flex; position: fixed; @@ -59,12 +60,11 @@ &__footer { padding: 16px; background: #F7F8FA; + display: flex; + justify-content: space-between; & > .rc-button { margin: 0; } - & .rc-button--primary { - float: right; - } } } @media (width <= 400px) { diff --git a/packages/rocketchat-ui-message/startup/messageBoxActions.js b/packages/rocketchat-ui-message/startup/messageBoxActions.js index d10e17f5d320..ceed3fbc0f9b 100644 --- a/packages/rocketchat-ui-message/startup/messageBoxActions.js +++ b/packages/rocketchat-ui-message/startup/messageBoxActions.js @@ -90,8 +90,9 @@ RocketChat.messageBox.actions.add('Share', 'My_location', { const position = RocketChat.Geolocation.get(); const latitude = position.coords.latitude; const longitude = position.coords.longitude; - const text = `
`; - swal({ + const text = ``; + + modal.open({ title: t('Share_Location_Title'), text, showCancelButton: true, diff --git a/packages/rocketchat-ui/client/lib/fileUpload.js b/packages/rocketchat-ui/client/lib/fileUpload.js index 795a651e5866..95fef641c7d0 100644 --- a/packages/rocketchat-ui/client/lib/fileUpload.js +++ b/packages/rocketchat-ui/client/lib/fileUpload.js @@ -54,12 +54,12 @@ fileUpload = function(filesToUpload) { function consume() { const file = files.pop(); if ((file == null)) { - swal.close(); + modal.close(); return; } if (!RocketChat.fileUploadIsValidContentType(file.file.type)) { - swal({ + modal.open({ title: t('FileUpload_MediaType_NotAccepted'), text: file.file.type || `*.${ s.strRightBack(file.file.name, '.') }`, type: 'error', @@ -69,7 +69,7 @@ fileUpload = function(filesToUpload) { } if (file.file.size === 0) { - swal({ + modal.open({ title: t('FileUpload_File_Empty'), type: 'error', timer: 1000 @@ -89,8 +89,12 @@ fileUpload = function(filesToUpload) {
- - +
+ +
+
+ +
`; } else if (file.type === 'video') { text = `\ @@ -101,8 +105,12 @@ fileUpload = function(filesToUpload) {
- - +
+ +
+
+ +
`; } else if (file.type === 'image') { text = `\ @@ -110,8 +118,12 @@ fileUpload = function(filesToUpload) {
- - +
+ +
+
+ +
`; } else { const fileSize = formatBytes(file.file.size); @@ -121,12 +133,16 @@ fileUpload = function(filesToUpload) {
${ Handlebars._escape(file.name) } - ${ fileSize }
- - +
+ +
+
+ +
`; } - return swal({ + return modal.open({ title: t('Upload_file_question'), text, showCancelButton: true, @@ -136,10 +152,6 @@ fileUpload = function(filesToUpload) { cancelButtonText: t('Cancel'), html: true }, function(isConfirm) { - consume(); - if (!isConfirm) { - return; - } const record = { name: document.getElementById('file-name').value || file.name || file.file.name, @@ -149,6 +161,10 @@ fileUpload = function(filesToUpload) { description: document.getElementById('file-description').value }; + consume(); + if (!isConfirm) { + return; + } const upload = fileUploadHandler('Uploads', record, file.file); let uploading = Session.get('uploading') || []; diff --git a/packages/rocketchat-ui/client/views/app/modal.html b/packages/rocketchat-ui/client/views/app/modal.html index 9a5f4ca9976b..8b92e53a86d9 100644 --- a/packages/rocketchat-ui/client/views/app/modal.html +++ b/packages/rocketchat-ui/client/views/app/modal.html @@ -17,10 +17,21 @@

{{title}}

{{# if content}} {{> Template.dynamic template=content data=data}} {{/if}} + {{# if text}} + {{# if html}} + {{{text}}} + {{else}} + {{text}} + {{/if}} + {{/if}}
+ {{# if showCancelButton}} - + {{/if}} + + +
{{/if}} diff --git a/packages/rocketchat-ui/client/views/app/modal.js b/packages/rocketchat-ui/client/views/app/modal.js index 296a94a85dbc..a43f01716a75 100644 --- a/packages/rocketchat-ui/client/views/app/modal.js +++ b/packages/rocketchat-ui/client/views/app/modal.js @@ -2,15 +2,31 @@ this.modal = { renderedModal: null, - open(config) { + open(config = { + confirmButtonText: t('ok'), + cancelButtonText: t('Cancel') + }, fn) { this.close(); this.renderedModal = Blaze.renderWithData(Template.rc_modal, config, document.body); + this.fn = fn; + this.config = config; + this.timer = null; + if (config.timer) { + this.timer = setTimeout(() => this.close(), config.timer); + } }, close() { if (this.renderedModal) { Blaze.remove(this.renderedModal); } - + this.fn = null; + if (this.timer) { + clearTimeout(this.timer); + } + }, + confirm() { + this.fn(true); + this.config.closeOnConfirm && this.close(); } }; @@ -39,5 +55,8 @@ Template.rc_modal.events({ }, 'click .js-close'() { modal.close(); + }, + 'click .js-confirm'() { + modal.confirm(); } }); From 4d2bd90b48b983a0bc941a11294d71eaf373d582 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Thu, 16 Nov 2017 16:11:14 -0200 Subject: [PATCH 3/4] share map responsive --- .../client/imports/components/modal.css | 62 ++++++++++++------- .../client/imports/general/base_old.css | 2 - .../startup/messageBoxActions.js | 2 +- .../rocketchat-ui/client/views/app/modal.html | 3 +- .../rocketchat-ui/client/views/app/modal.js | 8 +-- 5 files changed, 44 insertions(+), 33 deletions(-) diff --git a/packages/rocketchat-theme/client/imports/components/modal.css b/packages/rocketchat-theme/client/imports/components/modal.css index 268439660323..d145d883bed0 100644 --- a/packages/rocketchat-theme/client/imports/components/modal.css +++ b/packages/rocketchat-theme/client/imports/components/modal.css @@ -1,37 +1,41 @@ - .rc-modal { - min-width: 400px; - background: white; + min-width: 400px; - boder-radius: 15px; animation: dropdown-show 0.3s cubic-bezier(0.45, 0.05, 0.55, 0.95); + background: white; + box-shadow: 0 0 2px 0 rgba(47, 52, 61, 0.08), 0 0 12px 0 rgba(47, 52, 61, 0.12); - &-wrapper { - padding: 10px; + &-wrapper { + position: fixed; z-index: 10; - display: flex; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(47, 52, 61, 0.8); - align-items: center; - justify-content: center; - } + top: 0; + right: 0; + bottom: 0; + left: 0; + + display: flex; + + padding: 10px; + + background: rgba(47, 52, 61, 0.8); + align-items: center; + justify-content: center; + } &__title { - text-align: left; - flex: 1 1 auto; + flex: 1 1 auto; + font-size: 16px; } &__close { cursor: pointer; transform: rotate(45deg); - font-size: 20px; + + font-size: 20px; + &:hover { color: var(--color-link-active); } @@ -40,41 +44,51 @@ &__header { display: flex; flex-direction: row; - padding: 16px; + + margin-bottom: -16px; + padding: 16px; font-size: 21px; justify-content: flex-end; } + &__content { - padding: 16px; display: flex; flex-direction: column; + padding: 16px; + animation: dropdown-show 0.1s cubic-bezier(0.45, 0.05, 0.55, 0.95); white-space: nowrap; background-color: var(--modal-background); } + &__footer { - padding: 16px; - background: #F7F8FA; display: flex; + + padding: 16px; + + background: #f7f8fa; justify-content: space-between; + & > .rc-button { margin: 0; } } } + @media (width <= 400px) { .rc-modal { top: initial !important; bottom: 0; left: 0 !important; + + width: 100%; min-width: 100%; max-width: 100%; - width: 100%; margin: 0 16px; animation: dropup-show 0.3s cubic-bezier(0.45, 0.05, 0.55, 0.95); diff --git a/packages/rocketchat-theme/client/imports/general/base_old.css b/packages/rocketchat-theme/client/imports/general/base_old.css index 59c9a35863c5..e59150cd9aba 100644 --- a/packages/rocketchat-theme/client/imports/general/base_old.css +++ b/packages/rocketchat-theme/client/imports/general/base_old.css @@ -104,8 +104,6 @@ } .upload-preview { - padding: 1rem; - & .upload-preview-file { height: 200px; diff --git a/packages/rocketchat-ui-message/startup/messageBoxActions.js b/packages/rocketchat-ui-message/startup/messageBoxActions.js index ceed3fbc0f9b..5d23c34cd8ef 100644 --- a/packages/rocketchat-ui-message/startup/messageBoxActions.js +++ b/packages/rocketchat-ui-message/startup/messageBoxActions.js @@ -90,7 +90,7 @@ RocketChat.messageBox.actions.add('Share', 'My_location', { const position = RocketChat.Geolocation.get(); const latitude = position.coords.latitude; const longitude = position.coords.longitude; - const text = ``; + const text = `
`; modal.open({ title: t('Share_Location_Title'), diff --git a/packages/rocketchat-ui/client/views/app/modal.html b/packages/rocketchat-ui/client/views/app/modal.html index 8b92e53a86d9..b22780cd35f9 100644 --- a/packages/rocketchat-ui/client/views/app/modal.html +++ b/packages/rocketchat-ui/client/views/app/modal.html @@ -27,9 +27,8 @@

{{title}}

{{# if showCancelButton}} - + {{/if}} -
diff --git a/packages/rocketchat-ui/client/views/app/modal.js b/packages/rocketchat-ui/client/views/app/modal.js index a43f01716a75..5d3b58b1ec41 100644 --- a/packages/rocketchat-ui/client/views/app/modal.js +++ b/packages/rocketchat-ui/client/views/app/modal.js @@ -2,10 +2,10 @@ this.modal = { renderedModal: null, - open(config = { - confirmButtonText: t('ok'), - cancelButtonText: t('Cancel') - }, fn) { + open(config = {}, fn) { + config.confirmButtonText = config.confirmButtonText || t('Send'); + config.cancelButtonText = config.cancelButtonText || t('Cancel'); + this.close(); this.renderedModal = Blaze.renderWithData(Template.rc_modal, config, document.body); this.fn = fn; From 633e84d94d357440cb4be3cf0943c2ebf10cd702 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Thu, 16 Nov 2017 16:11:14 -0200 Subject: [PATCH 4/4] share map responsive --- .../client/imports/components/modal.css | 62 ++++++++++++------- .../client/imports/general/base_old.css | 2 - .../startup/messageBoxActions.js | 4 +- .../rocketchat-ui/client/lib/fileUpload.js | 2 +- .../rocketchat-ui/client/views/app/modal.html | 3 +- .../rocketchat-ui/client/views/app/modal.js | 8 +-- 6 files changed, 46 insertions(+), 35 deletions(-) diff --git a/packages/rocketchat-theme/client/imports/components/modal.css b/packages/rocketchat-theme/client/imports/components/modal.css index 268439660323..d145d883bed0 100644 --- a/packages/rocketchat-theme/client/imports/components/modal.css +++ b/packages/rocketchat-theme/client/imports/components/modal.css @@ -1,37 +1,41 @@ - .rc-modal { - min-width: 400px; - background: white; + min-width: 400px; - boder-radius: 15px; animation: dropdown-show 0.3s cubic-bezier(0.45, 0.05, 0.55, 0.95); + background: white; + box-shadow: 0 0 2px 0 rgba(47, 52, 61, 0.08), 0 0 12px 0 rgba(47, 52, 61, 0.12); - &-wrapper { - padding: 10px; + &-wrapper { + position: fixed; z-index: 10; - display: flex; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(47, 52, 61, 0.8); - align-items: center; - justify-content: center; - } + top: 0; + right: 0; + bottom: 0; + left: 0; + + display: flex; + + padding: 10px; + + background: rgba(47, 52, 61, 0.8); + align-items: center; + justify-content: center; + } &__title { - text-align: left; - flex: 1 1 auto; + flex: 1 1 auto; + font-size: 16px; } &__close { cursor: pointer; transform: rotate(45deg); - font-size: 20px; + + font-size: 20px; + &:hover { color: var(--color-link-active); } @@ -40,41 +44,51 @@ &__header { display: flex; flex-direction: row; - padding: 16px; + + margin-bottom: -16px; + padding: 16px; font-size: 21px; justify-content: flex-end; } + &__content { - padding: 16px; display: flex; flex-direction: column; + padding: 16px; + animation: dropdown-show 0.1s cubic-bezier(0.45, 0.05, 0.55, 0.95); white-space: nowrap; background-color: var(--modal-background); } + &__footer { - padding: 16px; - background: #F7F8FA; display: flex; + + padding: 16px; + + background: #f7f8fa; justify-content: space-between; + & > .rc-button { margin: 0; } } } + @media (width <= 400px) { .rc-modal { top: initial !important; bottom: 0; left: 0 !important; + + width: 100%; min-width: 100%; max-width: 100%; - width: 100%; margin: 0 16px; animation: dropup-show 0.3s cubic-bezier(0.45, 0.05, 0.55, 0.95); diff --git a/packages/rocketchat-theme/client/imports/general/base_old.css b/packages/rocketchat-theme/client/imports/general/base_old.css index 59c9a35863c5..e59150cd9aba 100644 --- a/packages/rocketchat-theme/client/imports/general/base_old.css +++ b/packages/rocketchat-theme/client/imports/general/base_old.css @@ -104,8 +104,6 @@ } .upload-preview { - padding: 1rem; - & .upload-preview-file { height: 200px; diff --git a/packages/rocketchat-ui-message/startup/messageBoxActions.js b/packages/rocketchat-ui-message/startup/messageBoxActions.js index ceed3fbc0f9b..32d230fc2313 100644 --- a/packages/rocketchat-ui-message/startup/messageBoxActions.js +++ b/packages/rocketchat-ui-message/startup/messageBoxActions.js @@ -1,4 +1,4 @@ -/* globals fileUpload chatMessages AudioRecorder device popover */ +/* globals fileUpload chatMessages AudioRecorder device popover modal */ import mime from 'mime-type/with-db'; import {VRecDialog} from 'meteor/rocketchat:ui-vrecord'; @@ -90,7 +90,7 @@ RocketChat.messageBox.actions.add('Share', 'My_location', { const position = RocketChat.Geolocation.get(); const latitude = position.coords.latitude; const longitude = position.coords.longitude; - const text = ``; + const text = `
`; modal.open({ title: t('Share_Location_Title'), diff --git a/packages/rocketchat-ui/client/lib/fileUpload.js b/packages/rocketchat-ui/client/lib/fileUpload.js index 95fef641c7d0..a95ac12c8d17 100644 --- a/packages/rocketchat-ui/client/lib/fileUpload.js +++ b/packages/rocketchat-ui/client/lib/fileUpload.js @@ -1,4 +1,4 @@ -/* globals fileUploadHandler, Handlebars, fileUpload */ +/* globals fileUploadHandler, Handlebars, fileUpload, modal */ /* exported fileUpload */ import _ from 'underscore'; import s from 'underscore.string'; diff --git a/packages/rocketchat-ui/client/views/app/modal.html b/packages/rocketchat-ui/client/views/app/modal.html index 8b92e53a86d9..b22780cd35f9 100644 --- a/packages/rocketchat-ui/client/views/app/modal.html +++ b/packages/rocketchat-ui/client/views/app/modal.html @@ -27,9 +27,8 @@

{{title}}

{{# if showCancelButton}} - + {{/if}} -
diff --git a/packages/rocketchat-ui/client/views/app/modal.js b/packages/rocketchat-ui/client/views/app/modal.js index a43f01716a75..5d3b58b1ec41 100644 --- a/packages/rocketchat-ui/client/views/app/modal.js +++ b/packages/rocketchat-ui/client/views/app/modal.js @@ -2,10 +2,10 @@ this.modal = { renderedModal: null, - open(config = { - confirmButtonText: t('ok'), - cancelButtonText: t('Cancel') - }, fn) { + open(config = {}, fn) { + config.confirmButtonText = config.confirmButtonText || t('Send'); + config.cancelButtonText = config.cancelButtonText || t('Cancel'); + this.close(); this.renderedModal = Blaze.renderWithData(Template.rc_modal, config, document.body); this.fn = fn;