diff options
author | Joas Schilling <coding@schilljs.com> | 2018-11-16 15:05:46 +0300 |
---|---|---|
committer | Joas Schilling <coding@schilljs.com> | 2018-11-16 15:05:46 +0300 |
commit | d0708349594e28837a437cad812f94a661b13f43 (patch) | |
tree | 06377ec8ff967a4effadca18e7b998405c8c6a39 /css | |
parent | 2b96fe058da2b723e9b2b132e7effe0c1e32feff (diff) |
Update the comments code to support mentions and clickable links
Signed-off-by: Joas Schilling <coding@schilljs.com>
Diffstat (limited to 'css')
-rw-r--r-- | css/autocomplete.scss | 77 | ||||
-rw-r--r-- | css/comments.css | 165 | ||||
-rw-r--r-- | css/comments.scss | 261 |
3 files changed, 338 insertions, 165 deletions
diff --git a/css/autocomplete.scss b/css/autocomplete.scss new file mode 100644 index 0000000..0837b38 --- /dev/null +++ b/css/autocomplete.scss @@ -0,0 +1,77 @@ +/** + * based upon apps/comments/js/vendor/At.js/dist/css/jquery.atwho.css, + * only changed colors and font-weight + */ + +.atwho-view { + position:absolute; + top: 0; + left: 0; + display: none; + margin-top: 18px; + background: var(--color-main-background); + color: var(--color-main-text); + border: 1px solid var(--color-border); + border-radius: var(--border-radius); + box-shadow: 0 0 5px var(--color-box-shadow); + min-width: 120px; + z-index: 11110 !important; +} + +.atwho-view .atwho-header { + padding: 5px; + margin: 5px; + cursor: pointer; + border-bottom: solid 1px var(--color-border); + color: var(--color-main-text); + font-size: 11px; + font-weight: bold; +} + +.atwho-view .atwho-header .small { + color: var(--color-main-text); + float: right; + padding-top: 2px; + margin-right: -5px; + font-size: 12px; + font-weight: normal; +} + +.atwho-view .atwho-header:hover { + cursor: default; +} + +.atwho-view .cur { + background: var(--color-primary); + color: var(--color-primary-text); +} +.atwho-view .cur small { + color: var(--color-primary-text); +} +.atwho-view strong { + color: var(--color-main-text); + font-weight: normal; +} +.atwho-view .cur strong { + color: var(--color-primary-text); + font-weight: normal; +} +.atwho-view ul { + /* width: 100px; */ + list-style:none; + padding:0; + margin:auto; + max-height: 200px; + overflow-y: auto; +} +.atwho-view ul li { + display: block; + padding: 5px 10px; + border-bottom: 1px solid var(--color-border); + cursor: pointer; +} +.atwho-view small { + font-size: smaller; + color: var(--color-main-text); + font-weight: normal; +} diff --git a/css/comments.css b/css/comments.css deleted file mode 100644 index 1de2911..0000000 --- a/css/comments.css +++ /dev/null @@ -1,165 +0,0 @@ -/* - * 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 { - position: relative; - margin-bottom: 20px; -} - -#commentsTabView .newCommentForm .message { - width: calc(100% - 41px); /* 36 (left margin) + 5 (right padding */ - margin-left: 36px; - padding-right: 5px; - display: block; -} - -#commentsTabView .newCommentForm .submit { - position: absolute; - bottom: 0; - right: 8px; - width: 30px; - margin: 0; - padding: 7px 9px; - background-color: transparent; - border: none; - opacity: .3; -} -#commentsTabView .newCommentForm .submit:hover, -#commentsTabView .newCommentForm .submit:focus { - opacity: 1; -} - -#commentsTabView .newCommentForm .submitLoading { - background-position: left; -} - -#commentsTabView .newCommentForm .cancel { - margin-right: 6px; -} - -#commentsTabView .newCommentForm textarea { - resize: none; -} - -#commentsTabView .comment { - position: relative; - margin-bottom: 30px; -} - -#commentsTabView .comment .avatar { - width: 32px; - height: 32px; - line-height: 32px; -} - -#commentsTabView .comment.collapsed .message { - white-space: pre-wrap; -} - -#commentsTabView .comment.collapsed .message { - max-height: 70px; - overflow: hidden; -} - -#commentsTabView .comment .message-overlay { - display: none; -} - -#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(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; -} - -#commentsTabView .authorRow>div { - display: inline-block; - vertical-align: middle; -} - -#commentsTabView .authorRow>div.hidden { - display: none !important; -} - -#commentsTabView .comments li .message .avatar-name-wrapper, -#commentsTabView .comment .authorRow { - position: relative; -} - -#commentsTabView .comment .author, -#commentsTabView .comment .date { - opacity: .5; -} -#commentsTabView .comment .author { - margin-left: 5px; -} -#commentsTabView .comment .date { - position: absolute; - right: 0; - top: 5px; -} - -#commentsTabView .comments li .message { - padding-left: 40px; -} - -#commentsTabView .comment .action { - opacity: 0; - vertical-align: middle; - display: inline-block; -} - -#commentsTabView .comment:hover .action { - opacity: 0.3; -} - -#commentsTabView .comment .action:hover { - opacity: 1; -} - -#commentsTabView .comment .action.delete { - position: absolute; - right: 0; -} - -#commentsTabView .comment.disabled { - opacity: 0.3; -} - -#commentsTabView .comment.disabled .action { - visibility: hidden; -} - -#commentsTabView .message.error { - color: #e9322d; - border-color: #e9322d; - -webkit-box-shadow: 0 0 6px #f8b9b7; - -moz-box-shadow: 0 0 6px #f8b9b7; - box-shadow: 0 0 6px #f8b9b7; -} - -.app-files .action-comment { - padding: 16px 14px; -} diff --git a/css/comments.scss b/css/comments.scss new file mode 100644 index 0000000..e631d68 --- /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 0px 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(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)); + 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; +} |