diff options
Diffstat (limited to 'web')
-rw-r--r-- | web/react/components/posts_view.jsx | 4 | ||||
-rw-r--r-- | web/react/components/sidebar.jsx | 4 | ||||
-rw-r--r-- | web/react/components/view_image.jsx | 34 | ||||
-rw-r--r-- | web/react/utils/markdown.jsx | 124 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_modal.scss | 40 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_post.scss | 12 | ||||
-rw-r--r-- | web/sass-files/sass/partials/_responsive.scss | 6 |
7 files changed, 137 insertions, 87 deletions
diff --git a/web/react/components/posts_view.jsx b/web/react/components/posts_view.jsx index 5e374b877..9aa1a45b5 100644 --- a/web/react/components/posts_view.jsx +++ b/web/react/components/posts_view.jsx @@ -240,6 +240,7 @@ export default class PostsView extends React.Component { this.updateScrolling(); } window.addEventListener('resize', this.handleResize); + $(this.refs.postlist).perfectScrollbar(); } componentWillUnmount() { window.removeEventListener('resize', this.handleResize); @@ -248,6 +249,7 @@ export default class PostsView extends React.Component { if (this.props.postList != null) { this.updateScrolling(); } + $(this.refs.postlist).perfectScrollbar('update'); } shouldComponentUpdate(nextProps) { if (this.props.isActive !== nextProps.isActive) { @@ -326,7 +328,7 @@ export default class PostsView extends React.Component { return ( <div ref='postlist' - className={'post-list-holder-by-time ' + activeClass} + className={'ps-container post-list-holder-by-time ' + activeClass} onScroll={this.handleScroll} > <div className='post-list__table'> diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx index 30422ff7d..b4c037183 100644 --- a/web/react/components/sidebar.jsx +++ b/web/react/components/sidebar.jsx @@ -173,6 +173,10 @@ export default class Sidebar extends React.Component { this.updateScrollbar(); window.addEventListener('resize', this.handleResize); + + if ($(window).width() > 768) { + $('.nav-pills__container').perfectScrollbar(); + } } shouldComponentUpdate(nextProps, nextState) { if (!Utils.areObjectsEqual(nextState, this.state)) { diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx index 91f4b3bdc..2b505607e 100644 --- a/web/react/components/view_image.jsx +++ b/web/react/components/view_image.jsx @@ -424,23 +424,27 @@ export default class ViewImageModal extends React.Component { > <div className={'image-wrapper ' + bgClass} - onMouseEnter={this.onMouseEnterImage} - onMouseLeave={this.onMouseLeaveImage} - onClick={(e) => e.stopPropagation()} + onClick={this.props.onModalDismissed} > <div - className={closeButtonClass} - onClick={this.props.onModalDismissed} - /> - {content} - <ViewImagePopoverBar - show={this.state.showFooter} - fileId={this.state.imgId} - totalFiles={this.props.filenames.length} - filename={name} - fileURL={fileUrl} - getPublicLink={this.getPublicLink} - /> + onMouseEnter={this.onMouseEnterImage} + onMouseLeave={this.onMouseLeaveImage} + onClick={(e) => e.stopPropagation()} + > + <div + className={closeButtonClass} + onClick={this.props.onModalDismissed} + /> + {content} + <ViewImagePopoverBar + show={this.state.showFooter} + fileId={this.state.imgId} + totalFiles={this.props.filenames.length} + filename={name} + fileURL={fileUrl} + getPublicLink={this.getPublicLink} + /> + </div> </div> {leftArrow} {rightArrow} diff --git a/web/react/utils/markdown.jsx b/web/react/utils/markdown.jsx index b0ec64bfd..f2721c81d 100644 --- a/web/react/utils/markdown.jsx +++ b/web/react/utils/markdown.jsx @@ -223,6 +223,16 @@ class MattermostMarkdownRenderer extends marked.Renderer { return `<table class="markdown__table"><thead>${header}</thead><tbody>${body}</tbody></table>`; } + listitem(text) { + const taskListReg = /^\[([ |xX])\] /; + const isTaskList = taskListReg.exec(text); + + if (isTaskList) { + return `<li>${'<input type="checkbox" disabled="disabled" ' + (isTaskList[1] === ' ' ? '' : 'checked="checked" ') + '/> '}${text.replace(taskListReg, '')}</li>`; + } + return `<li>${text}</li>`; + } + text(txt) { return TextFormatting.doFormatText(txt, this.formattingOptions); } @@ -361,78 +371,78 @@ class MattermostLexer extends marked.Lexer { // list cap = this.rules.list.exec(src); if (cap) { + src = src.substring(cap[0].length); const bull = cap[2]; - let l = cap[0].length; + + this.tokens.push({ + type: 'list_start', + ordered: bull.length > 1 + }); // Get each top-level item. cap = cap[0].match(this.rules.item); - if (cap.length > 1) { - src = src.substring(l); - - this.tokens.push({ - type: 'list_start', - ordered: bull.length > 1 - }); - - let next = false; - l = cap.length; - - for (let i = 0; i < l; i++) { - let item = cap[i]; - - // Remove the list item's bullet - // so it is seen as the next token. - let space = item.length; - item = item.replace(/^ *([*+-]|\d+\.) +/, ''); - - // Outdent whatever the - // list item contains. Hacky. - if (~item.indexOf('\n ')) { - space -= item.length; - item = this.options.pedantic ? item.replace(/^ {1,4}/gm, '') : item.replace(new RegExp('^ \{1,' + space + '\}', 'gm'), ''); - } + let next = false; + const l = cap.length; + let i = 0; + + for (; i < l; i++) { + let item = cap[i]; + + // Remove the list item's bullet + // so it is seen as the next token. + let space = item.length; + item = item.replace(/^ *([*+-]|\d+\.) +/, ''); + + // Outdent whatever the + // list item contains. Hacky. + if (~item.indexOf('\n ')) { + space -= item.length; + item = this.options.pedantic ? + item.replace(/^ {1,4}/gm, '') : + item.replace(new RegExp('^ {1,' + space + '}', 'gm'), ''); + } - // Determine whether the next list item belongs here. - // Backpedal if it does not belong in this list. - if (this.options.smartLists && i !== l - 1) { - const bullet = /(?:[*+-]|\d+\.)/; - const b = bullet.exec(cap[i + 1])[0]; - if (bull !== b && !(bull.length > 1 && b.length > 1)) { - src = cap.slice(i + 1).join('\n') + src; - i = l - 1; - } + // Determine whether the next list item belongs here. + // Backpedal if it does not belong in this list. + if (this.options.smartLists && i !== l - 1) { + const b = this.rules.bullet.exec(cap[i + 1])[0]; + if (bull !== b && !(bull.length > 1 && b.length > 1)) { + src = cap.slice(i + 1).join('\n') + src; + i = l - 1; } + } - // Determine whether item is loose or not. - // Use: /(^|\n)(?! )[^\n]+\n\n(?!\s*$)/ - // for discount behavior. - let loose = next || (/\n\n(?!\s*$)/).test(item); - if (i !== l - 1) { - next = item.charAt(item.length - 1) === '\n'; - if (!loose) { - loose = next; - } + // Determine whether item is loose or not. + // Use: /(^|\n)(?! )[^\n]+\n\n(?!\s*$)/ + // for discount behavior. + let loose = next || (/\n\n(?!\s*$)/).test(item); + if (i !== l - 1) { + next = item.charAt(item.length - 1) === '\n'; + if (!loose) { + loose = next; } - - this.tokens.push({ - type: loose ? 'loose_item_start' : 'list_item_start' - }); - - // Recurse. - this.token(item, false, bq); - - this.tokens.push({ - type: 'list_item_end' - }); } this.tokens.push({ - type: 'list_end' + type: loose ? + 'loose_item_start' : + 'list_item_start' }); - continue; + // Recurse. + this.token(item, false, bq); + + this.tokens.push({ + type: 'list_item_end' + }); } + + this.tokens.push({ + type: 'list_end' + }); + + continue; } // html diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index 6270c8608..4a56bc6c7 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/web/sass-files/sass/partials/_modal.scss @@ -3,6 +3,7 @@ } .modal-body { padding: 20px 15px; + overflow: auto; } .modal { width: 100%; @@ -47,9 +48,6 @@ margin-left: auto; margin-right: auto; } - .modal-body { - overflow: auto; - } .modal-push-down { margin-top: 5%; } @@ -195,21 +193,35 @@ width:100%; height: 100%; margin: 0 auto; + max-width: 100%; + + .modal-body { + @include clearfix; + height: 100%; + display: table; + table-layout: fixed; + width: 100%; + max-height: 100%; + } + .image-wrapper { position: relative; max-width: 90%; - min-height: 100px; - min-width: 320px; @include border-radius(3px); - display: table; - margin: 0 auto; + display: table-cell; + vertical-align: middle; + text-align: center; + width: 100%; + &:hover { @include border-radius(3px 3px 0 0); } + &.default { width: 100%; height: 80%; } + .modal-close { background: url("../images/close.png") no-repeat; @include background-size(100% 100%); @@ -225,24 +237,31 @@ transition: opacity 0.6s; cursor: pointer; z-index: 9999; + &.modal-close--show { @include opacity(1); } + } - > a { + + > div { + min-height: 100px; + min-width: 320px; background: #FFF; - display: table-cell; - vertical-align: middle; + display: inline-block; position: relative; &:hover .file-playback-controls.stop { @include opacity(1); } + } + img { max-width: 100%; max-height: 100%; } + .spinner.file__loading { z-index: 2; position: absolute; @@ -259,7 +278,6 @@ height: 100%; padding: 0; border: none; - display: table; } .image-body { vertical-align: middle; diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index da161e54f..ed1632681 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -374,9 +374,9 @@ body.ios { ul { margin: 0; padding: 0; - list-style: none; } + p { margin: 0 0 1em; line-height: 1.6em; @@ -603,6 +603,16 @@ body.ios { padding: 5px 0 0 20px; } + ul, ol { + li ul, li ol { + padding: 0 0 0 20px + } + + li input[type="checkbox"]:disabled { + vertical-align: sub; + cursor: default; + } + } } .post__link { diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 00fa7d817..5f5cca89b 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -621,8 +621,10 @@ .modal { .modal-image { .image-wrapper { - font-size: 12px; - min-width: 250px; + > div { + font-size: 12px; + min-width: 250px; + } .modal-close { @include opacity(1); } |