From 5a28562354d56590ec87cf0a1e9358cd1a70854a Mon Sep 17 00:00:00 2001
From: Tomi M <tomitm@gmail.com>
Date: Tue, 6 Oct 2015 20:02:39 -0700
Subject: PLT-445 Create About dialog

---
 web/react/components/about_build_modal.jsx         | 60 ++++++++++++++++++++++
 web/react/components/navbar_dropdown.jsx           |  9 ++++
 .../user_settings/user_settings_security.jsx       | 11 ----
 web/react/pages/channel.jsx                        |  6 +++
 web/templates/channel.html                         |  1 +
 5 files changed, 76 insertions(+), 11 deletions(-)
 create mode 100644 web/react/components/about_build_modal.jsx

(limited to 'web')

diff --git a/web/react/components/about_build_modal.jsx b/web/react/components/about_build_modal.jsx
new file mode 100644
index 000000000..87a58ba97
--- /dev/null
+++ b/web/react/components/about_build_modal.jsx
@@ -0,0 +1,60 @@
+// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+export default class AboutBuildModal extends React.Component {
+    render() {
+        const config = global.window.config;
+
+        return (
+            <div
+                className='modal fade'
+                ref='modal'
+                id='about_build'
+                tabIndex='-1'
+                role='dialog'
+                aria-hidden='true'
+            >
+               <div className='modal-dialog'>
+                  <div className='modal-content'>
+                    <div className='modal-header'>
+                      <button
+                          type='button'
+                          className='close'
+                          data-dismiss='modal'
+                          aria-label='Close'
+                      >
+                        <span aria-hidden='true'>&times;</span>
+                      </button>
+                      <h4
+                          className='modal-title'
+                      >
+                        <span className='name'>{`Mattermost ${config.Version}`}</span>
+                      </h4>
+                    </div>
+                    <div className='modal-body'>
+                      <div className='row form-group'>
+                        <div className='col-sm-3 info__label'>{'Build Number:'}</div>
+                        <div className='col-sm-9'>{config.BuildNumber}</div>
+                      </div>
+                      <div className='row form-group'>
+                        <div className='col-sm-3 info__label'>{'Build Date:'}</div>
+                        <div className='col-sm-9'>{config.BuildDate}</div>
+                      </div>
+                      <div className='row'>
+                        <div className='col-sm-3 info__label'>{'Build Hash:'}</div>
+                        <div className='col-sm-9'>{config.BuildHash}</div>
+                      </div>
+                    </div>
+                    <div className='modal-footer'>
+                      <button
+                          type='button'
+                          className='btn btn-default'
+                          data-dismiss='modal'
+                      >{'Close'}</button>
+                    </div>
+                  </div>
+               </div>
+            </div>
+        );
+    }
+}
diff --git a/web/react/components/navbar_dropdown.jsx b/web/react/components/navbar_dropdown.jsx
index 78057d10b..1adb0d8c6 100644
--- a/web/react/components/navbar_dropdown.jsx
+++ b/web/react/components/navbar_dropdown.jsx
@@ -223,6 +223,15 @@ export default class NavbarDropdown extends React.Component {
                                 {'Report a Problem'}
                             </a>
                         </li>
+                        <li>
+                            <a
+                                href='#'
+                                data-toggle='modal'
+                                data-target='#about_build'
+                            >
+                                {'About Mattermost'}
+                            </a>
+                        </li>
                     </ul>
                 </li>
             </ul>
diff --git a/web/react/components/user_settings/user_settings_security.jsx b/web/react/components/user_settings/user_settings_security.jsx
index b59c08af0..4ff4775a7 100644
--- a/web/react/components/user_settings/user_settings_security.jsx
+++ b/web/react/components/user_settings/user_settings_security.jsx
@@ -251,17 +251,6 @@ export default class SecurityTab extends React.Component {
                     <div className='divider-dark first'/>
                     {passwordSection}
                     <div className='divider-dark'/>
-                    <ul
-                        className='section-min'
-                    >
-                        <li className='col-sm-10 section-title'>{'Version ' + global.window.config.Version}</li>
-                        <li className='col-sm-7 section-describe'>
-                            <div className='text-nowrap'>{'Build Number: ' + global.window.config.BuildNumber}</div>
-                            <div className='text-nowrap'>{'Build Date: ' + global.window.config.BuildDate}</div>
-                            <div className='text-nowrap'>{'Build Hash: ' + global.window.config.BuildHash}</div>
-                        </li>
-                    </ul>
-                    <div className='divider-dark'/>
                     <br></br>
                     <a
                         data-toggle='modal'
diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx
index c333fd57d..3eed91366 100644
--- a/web/react/pages/channel.jsx
+++ b/web/react/pages/channel.jsx
@@ -30,6 +30,7 @@ var ErrorStore = require('../stores/error_store.jsx');
 var ChannelLoader = require('../components/channel_loader.jsx');
 var MentionList = require('../components/mention_list.jsx');
 var ChannelInfoModal = require('../components/channel_info_modal.jsx');
+var AboutBuildModal = require('../components/about_build_modal.jsx');
 var AccessHistoryModal = require('../components/access_history_modal.jsx');
 var ActivityLogModal = require('../components/activity_log_modal.jsx');
 var RemovedFromChannelModal = require('../components/removed_from_channel_modal.jsx');
@@ -150,6 +151,11 @@ function setupChannelPage(props) {
         document.getElementById('channel_info_modal')
     );
 
+    React.render(
+        <AboutBuildModal />,
+        document.getElementById('about_build_modal')
+    );
+
     React.render(
         <MoreChannelsModal />,
         document.getElementById('more_channels_modal')
diff --git a/web/templates/channel.html b/web/templates/channel.html
index 2af94e415..787a1e6a6 100644
--- a/web/templates/channel.html
+++ b/web/templates/channel.html
@@ -47,6 +47,7 @@
   <div id="team_members_modal"></div>
   <div id="direct_channel_modal"></div>
   <div id="channel_info_modal"></div>
+  <div id="about_build_modal"></div>
   <div id="access_history_modal"></div>
   <div id="activity_log_modal"></div>
   <div id="removed_from_channel_modal"></div>
-- 
cgit v1.2.3-1-g7c22


From e7eca9a9ed990818ef0081078139a967078b8a80 Mon Sep 17 00:00:00 2001
From: Tomi M <tomitm@gmail.com>
Date: Wed, 7 Oct 2015 16:25:47 -0700
Subject: Use ReactBootstrap.Modal instead.

---
 web/react/components/about_build_modal.jsx | 84 +++++++++++++++---------------
 web/react/components/navbar_dropdown.jsx   | 17 +++++-
 web/react/pages/channel.jsx                |  6 ---
 web/templates/channel.html                 |  1 -
 4 files changed, 58 insertions(+), 50 deletions(-)

(limited to 'web')

diff --git a/web/react/components/about_build_modal.jsx b/web/react/components/about_build_modal.jsx
index 87a58ba97..d582f6bc8 100644
--- a/web/react/components/about_build_modal.jsx
+++ b/web/react/components/about_build_modal.jsx
@@ -1,60 +1,62 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+var Modal = ReactBootstrap.Modal;
+
 export default class AboutBuildModal extends React.Component {
+    constructor(props) {
+        super(props);
+        this.doHide = this.doHide.bind(this);
+    }
+
+    doHide() {
+        this.props.onModalDismissed();
+    }
+
     render() {
         const config = global.window.config;
 
         return (
-            <div
-                className='modal fade'
-                ref='modal'
-                id='about_build'
-                tabIndex='-1'
-                role='dialog'
-                aria-hidden='true'
+            <Modal
+                show={this.props.show}
+                onHide={this.doHide}
             >
-               <div className='modal-dialog'>
-                  <div className='modal-content'>
-                    <div className='modal-header'>
-                      <button
-                          type='button'
-                          className='close'
-                          data-dismiss='modal'
-                          aria-label='Close'
-                      >
-                        <span aria-hidden='true'>&times;</span>
-                      </button>
-                      <h4
-                          className='modal-title'
-                      >
-                        <span className='name'>{`Mattermost ${config.Version}`}</span>
-                      </h4>
-                    </div>
-                    <div className='modal-body'>
-                      <div className='row form-group'>
+                <Modal.Header closeButton={true}>
+                    <Modal.Title>{`Mattermost ${config.Version}`}</Modal.Title>
+                </Modal.Header>
+                <Modal.Body>
+                    <div className='row form-group'>
                         <div className='col-sm-3 info__label'>{'Build Number:'}</div>
                         <div className='col-sm-9'>{config.BuildNumber}</div>
-                      </div>
-                      <div className='row form-group'>
+                    </div>
+                    <div className='row form-group'>
                         <div className='col-sm-3 info__label'>{'Build Date:'}</div>
                         <div className='col-sm-9'>{config.BuildDate}</div>
-                      </div>
-                      <div className='row'>
+                    </div>
+                    <div className='row'>
                         <div className='col-sm-3 info__label'>{'Build Hash:'}</div>
                         <div className='col-sm-9'>{config.BuildHash}</div>
-                      </div>
-                    </div>
-                    <div className='modal-footer'>
-                      <button
-                          type='button'
-                          className='btn btn-default'
-                          data-dismiss='modal'
-                      >{'Close'}</button>
                     </div>
-                  </div>
-               </div>
-            </div>
+                </Modal.Body>
+                <Modal.Footer>
+                    <button
+                        type='button'
+                        className='btn btn-default'
+                        onClick={this.doHide}
+                    >
+                        {'Close'}
+                    </button>
+                </Modal.Footer>
+            </Modal>
         );
     }
 }
+
+AboutBuildModal.defaultProps = {
+    show: false
+};
+
+AboutBuildModal.propTypes = {
+    show: React.PropTypes.bool.isRequired,
+    onModalDismissed: React.PropTypes.func.isRequired
+};
\ No newline at end of file
diff --git a/web/react/components/navbar_dropdown.jsx b/web/react/components/navbar_dropdown.jsx
index 1adb0d8c6..b90ce4170 100644
--- a/web/react/components/navbar_dropdown.jsx
+++ b/web/react/components/navbar_dropdown.jsx
@@ -6,6 +6,8 @@ var client = require('../utils/client.jsx');
 var UserStore = require('../stores/user_store.jsx');
 var TeamStore = require('../stores/team_store.jsx');
 
+var AboutBuildModal = require('./about_build_modal.jsx');
+
 var Constants = require('../utils/constants.jsx');
 
 function getStateFromStores() {
@@ -18,7 +20,9 @@ export default class NavbarDropdown extends React.Component {
         this.blockToggle = false;
 
         this.handleLogoutClick = this.handleLogoutClick.bind(this);
+        this.handleAboutModal = this.handleAboutModal.bind(this);
         this.onListenerChange = this.onListenerChange.bind(this);
+        this.aboutModalDismissed = this.aboutModalDismissed.bind(this);
 
         this.state = getStateFromStores();
     }
@@ -26,6 +30,12 @@ export default class NavbarDropdown extends React.Component {
         e.preventDefault();
         client.logout();
     }
+    handleAboutModal() {
+        this.setState({showAboutModal: true});
+    }
+    aboutModalDismissed() {
+        this.setState({showAboutModal: false});
+    }
     componentDidMount() {
         UserStore.addTeamsChangeListener(this.onListenerChange);
         TeamStore.addChangeListener(this.onListenerChange);
@@ -226,12 +236,15 @@ export default class NavbarDropdown extends React.Component {
                         <li>
                             <a
                                 href='#'
-                                data-toggle='modal'
-                                data-target='#about_build'
+                                onClick={this.handleAboutModal}
                             >
                                 {'About Mattermost'}
                             </a>
                         </li>
+                        <AboutBuildModal
+                            show={this.state.showAboutModal}
+                            onModalDismissed={this.aboutModalDismissed}
+                        />
                     </ul>
                 </li>
             </ul>
diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx
index 3eed91366..c333fd57d 100644
--- a/web/react/pages/channel.jsx
+++ b/web/react/pages/channel.jsx
@@ -30,7 +30,6 @@ var ErrorStore = require('../stores/error_store.jsx');
 var ChannelLoader = require('../components/channel_loader.jsx');
 var MentionList = require('../components/mention_list.jsx');
 var ChannelInfoModal = require('../components/channel_info_modal.jsx');
-var AboutBuildModal = require('../components/about_build_modal.jsx');
 var AccessHistoryModal = require('../components/access_history_modal.jsx');
 var ActivityLogModal = require('../components/activity_log_modal.jsx');
 var RemovedFromChannelModal = require('../components/removed_from_channel_modal.jsx');
@@ -151,11 +150,6 @@ function setupChannelPage(props) {
         document.getElementById('channel_info_modal')
     );
 
-    React.render(
-        <AboutBuildModal />,
-        document.getElementById('about_build_modal')
-    );
-
     React.render(
         <MoreChannelsModal />,
         document.getElementById('more_channels_modal')
diff --git a/web/templates/channel.html b/web/templates/channel.html
index 787a1e6a6..2af94e415 100644
--- a/web/templates/channel.html
+++ b/web/templates/channel.html
@@ -47,7 +47,6 @@
   <div id="team_members_modal"></div>
   <div id="direct_channel_modal"></div>
   <div id="channel_info_modal"></div>
-  <div id="about_build_modal"></div>
   <div id="access_history_modal"></div>
   <div id="activity_log_modal"></div>
   <div id="removed_from_channel_modal"></div>
-- 
cgit v1.2.3-1-g7c22