From 8cdfcd72930c7604ba1029bf3ee12db55482324f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Wed, 10 Apr 2019 15:42:22 +0200 Subject: [PATCH] Fix importing and comments css MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- css/comments.scss | 261 +++++++++++++++++++++++++++++++++++++++++++++ css/comp-13.scss | 50 --------- css/style.scss | 1 + templates/main.php | 16 +-- 4 files changed, 266 insertions(+), 62 deletions(-) create mode 100644 css/comments.scss delete mode 100644 css/comp-13.scss diff --git a/css/comments.scss b/css/comments.scss new file mode 100644 index 000000000..665051cf0 --- /dev/null +++ b/css/comments.scss @@ -0,0 +1,261 @@ +/* + * Copyright (c) 2016 + * + * This file is licensed under the Affero General Public License version 3 + * or later. + * + * See the COPYING-README file. + * + */ + +#commentsTabView .emptycontent { + margin-top: 0; +} + +#commentsTabView .newCommentForm { + margin-left: 36px; + position: relative; +} + +#commentsTabView .newCommentForm .message { + width: 100%; + padding: 10px; + min-height: 44px; + margin: 0; + + /* Prevent the text from overlapping with the submit button. */ + padding-right: 30px; +} + +#commentsTabView .newCommentForm { + .submit, + .submitLoading { + width: 44px; + height: 44px; + margin: 0; + padding: 13px; + background-color: transparent; + border: none; + opacity: .3; + position: absolute; + bottom: 0; + right: 0; + } +} + +#commentsTabView .deleteLoading { + padding: 14px; + vertical-align: middle; +} + +#commentsTabView .newCommentForm .submit:not(:disabled):hover, +#commentsTabView .newCommentForm .submit:not(:disabled):focus { + opacity: 1; +} + +#commentsTabView .newCommentForm div.message { + resize: none; +} + +#commentsTabView .newCommentForm div.message:empty:before { + content: attr(data-placeholder); + color: grey; +} + +#commentsTabView .comment { + position: relative; + /** padding bottom is little more so that the top and bottom gap look uniform **/ + padding: 10px 0 15px; +} + +#commentsTabView .comments .comment { + border-top: 1px solid var(--color-border); +} + +#commentsTabView .comment .avatar, +.atwho-view-ul * .avatar{ + width: 32px; + height: 32px; + line-height: 32px; + margin-right: 5px; +} + +#commentsTabView .comment .message .avatar, +.atwho-view-ul * .avatar +{ + display: inline-block; +} + +#activityTabView li.comment.collapsed .activitymessage, +#commentsTabView .comment.collapsed .message { + white-space: pre-wrap; +} + +#activityTabView li.comment.collapsed .activitymessage, +#commentsTabView .comment.collapsed .message { + max-height: 70px; + overflow: hidden; +} + +#activityTabView li.comment .message-overlay, +#commentsTabView .comment .message-overlay { + display: none; +} + +#activityTabView li.comment.collapsed .message-overlay, +#commentsTabView .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(var(--color-main-background), 0), var(--color-main-background)); + background: -webkit-linear-gradient(rgba(var(--color-main-background), 0), var(--color-main-background)); + background: -o-linear-gradient(rgba(var(--color-main-background), 0), var(--color-main-background)); + background: -ms-linear-gradient(rgba(var(--color-main-background), 0), var(--color-main-background)); + background: linear-gradient(rgba(var(--color-main-background), 0), var(--color-main-background)); + background-repeat: no-repeat; +} + +#commentsTabView .hidden { + display: none !important; +} + +/** set min-height as 44px to ensure that it fits the button sizes. **/ +#commentsTabView .comment .authorRow { + min-height: 44px; +} +#commentsTabView .comment .authorRow .tooltip { + /** because of the padding on the element, the tooltip appear too far up, + adding this brings them closer to the element**/ + margin-top: 5px; +} + +.atwho-view-ul * .avatar-name-wrapper, +#commentsTabView .comment .authorRow { + position: relative; + display: inline-flex; + align-items: center; + width: 100%; +} + +#commentsTabView .comment:not(.newCommentRow) .message .avatar-name-wrapper:not(.currentUser), +#commentsTabView .comment:not(.newCommentRow) .message .avatar-name-wrapper:not(.currentUser) .avatar, +#commentsTabView .comment:not(.newCommentRow) .message .avatar-name-wrapper:not(.currentUser) .avatar img, +#commentsTabView .comment .authorRow .avatar:not(.currentUser), +#commentsTabView .comment .authorRow .author:not(.currentUser) { + cursor: pointer; +} + +.atwho-view-ul .avatar-name-wrapper, +.atwho-view-ul .avatar-name-wrapper .avatar, +.atwho-view-ul .avatar-name-wrapper .avatar img { + cursor: pointer; +} + +#commentsTabView .comments li .message .atwho-inserted, +#commentsTabView .newCommentForm .atwho-inserted { + .avatar-name-wrapper { + /* Make the wrapper 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. */ + white-space: nowrap; + + .avatar { + img { + vertical-align: top; + } + height: 16px; + width: 16px; + vertical-align: middle; + padding: 1px; + margin-top: -3px; + margin-left: 0; + margin-right: 2px; + } + strong { + /* Ensure that the user name is shown in bold, as different browsers + * use different font weights for strong elements. */ + font-weight: bold; + } + } + .avatar-name-wrapper.currentUser { + background-color: var(--color-primary); + color: var(--color-primary-text); + } +} + +.atwho-view-ul * .avatar-name-wrapper { + white-space: nowrap; +} +#commentsTabView .comment .author, +#commentsTabView .comment .date { + opacity: .5; +} +#commentsTabView .comment .author { + max-width: 210px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} +#commentsTabView .comment .date { + margin-left: auto; + /** this is to fix the tooltip being too close due to the margin-top applied + to bring the tooltip closer for the action icons **/ + padding: 10px 0px; +} + +#commentsTabView .comments > li:not(.newCommentRow) .message { + padding-left: 40px; + word-wrap: break-word; + overflow-wrap: break-word; +} + +#commentsTabView .comment .action { + opacity: 0.3; + padding: 14px; + display: block; +} + +#commentsTabView .comment .action:hover, +#commentsTabView .comment .action:focus { + opacity: 1; +} + +#commentsTabView .newCommentRow .action-container { + margin-left: auto; +} + +#commentsTabView .comment.disabled .message { + opacity: 0.3; +} + +#commentsTabView .comment.disabled .action { + display: none; +} + +#commentsTabView .message.error { + color: #e9322d; + border-color: #e9322d; + box-shadow: 0 0 6px #f8b9b7; +} + +.app-files .action-comment { + padding: 16px 14px; +} + +#commentsTabView .comment .message .contactsmenu-popover { + left: -6px; + top: 24px; +} diff --git a/css/comp-13.scss b/css/comp-13.scss deleted file mode 100644 index 55468b053..000000000 --- a/css/comp-13.scss +++ /dev/null @@ -1,50 +0,0 @@ -#content-wrapper #content { - height: 100%; -} -#app-content { - flex-grow: 1; - height: 100%; - - &.details-visible { - margin-right: 500px; - } -} - -#app-sidebar { - right: -500px; - max-width: 100%; - width: 500px; - display:flex; - flex-direction: column; - z-index: 1000; - - &.details-visible { - right: 0; - } -} - -#content[class*='app-'] * { - box-sizing: border-box; -} - -body:not(.snapjs-left) { - .app-navigation-hide { - #app-content { - margin-left: 0 !important; - } - #app-navigation { - display: none; - } - } -} - -#commentsTabView .newCommentForm .message { - width: 100%; - margin-left: 0; - padding-right: 0; - display: block; -} - -#commentsTabView .comment { - margin-bottom: 0; -} diff --git a/css/style.scss b/css/style.scss index e553f11f8..0170f039e 100644 --- a/css/style.scss +++ b/css/style.scss @@ -42,6 +42,7 @@ $compact-board-last-item-margin: 5px 10px 10px; @import 'animations'; @import 'compact-mode'; @import 'autocomplete'; +@import 'comments'; /** * General styles diff --git a/templates/main.php b/templates/main.php index 59944e6e9..b59daa03d 100644 --- a/templates/main.php +++ b/templates/main.php @@ -24,23 +24,15 @@ use OCP\Util; Util::addScript('activity', 'richObjectStringParser'); -if (\OC_Util::getVersion()[0] > 14) { - Util::addScript('activity', 'templates'); -} - +Util::addScript('activity', 'templates'); Util::addStyle('activity', 'style'); -Util::addStyle('comments', 'comments'); -Util::addScript('oc-backbone-webdav'); - -//Util::addStyle('deck', '../js/build/vendor'); -//Util::addScript('deck', 'build/vendor'); +if (\OC_Util::getVersion()[0] < 16) { + Util::addScript('oc-backbone-webdav'); +} Util::addStyle('deck', 'style'); Util::addScript('deck', 'build/deck'); -if (\OC_Util::getVersion()[0] < 14) { - Util::addStyle('deck', 'comp-13'); -} \OC::$server->getEventDispatcher()->dispatch('\OCP\Collaboration\Resources::loadAdditionalScripts'); ?>