{serverError}
diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx
index 12d1af6ffb6..435c7d54201 100644
--- a/web/react/components/create_comment.jsx
+++ b/web/react/components/create_comment.jsx
@@ -13,8 +13,10 @@ const MsgTyping = require('./msg_typing.jsx');
const FileUpload = require('./file_upload.jsx');
const FilePreview = require('./file_preview.jsx');
const Utils = require('../utils/utils.jsx');
+
const Constants = require('../utils/constants.jsx');
const ActionTypes = Constants.ActionTypes;
+const KeyCodes = Constants.KeyCodes;
export default class CreateComment extends React.Component {
constructor(props) {
@@ -25,6 +27,7 @@ export default class CreateComment extends React.Component {
this.handleSubmit = this.handleSubmit.bind(this);
this.commentMsgKeyPress = this.commentMsgKeyPress.bind(this);
this.handleUserInput = this.handleUserInput.bind(this);
+ this.handleArrowUp = this.handleArrowUp.bind(this);
this.handleUploadStart = this.handleUploadStart.bind(this);
this.handleFileUploadComplete = this.handleFileUploadComplete.bind(this);
this.handleUploadError = this.handleUploadError.bind(this);
@@ -158,6 +161,26 @@ export default class CreateComment extends React.Component {
$('.post-right__scroll').perfectScrollbar('update');
this.setState({messageText: messageText});
}
+ handleArrowUp(e) {
+ if (e.keyCode === KeyCodes.UP && this.state.messageText === '') {
+ e.preventDefault();
+
+ const channelId = ChannelStore.getCurrentId();
+ const lastPost = PostStore.getCurrentUsersLatestPost(channelId, this.props.rootId);
+ if (!lastPost) {
+ return;
+ }
+
+ AppDispatcher.handleViewAction({
+ type: ActionTypes.RECIEVED_EDIT_POST,
+ refocusId: '#reply_textbox',
+ title: 'Comment',
+ message: lastPost.message,
+ postId: lastPost.id,
+ channelId: lastPost.channel_id
+ });
+ }
+ }
handleUploadStart(clientIds) {
let draft = PostStore.getCommentDraft(this.props.rootId);
@@ -290,6 +313,7 @@ export default class CreateComment extends React.Component {
);
+ playbackControls = (
+ 
+ );
+ playbackControls = '';
+ }
+
+ var thumbnail;
+ if (type === 'image') {
+ if (this.state.playing) {
+ thumbnail = (
+
this.playGif(e, filename)}
+ >
+ {"►"}
+
+ );
+ }
+ if (this.state.playing) {
+ loadedFile = (
+ this.stopGif(e, filename)}
+ >
+ {"■"}
+
+ );
+ }
+ if (this.state.loading) {
+ loadingIndicator = (
+
+ );
+ playbackControls = '';
+ }
+
+ var thumbnail;
+ if (type === 'image') {
+ if (this.state.playing) {
+ thumbnail = (
+
+ {playbackControls}
+ {loadedFile}
+
+ );
+ } else {
+ thumbnail = (
+
+ {loadingIndicator}
+ {playbackControls}
+ {loadedFile}
+
+ );
+ }
} else {
thumbnail = ;
}
@@ -119,7 +237,7 @@ export default class FileAttachment extends React.Component {
filename,
function success(data) {
if (this.canSetState) {
- this.setState({fileSize: parseInt(data.size, 10)});
+ this.setState({fileSize: parseInt(data.size, 10), mime: data.mime});
}
}.bind(this),
function error() {}
diff --git a/web/react/components/file_upload_overlay.jsx b/web/react/components/file_upload_overlay.jsx
index 4fcee6cb050..d991dd62520 100644
--- a/web/react/components/file_upload_overlay.jsx
+++ b/web/react/components/file_upload_overlay.jsx
@@ -12,9 +12,19 @@ export default class FileUploadOverlay extends React.Component {
return (
-
+ );
+ playbackControls = '';
+ }
+
// image files just show a preview of the file
content = (
+ {loadingIndicator}
+ {playbackControls}
} "${match}")
`,
+ value: ``,
originalText: match
});
diff --git a/web/react/utils/markdown.jsx b/web/react/utils/markdown.jsx
index 2813798d226..7a4e70054cd 100644
--- a/web/react/utils/markdown.jsx
+++ b/web/react/utils/markdown.jsx
@@ -11,6 +11,7 @@ export class MattermostMarkdownRenderer extends marked.Renderer {
super(options);
this.heading = this.heading.bind(this);
+ this.paragraph = this.paragraph.bind(this);
this.text = this.text.bind(this);
this.formattingOptions = formattingOptions;
@@ -53,11 +54,17 @@ export class MattermostMarkdownRenderer extends marked.Renderer {
}
paragraph(text) {
- if (this.formattingOptions.singleline) {
- return `
-
- Drop a file to upload it.
+
);
diff --git a/web/react/components/team_signup_url_page.jsx b/web/react/components/team_signup_url_page.jsx
index 67e4c9dd7a7..6d333aed674 100644
--- a/web/react/components/team_signup_url_page.jsx
+++ b/web/react/components/team_signup_url_page.jsx
@@ -40,10 +40,12 @@ export default class TeamSignupUrlPage extends React.Component {
return;
}
- for (let index = 0; index < Constants.RESERVED_TEAM_NAMES.length; index++) {
- if (cleanedName.indexOf(Constants.RESERVED_TEAM_NAMES[index]) === 0) {
- this.setState({nameError: 'URL is taken or contains a reserved word'});
- return;
+ if (global.window.mm_config.RestrictTeamNames === 'true') {
+ for (let index = 0; index < Constants.RESERVED_TEAM_NAMES.length; index++) {
+ if (cleanedName.indexOf(Constants.RESERVED_TEAM_NAMES[index]) === 0) {
+ this.setState({nameError: 'URL is taken or contains a reserved word'});
+ return;
+ }
}
}
diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx
index 766edf0acf4..92d7cd8356a 100644
--- a/web/react/components/view_image.jsx
+++ b/web/react/components/view_image.jsx
@@ -38,7 +38,10 @@ export default class ViewImageModal extends React.Component {
progress: progress,
images: {},
fileSizes: {},
- showFooter: false
+ fileMimes: {},
+ showFooter: false,
+ isPlaying: {},
+ isLoading: {}
};
}
handleNext(e) {
@@ -122,6 +125,36 @@ export default class ViewImageModal extends React.Component {
this.setState({loaded});
}
}
+ playGif(e, filename, fileUrl) {
+ var isLoading = this.state.isLoading;
+ var isPlaying = this.state.isPlaying;
+
+ isLoading[filename] = fileUrl;
+ this.setState({isLoading});
+
+ var img = new Image();
+ img.load(fileUrl);
+ img.onload = () => {
+ delete isLoading[filename];
+ isPlaying[filename] = fileUrl;
+ this.setState({isPlaying, isLoading});
+ };
+ img.onError = () => {
+ delete isLoading[filename];
+ this.setState({isLoading});
+ };
+
+ e.stopPropagation();
+ e.preventDefault();
+ }
+ stopGif(e, filename) {
+ var isPlaying = this.state.isPlaying;
+ delete isPlaying[filename];
+ this.setState({isPlaying});
+
+ e.stopPropagation();
+ e.preventDefault();
+ }
componentDidMount() {
$(window).on('keyup', this.handleKeyPress);
@@ -154,6 +187,10 @@ export default class ViewImageModal extends React.Component {
var fileType = Utils.getFileType(fileInfo.ext);
if (fileType === 'image') {
+ if (filename in this.state.isPlaying) {
+ return this.state.isPlaying[filename];
+ }
+
// This is a temporary patch to fix issue with old files using absolute paths
if (fileInfo.path.indexOf('/api/v1/files/get') !== -1) {
fileInfo.path = fileInfo.path.split('/api/v1/files/get')[1];
@@ -189,12 +226,62 @@ export default class ViewImageModal extends React.Component {
var fileType = Utils.getFileType(fileInfo.ext);
if (fileType === 'image') {
+ if (!(filename in this.state.fileMimes)) {
+ Client.getFileInfo(
+ filename,
+ (data) => {
+ if (this.canSetState) {
+ var fileMimes = this.state.fileMimes;
+ fileMimes[filename] = data.mime;
+ this.setState(fileMimes);
+ }
+ },
+ () => {}
+ );
+ }
+
+ var playbackControls = '';
+ if (this.state.fileMimes[filename] === 'image/gif' && !(filename in this.state.isLoading)) {
+ if (filename in this.state.isPlaying) {
+ playbackControls = (
+
+ 
+ {'Drop a file to upload it.'}
+ 
+ {'Drop a file to upload it.'}
+
this.stopGif(e, filename)}
+ >
+ {"■"}
+
+ );
+ } else {
+ playbackControls = (
+ this.playGif(e, filename, fileUrl)}
+ >
+ {"►"}
+
+ );
+ }
+ }
+
+ var loadingIndicator = '';
+ if (this.state.isLoading[filename] === fileUrl) {
+ loadingIndicator = (
+
+ );
+ playbackControls = '';
+ }
+
// image files just show a preview of the file
content = (
+ {loadingIndicator}
+ {playbackControls}
${text}
`; + let outText = text; + + if (!('emoticons' in this.options) || this.options.emoticon) { + outText = TextFormatting.doFormatEmoticons(text); } - return super.paragraph(text); + if (this.formattingOptions.singleline) { + return `${outText}
`; + } + + return super.paragraph(outText); } table(header, body) { diff --git a/web/react/utils/text_formatting.jsx b/web/react/utils/text_formatting.jsx index d79aeed68c7..5c2e68f1e65 100644 --- a/web/react/utils/text_formatting.jsx +++ b/web/react/utils/text_formatting.jsx @@ -69,6 +69,15 @@ export function doFormatText(text, options) { return output; } +export function doFormatEmoticons(text) { + const tokens = new Map(); + + let output = Emoticons.handleEmoticons(text, tokens); + output = replaceTokens(output, tokens); + + return output; +} + export function sanitizeHtml(text) { let output = text; diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index 53e32838426..c72c3f32c25 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -544,6 +544,7 @@ export function applyTheme(theme) { if (theme.buttonBg) { changeCss('.btn.btn-primary', 'background:' + theme.buttonBg, 1); changeCss('.btn.btn-primary:hover, .btn.btn-primary:active, .btn.btn-primary:focus', 'background:' + changeColor(theme.buttonBg, -0.25), 1); + changeCss('.file-playback-controls', 'color:' + changeColor(theme.buttonBg, -0.25), 1); } if (theme.buttonColor) { diff --git a/web/sass-files/sass/partials/_files.scss b/web/sass-files/sass/partials/_files.scss index 01057423db7..d3ab3b9f849 100644 --- a/web/sass-files/sass/partials/_files.scss +++ b/web/sass-files/sass/partials/_files.scss @@ -133,12 +133,34 @@ height: 100%; background-color: #FFF; background-repeat: no-repeat; + overflow: hidden; + position: relative; + text-align: center; &.small { background-position: center; } &.normal { background-position: top left; } + .spinner.file__loading { + position: absolute; + left: 50%; + margin-left: -16px; + top: 50%; + margin-top: -16px; + } + .file__loaded { + max-width: initial; + &.landscape, &.quadrat { + height: 100px; + } + &.portrait { + width: 120px; + } + } + &:hover .file-playback-controls.stop { + @include opacity(1); + } } .post-image__thumbnail { float: left; @@ -215,3 +237,20 @@ } } } + +.file-playback-controls { + position: absolute; + right: 5px; + bottom: 0; + font-size: 22px; + cursor: pointer; + z-index: 2; + -webkit-transition: opacity 0.6s; + -moz-transition: opacity 0.6s; + -o-transition: opacity 0.6s; + transition: opacity 0.6s; + + &.stop { + @include opacity(0); + } +} diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss index 5570b5ce437..1dcdbf3489d 100644 --- a/web/sass-files/sass/partials/_modal.scss +++ b/web/sass-files/sass/partials/_modal.scss @@ -228,11 +228,24 @@ background: #FFF; display: table-cell; vertical-align: middle; + 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; + left: 50%; + margin-left: -16px; + top: 50%; + margin-top: -16px; + } } .modal-content{ box-shadow: none; diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss index 0f3cc0ef668..6ecc0d96599 100644 --- a/web/sass-files/sass/partials/_post.scss +++ b/web/sass-files/sass/partials/_post.scss @@ -119,20 +119,52 @@ body.ios { background-color: rgba(0, 0, 0, 0.6); text-align: center; color: #FFF; - display: table; - font-size: 1.7em; + font-size: em(20px); font-weight: 600; z-index: 6; - > div { - display: table-cell; - vertical-align: middle; + &.right-file-overlay { + font-size: em(18px); + .overlay__circle { + width: 300px; + height: 300px; + margin: -150px 0 0 -150px; + } + .overlay__files { + margin: 60px auto 15px; + width: 150px; + } + } + + .overlay__circle { + background: #111; + background: rgba(black, 0.7); + width: 370px; + height: 370px; + margin: -185px 0 0 -185px; + @include border-radius(500px); + position: absolute; + top: 50%; + left: 50%; + } + + .overlay__files { + display: block; + margin: 75px auto 20px; + } + + .overlay__logo { + position: absolute; + left: 50%; + bottom: 30px; + margin-left: -50px; + @include opacity(0.3); } .fa { - display: block; - font-size: 2em; - margin: 0 0 0.3em; + display: inline-block; + font-size: 1.1em; + margin-right: 8px; } } diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss index 09ac2047cab..c8bb24f3aa5 100644 --- a/web/sass-files/sass/partials/_responsive.scss +++ b/web/sass-files/sass/partials/_responsive.scss @@ -199,9 +199,6 @@ } @media screen and (max-width: 960px) { - .center-file-overlay { - font-size: 1.5em; - } .post { .post-header .post-header-col.post-header__reply { .comment-icon__container__hide { @@ -278,8 +275,17 @@ display: block; } } - .center-file-overlay { - font-size: 1.3em; + .file-overlay { + font-size: em(18px); + .overlay__circle { + width: 300px; + height: 300px; + margin: -150px 0 0 -150px; + } + .overlay__files { + margin: 60px auto 15px; + width: 150px; + } } .date-separator, .new-separator { &.hovered--after { @@ -639,6 +645,9 @@ } &.has-close { .btn-close { + width: 40px; + text-align: center; + right: 0; display: block; @include opacity(0.5); } @@ -749,6 +758,10 @@ .post-comments { padding: 9px 21px 10px 10px !important; } + + .post-image__column .post__image .file-playback-controls.stop, .image-wrapper > a .file-playback-controls.stop { + @include opacity(1); + } } @media screen and (max-width: 640px) { .access-history__table { diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss index c4591d7b61e..bc53dc0e477 100644 --- a/web/sass-files/sass/partials/_settings.scss +++ b/web/sass-files/sass/partials/_settings.scss @@ -103,6 +103,9 @@ text-overflow: ellipsis; margin-bottom: 0; } + .input-group-addon { + background: transparent; + } .radio { label { font-weight: 600; diff --git a/web/static/images/filesOverlay.png b/web/static/images/filesOverlay.png new file mode 100644 index 00000000000..d24da762657 Binary files /dev/null and b/web/static/images/filesOverlay.png differ diff --git a/web/static/images/logoWhite.png b/web/static/images/logoWhite.png new file mode 100644 index 00000000000..11bbd463222 Binary files /dev/null and b/web/static/images/logoWhite.png differ