From 8396fa51e501e58f1b289d145d0a8be769c6b569 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Calvi=C3=B1o=20S=C3=A1nchez?= Date: Wed, 28 Nov 2018 17:46:21 +0100 Subject: Move "comments.scss" to "chatview.scss" MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Daniel Calviño Sánchez --- css/chatview.scss | 349 +++++++++++++++++++++++++++++++++ css/comments.scss | 349 --------------------------------- lib/PublicShareAuth/TemplateLoader.php | 2 +- templates/index-public.php | 2 +- templates/index.php | 2 +- 5 files changed, 352 insertions(+), 352 deletions(-) create mode 100644 css/chatview.scss delete mode 100644 css/comments.scss diff --git a/css/chatview.scss b/css/chatview.scss new file mode 100644 index 000000000..98d613288 --- /dev/null +++ b/css/chatview.scss @@ -0,0 +1,349 @@ +/* + * Copyright (c) 2016 + * + * This file is licensed under the Affero General Public License version 3 + * or later. + * + * See the COPYING-README file. + * + */ + +#chatView .comments, +#chatView .emptycontent { + flex-grow: 1; +} + +#chatView .emptycontent { + margin-top: 0; +} + +#chatView .newCommentForm { + position: relative; +} + +#chatView .newCommentForm .message { + width: calc(100% - 36px); + margin-left: 36px; + padding-right: 30px; + display: block; +} + +#chatView .newCommentForm .submit, +#chatView .newCommentForm .submitLoading, +#chatView .newCommentForm .share, +#chatView .newCommentForm .shareLoading { + position: absolute; + + width: 44px; + height: 44px; + + bottom: -4px; + margin: 0; +} + +#chatView .newCommentForm .submit, +#chatView .newCommentForm .submitLoading { + right: 0; +} + +#chatView .newCommentForm .share, +#chatView .newCommentForm .shareLoading { + right: -44px; +} + +#chatView .newCommentForm .submit, +#chatView .newCommentForm .share { + background-color: transparent; + border: none; + opacity: .3; +} +#chatView .newCommentForm .submit:hover, +#chatView .newCommentForm .submit:focus, +#chatView .newCommentForm .share:hover, +#chatView .newCommentForm .share:focus { + opacity: 1; +} + +#chatView .newCommentForm .cancel { + margin-right: 6px; +} + +#chatView .newCommentForm div.message { + resize: none; +} + +#chatView .newCommentForm div.message:empty:before { + content: attr(data-placeholder); + color: grey; +} + +/* Internal wrappers used by the virtual list. */ +#chatView .comments .wrapper-background, +#chatView .comments .wrapper { + position: absolute; + left: 0; + right: 0; +} + +#chatView .comment { + position: relative; + margin-bottom: 30px; + word-wrap: break-word; + overflow-wrap: break-word; +} + +#chatView .comment .avatar, +.atwho-view-ul .chat-view-mention-autocomplete .avatar{ + width: 32px; + height: 32px; + line-height: 32px; + margin-right: 5px; +} + +#chatView .comment .message .avatar, +.atwho-view-ul .chat-view-mention-autocomplete .avatar +{ + display: inline-block; +} + +#chatView .comment.collapsed .message { + white-space: pre-wrap; +} + +#chatView .comment.collapsed .message { + max-height: 70px; + overflow: hidden; +} + +#chatView .comment .message-overlay { + display: none; +} + +#chatView .comment.collapsed .message-overlay { + display: block; + position: absolute; + z-index: 2; + height: 50px; + pointer-events: none; + left: 0; + right: 0; + bottom: 0; + background: -moz-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); + background: -webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); + background: -o-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); + background: -ms-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); + background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00FFFFFF', endColorstr='#FFFFFFFF'); + background-repeat: no-repeat; +} + +#chatView .authorRow>div { + display: inline-block; + vertical-align: middle; +} + +#chatView .authorRow>div.hidden { + display: none !important; +} + +.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper, +#chatView .comment .authorRow { + position: relative; + display: inline-flex; + align-items: center; + width: 100%; +} + +#chatView .comment .authorRow .contactsmenu-popover { + top: 32px; +} + +body:not(#body-public) #chatView .comment .authorRow:not(.currentUser):not(.guestUser) { + .avatar, + .avatar img, + .author { + cursor: pointer; + } +} + +.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper, +.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper .avatar, +.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper .avatar img { + cursor: pointer; +} + +.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper { + white-space: nowrap; +} + +#chatView .comment .author, +#chatView .comment .date { + color: var(--color-text-maxcontrast); +} +#chatView .comment .author { + margin-left: 5px; +} +#chatView .comment .date { + /* "margin-left: auto" aligns the block to the right, while + * "text-align: right" aligns the text inside the block to the right, for + * example, when it uses two lines due to a limited width. */ + margin-left: auto; + text-align: right; +} + +#chatView .comments li .message { + padding-left: 40px; +} + +#chatView .comment .action { + opacity: 0; + vertical-align: middle; + display: inline-block; +} + +#chatView .comment:hover .action { + opacity: 0.3; +} + +#chatView .comment .action:hover { + opacity: 1; +} + +#chatView .comment .action.delete { + position: absolute; + right: 0; +} + +#chatView .comment.disabled { + opacity: 0.3; +} + +#chatView .comment.disabled .action { + visibility: hidden; +} + +#chatView .message.error { + color: #e9322d; + border-color: #e9322d; + box-shadow: 0 0 6px #f8b9b7; +} + +#chatView .comment.grouped .authorRow { + display: none; +} + +#chatView .comment.grouped { + margin-top: -20px; +} + +#chatView .comment.showDate { + margin-top: 40px; + border-top: 1px solid #dbdbdb; + padding-top: 10px; +} + +#chatView .comment.showDate:before { + content: attr(data-date); + + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%) translateY(-50%); + padding: 0 7px 0 7px; + + text-align: center; + + color: #878787; + background-color: #fff; +} + +#chatView .comment.showDate .authorRow { + display: inline-flex; +} + +#chatView .comment .message .mention-user { + /* Make the mention the positioning context of its child contacts menu */ + position: relative; + + display: inline; + vertical-align: top; + background-color: var(--color-background-dark); + border-radius: 50vh; + padding: 1px 7px 1px 1px; + + /* Ensure that the avatar and the user name will be kept together; + * otherwise a line break could be added between them when the wrapper + * is close to the right border of the message. */ + white-space: nowrap; + + .avatar { + img { + vertical-align: top; + } + height: 16px; + width: 16px; + vertical-align: middle; + padding: 1px; + margin-top: -4px; + margin-left: 0; + margin-right: 2px; + } +} + +#chatView .comment:not(.systemMessage) .message .mention-user { + font-weight: bold; + + &.currentUser { + background-color: var(--color-primary); + color: var(--color-primary-text); + } +} + +#chatView .comment.systemMessage .message .mention-user { + color: var(--color-main-text); +} + +/* System messages have no author, so the author row only contains the date. + * Instead of showing the date on its own row and the message below it the + * message and the date are merged in a single row using flexboxes. */ +#chatView .comment.systemMessage { + display: flex; + flex-direction: row; +} + +#chatView .comment.systemMessage .authorRow { + order: 1; + flex-grow: 0; + width: auto; + padding-left: 10px; +} + +#chatView .comment.systemMessage .message { + order: 0; + flex-grow: 1; + color: var(--color-text-maxcontrast); +} + +body:not(#body-public) #chatView .comment:not(.newCommentRow) .message .mention-user:not(.currentUser), +body:not(#body-public) #chatView .comment:not(.newCommentRow) .message .mention-user:not(.currentUser) .avatar, +body:not(#body-public) #chatView .comment:not(.newCommentRow) .message .mention-user:not(.currentUser) .avatar img { + cursor: pointer; +} + +#chatView .comment .message .contactsmenu-popover { + left: -6px; + top: 24px; +} + +#chatView .comment .message .filePreviewContainer .filePreview { + /* The file preview can not be a block; otherwise it would fill the whole + * width of the container and the loading icon would not be centered on the + * image. */ + display: inline-block; +} + +#chatView .comment .message .filePreviewContainer strong { + /* As the file preview is an inline block the name is set as a block to + * force it to be on its own line below the preview. */ + display: block; +} diff --git a/css/comments.scss b/css/comments.scss deleted file mode 100644 index 98d613288..000000000 --- a/css/comments.scss +++ /dev/null @@ -1,349 +0,0 @@ -/* - * Copyright (c) 2016 - * - * This file is licensed under the Affero General Public License version 3 - * or later. - * - * See the COPYING-README file. - * - */ - -#chatView .comments, -#chatView .emptycontent { - flex-grow: 1; -} - -#chatView .emptycontent { - margin-top: 0; -} - -#chatView .newCommentForm { - position: relative; -} - -#chatView .newCommentForm .message { - width: calc(100% - 36px); - margin-left: 36px; - padding-right: 30px; - display: block; -} - -#chatView .newCommentForm .submit, -#chatView .newCommentForm .submitLoading, -#chatView .newCommentForm .share, -#chatView .newCommentForm .shareLoading { - position: absolute; - - width: 44px; - height: 44px; - - bottom: -4px; - margin: 0; -} - -#chatView .newCommentForm .submit, -#chatView .newCommentForm .submitLoading { - right: 0; -} - -#chatView .newCommentForm .share, -#chatView .newCommentForm .shareLoading { - right: -44px; -} - -#chatView .newCommentForm .submit, -#chatView .newCommentForm .share { - background-color: transparent; - border: none; - opacity: .3; -} -#chatView .newCommentForm .submit:hover, -#chatView .newCommentForm .submit:focus, -#chatView .newCommentForm .share:hover, -#chatView .newCommentForm .share:focus { - opacity: 1; -} - -#chatView .newCommentForm .cancel { - margin-right: 6px; -} - -#chatView .newCommentForm div.message { - resize: none; -} - -#chatView .newCommentForm div.message:empty:before { - content: attr(data-placeholder); - color: grey; -} - -/* Internal wrappers used by the virtual list. */ -#chatView .comments .wrapper-background, -#chatView .comments .wrapper { - position: absolute; - left: 0; - right: 0; -} - -#chatView .comment { - position: relative; - margin-bottom: 30px; - word-wrap: break-word; - overflow-wrap: break-word; -} - -#chatView .comment .avatar, -.atwho-view-ul .chat-view-mention-autocomplete .avatar{ - width: 32px; - height: 32px; - line-height: 32px; - margin-right: 5px; -} - -#chatView .comment .message .avatar, -.atwho-view-ul .chat-view-mention-autocomplete .avatar -{ - display: inline-block; -} - -#chatView .comment.collapsed .message { - white-space: pre-wrap; -} - -#chatView .comment.collapsed .message { - max-height: 70px; - overflow: hidden; -} - -#chatView .comment .message-overlay { - display: none; -} - -#chatView .comment.collapsed .message-overlay { - display: block; - position: absolute; - z-index: 2; - height: 50px; - pointer-events: none; - left: 0; - right: 0; - bottom: 0; - background: -moz-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); - background: -webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); - background: -o-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); - background: -ms-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); - background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1)); - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00FFFFFF', endColorstr='#FFFFFFFF'); - background-repeat: no-repeat; -} - -#chatView .authorRow>div { - display: inline-block; - vertical-align: middle; -} - -#chatView .authorRow>div.hidden { - display: none !important; -} - -.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper, -#chatView .comment .authorRow { - position: relative; - display: inline-flex; - align-items: center; - width: 100%; -} - -#chatView .comment .authorRow .contactsmenu-popover { - top: 32px; -} - -body:not(#body-public) #chatView .comment .authorRow:not(.currentUser):not(.guestUser) { - .avatar, - .avatar img, - .author { - cursor: pointer; - } -} - -.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper, -.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper .avatar, -.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper .avatar img { - cursor: pointer; -} - -.atwho-view-ul .chat-view-mention-autocomplete .avatar-name-wrapper { - white-space: nowrap; -} - -#chatView .comment .author, -#chatView .comment .date { - color: var(--color-text-maxcontrast); -} -#chatView .comment .author { - margin-left: 5px; -} -#chatView .comment .date { - /* "margin-left: auto" aligns the block to the right, while - * "text-align: right" aligns the text inside the block to the right, for - * example, when it uses two lines due to a limited width. */ - margin-left: auto; - text-align: right; -} - -#chatView .comments li .message { - padding-left: 40px; -} - -#chatView .comment .action { - opacity: 0; - vertical-align: middle; - display: inline-block; -} - -#chatView .comment:hover .action { - opacity: 0.3; -} - -#chatView .comment .action:hover { - opacity: 1; -} - -#chatView .comment .action.delete { - position: absolute; - right: 0; -} - -#chatView .comment.disabled { - opacity: 0.3; -} - -#chatView .comment.disabled .action { - visibility: hidden; -} - -#chatView .message.error { - color: #e9322d; - border-color: #e9322d; - box-shadow: 0 0 6px #f8b9b7; -} - -#chatView .comment.grouped .authorRow { - display: none; -} - -#chatView .comment.grouped { - margin-top: -20px; -} - -#chatView .comment.showDate { - margin-top: 40px; - border-top: 1px solid #dbdbdb; - padding-top: 10px; -} - -#chatView .comment.showDate:before { - content: attr(data-date); - - position: absolute; - top: 0; - left: 50%; - transform: translateX(-50%) translateY(-50%); - padding: 0 7px 0 7px; - - text-align: center; - - color: #878787; - background-color: #fff; -} - -#chatView .comment.showDate .authorRow { - display: inline-flex; -} - -#chatView .comment .message .mention-user { - /* Make the mention the positioning context of its child contacts menu */ - position: relative; - - display: inline; - vertical-align: top; - background-color: var(--color-background-dark); - border-radius: 50vh; - padding: 1px 7px 1px 1px; - - /* Ensure that the avatar and the user name will be kept together; - * otherwise a line break could be added between them when the wrapper - * is close to the right border of the message. */ - white-space: nowrap; - - .avatar { - img { - vertical-align: top; - } - height: 16px; - width: 16px; - vertical-align: middle; - padding: 1px; - margin-top: -4px; - margin-left: 0; - margin-right: 2px; - } -} - -#chatView .comment:not(.systemMessage) .message .mention-user { - font-weight: bold; - - &.currentUser { - background-color: var(--color-primary); - color: var(--color-primary-text); - } -} - -#chatView .comment.systemMessage .message .mention-user { - color: var(--color-main-text); -} - -/* System messages have no author, so the author row only contains the date. - * Instead of showing the date on its own row and the message below it the - * message and the date are merged in a single row using flexboxes. */ -#chatView .comment.systemMessage { - display: flex; - flex-direction: row; -} - -#chatView .comment.systemMessage .authorRow { - order: 1; - flex-grow: 0; - width: auto; - padding-left: 10px; -} - -#chatView .comment.systemMessage .message { - order: 0; - flex-grow: 1; - color: var(--color-text-maxcontrast); -} - -body:not(#body-public) #chatView .comment:not(.newCommentRow) .message .mention-user:not(.currentUser), -body:not(#body-public) #chatView .comment:not(.newCommentRow) .message .mention-user:not(.currentUser) .avatar, -body:not(#body-public) #chatView .comment:not(.newCommentRow) .message .mention-user:not(.currentUser) .avatar img { - cursor: pointer; -} - -#chatView .comment .message .contactsmenu-popover { - left: -6px; - top: 24px; -} - -#chatView .comment .message .filePreviewContainer .filePreview { - /* The file preview can not be a block; otherwise it would fill the whole - * width of the container and the loading icon would not be centered on the - * image. */ - display: inline-block; -} - -#chatView .comment .message .filePreviewContainer strong { - /* As the file preview is an inline block the name is set as a block to - * force it to be on its own line below the preview. */ - display: block; -} diff --git a/lib/PublicShareAuth/TemplateLoader.php b/lib/PublicShareAuth/TemplateLoader.php index 4ecf15218..1791998b0 100644 --- a/lib/PublicShareAuth/TemplateLoader.php +++ b/lib/PublicShareAuth/TemplateLoader.php @@ -73,7 +73,7 @@ class TemplateLoader { Util::addStyle('spreed', 'publicshareauth'); Util::addStyle('spreed', 'style'); - Util::addStyle('spreed', 'comments'); + Util::addStyle('spreed', 'chatview'); Util::addStyle('spreed', 'autocomplete'); Util::addScript('spreed', 'vendor/backbone/backbone-min'); diff --git a/templates/index-public.php b/templates/index-public.php index 0012d8cfa..abdcb93a1 100644 --- a/templates/index-public.php +++ b/templates/index-public.php @@ -6,7 +6,7 @@ vendor_script('select2/select2'); vendor_style('select2/select2'); style('spreed', 'style'); -style('spreed', 'comments'); +style('spreed', 'chatview'); style('spreed', 'autocomplete'); script( 'spreed', diff --git a/templates/index.php b/templates/index.php index 670549aa2..d351c92fd 100644 --- a/templates/index.php +++ b/templates/index.php @@ -6,7 +6,7 @@ vendor_script('select2/select2'); vendor_style('select2/select2'); style('spreed', 'style'); -style('spreed', 'comments'); +style('spreed', 'chatview'); style('spreed', 'autocomplete'); script( 'spreed', -- cgit v1.2.3