MM-1401 - Removing most inline styles and other UI changes

web/react/components/channel_header.jsx

@@ -53,12 +53,12 @@ var PopoverListMembers = React.createClass({
             });
 
             members.forEach(function(m) {
-                popoverHtml += "<div style='white-space: nowrap'>" + m.username + "</div>";
+                popoverHtml += "<div class='text--nowrap'>" + m.username + "</div>";
             });
         }
 
         return (
-            <div style={{cursor : "pointer"}} id="member_popover" data-toggle="popover" data-content={popoverHtml} data-original-title="Members" >
+            <div id="member_popover" data-toggle="popover" data-content={popoverHtml} data-original-title="Members" >
                 <div id="member_tooltip" data-toggle="tooltip" title="View Channel Members">
                     {count} <span className="glyphicon glyphicon-user" aria-hidden="true"></span>
                 </div>
@@ -200,11 +200,10 @@ module.exports = React.createClass({
                     <th><PopoverListMembers members={this.state.users} channelId={this.state.channel.id} /></th>
                     <th className="search-bar__container"><NavbarSearchBox /></th>
                     <th>
-                        <div className="dropdown" style={{marginLeft:5, marginRight:10}}>
+                        <div className="dropdown channel-header__links">
                             <a href="#" className="dropdown-toggle theme" type="button" id="channel_header_right_dropdown" data-toggle="dropdown" aria-expanded="true">
-                                <i className="fa fa-caret-down"></i>
+                                <span dangerouslySetInnerHTML={{__html: " <svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'width='4px' height='16px' viewBox='0 0 8 32' enable-background='new 0 0 8 32' xml:space='preserve'> <g> <circle cx='4' cy='4.062' r='4'/> <circle cx='4' cy='16' r='4'/> <circle cx='4' cy='28' r='4'/> </g> </svg>"}} /> </a>
-                            </a>
+                            <ul className="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="channel_header_right_dropdown">
-                            <ul className="dropdown-menu" role="menu" aria-labelledby="channel_header_right_dropdown" style={{left: "-150px"}}>
                                 <li role="presentation"><a role="menuitem" href="#" onClick={this.searchMentions}>Recent Mentions</a></li>
                             </ul>
                         </div>

web/react/components/edit_channel_modal.jsx

@@ -43,7 +43,7 @@ module.exports = React.createClass({
                     <h4 className="modal-title" ref="title">Edit {this.state.title} Description</h4>
                   </div>
                   <div className="modal-body">
-                    <textarea className="form-control" style={{resize: "none"}} rows="6" ref="channelDesc" maxLength="1024" value={this.state.description} onChange={this.handleUserInput}></textarea>
+                    <textarea className="form-control no-resize" rows="6" ref="channelDesc" maxLength="1024" value={this.state.description} onChange={this.handleUserInput}></textarea>
                   </div>
                   <div className="modal-footer">
                     <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>

web/react/components/get_link_modal.jsx

@@ -38,7 +38,7 @@ module.exports = React.createClass({
                         <div className="modal-body">
                           <p>{"The link below is used for open " + strings.TeamPlural + " or if you allowed your " + strings.Team + " members to sign up using their " + strings.Company + " email addresses."}
                           </p>
-                          <textarea className="form-control" style={{resize: "none"}} readOnly="true" value={this.state.value}></textarea>
+                          <textarea className="form-control no-resize" readOnly="true" value={this.state.value}></textarea>
                         </div>
                         <div className="modal-footer">
                           <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>

web/react/components/member_list_item.jsx

@@ -49,7 +49,7 @@ module.exports = React.createClass({
                         </div>
                     );
         } else {
-            invite = <div className="member-role text-capitalize" style={{marginRight: 15}}>{member.roles || 'Member'}</div>;
+            invite = <div className="member-role text-capitalize">{member.roles || 'Member'}<span className="caret hidden"></span></div>;
         }
 
         return (

web/react/components/member_list_team.jsx

@@ -59,7 +59,7 @@ var MemberListTeamItem = React.createClass({
         return {};
     },
     render: function() {
-        var server_error = this.state.server_error ? <div style={{ clear: "both" }} className="has-error"><label className='has-error control-label'>{this.state.server_error}</label></div> : null;
+        var server_error = this.state.server_error ? <div className="has-error"><label className='has-error control-label'>{this.state.server_error}</label></div> : null;
         var user = this.props.user;
         var currentRoles = "Member";
         var timestamp = UserStore.getCurrentUser().update_at;

web/react/components/new_channel.jsx

@@ -122,7 +122,7 @@ module.exports = React.createClass({
                                 </div>
                                 <div className="form-group">
                                     <label className='control-label'>Description</label>
-                                    <textarea className="form-control" style={{resize: "none"}} ref="channel_desc" rows="3" placeholder="Description" maxLength="1024"></textarea>
+                                    <textarea className="form-control no-resize" ref="channel_desc" rows="3" placeholder="Description" maxLength="1024"></textarea>
                                 </div>
                                 { server_error }
                             </form>

web/react/components/post_right.jsx

@@ -43,7 +43,7 @@ RhsHeaderPost = React.createClass({
         });
     },
     render: function() {
-        var back = this.props.fromSearch ? <a href="#" onClick={this.handleBack} style={{color:"black"}}>{"< "}</a> : "";
+        var back = this.props.fromSearch ? <a href="#" onClick={this.handleBack} className="sidebar--right__back"><i className="fa fa-chevron-left"></i></a> : "";
 
         return (
             <div className="sidebar--right__header">

web/react/components/sidebar_header.jsx

@@ -91,7 +91,7 @@ var NavbarDropdown = React.createClass({
             <ul className="nav navbar-nav navbar-right">
                 <li className="dropdown">
                     <a href="#" className="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
-                        <i className="dropdown__icon"></i>
+                        <span className="dropdown__icon" dangerouslySetInnerHTML={{__html: " <svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'width='4px' height='16px' viewBox='0 0 8 32' enable-background='new 0 0 8 32' xml:space='preserve'> <g> <circle cx='4' cy='4.062' r='4'/> <circle cx='4' cy='16' r='4'/> <circle cx='4' cy='28' r='4'/> </g> </svg>"}} />
                     </a>
                     <ul className="dropdown-menu" role="menu">
                         <li><a href="#" data-toggle="modal" data-target="#user_settings1">Account Settings</a></li>

web/react/components/user_profile.jsx

@@ -53,7 +53,7 @@ module.exports = React.createClass({
         var name = this.props.overwriteName ? this.props.overwriteName : this.state.profile.username;
 
 
-        var data_content = "<img style='margin: 10px' src='/api/v1/users/" + this.state.profile.id + "/image?time=" + this.state.profile.update_at + "' height='128' width='128' />";
+        var data_content = "<img class='user-popover__image' src='/api/v1/users/" + this.state.profile.id + "/image?time=" + this.state.profile.update_at + "' height='128' width='128' />";
         if (!config.ShowEmail) {
             data_content += "<div class='text-nowrap'>Email not shared</div>";
         } else {
@@ -61,7 +61,7 @@ module.exports = React.createClass({
         }
 
         return (
-            <div style={{"cursor" : "pointer", "display" : "inline-block"}} className="user-popover" id={"profile_" + this.uniqueId} data-toggle="popover" data-content={data_content} data-original-title={this.state.profile.username} >
+            <div className="user-popover" id={"profile_" + this.uniqueId} data-toggle="popover" data-content={data_content} data-original-title={this.state.profile.username} >
                 { name }
             </div>
         );

web/react/components/user_settings.jsx

@@ -560,7 +560,7 @@ var AuditTab = React.createClass({
                 <div className="user-settings">
                     <h3 className="tab-header">Activity Log</h3>
                     <div className="divider-dark first"/>
-                    <div className="table-responsive" style={{ maxWidth: "560px", maxHeight: "300px" }}>
+                    <div className="table-responsive">
                         <table className="table-condensed small">
                             <thead>
                                 <tr>
@@ -576,11 +576,11 @@ var AuditTab = React.createClass({
                                 this.state.audits.map(function(value, index) {
                                     return (
                                         <tr key={ "" + index }>
-                                            <td style={{ whiteSpace: "nowrap" }}>{ new Date(value.create_at).toLocaleString() }</td>
+                                            <td className="text-nowrap">{ new Date(value.create_at).toLocaleString() }</td>
-                                            <td style={{ whiteSpace: "nowrap" }}>{ value.action.replace("/api/v1", "") }</td>
+                                            <td className="text-nowrap">{ value.action.replace("/api/v1", "") }</td>
-                                            <td style={{ whiteSpace: "nowrap" }}>{ value.ip_address }</td>
+                                            <td className="text-nowrap">{ value.ip_address }</td>
-                                            <td style={{ whiteSpace: "nowrap" }}>{ value.session_id }</td>
+                                            <td className="text-nowrap">{ value.session_id }</td>
-                                            <td style={{ whiteSpace: "nowrap" }}>{ value.extra_info }</td>
+                                            <td className="text-nowrap">{ value.extra_info }</td>
                                         </tr>
                                     );
                                 }, this)

web/sass-files/sass/partials/_base.scss

@@ -10,6 +10,9 @@ body {
   height: 100%;
   &.white {
     background: #fff;
+    > .container-fluid {
+      overflow: auto;
+    }
     .inner__wrap {
       > .row.content {
         min-height: 100%;
@@ -53,6 +56,9 @@ div.theme {
 
 .form-control {
   @include border-radius(2px);
+  &.no-resize {
+    resize: none;
+  }
 }
 
 .form-group {
@@ -127,7 +133,7 @@ div.theme {
 }
 
 .glyphicon-refresh-animate {
-    @include animation(spin .7s infinite linear);
+  @include animation(spin .7s infinite linear);
 }
 
 .black-bg {

web/sass-files/sass/partials/_files.scss

@@ -32,6 +32,7 @@
     }
   }
   .preview-img {
+      display: block;
       height: auto;
       max-width: 100%;
   }

web/sass-files/sass/partials/_headers.scss

@@ -95,11 +95,7 @@
 				}
 			}
 			.dropdown__icon {
-				background: url("../images/dropdown-icon.png");
+				fill: #fff;
-				width: 4px;
-				height: 16px;
-				@include background-size(100% 100%);
-				display: inline-block;
 			}
 		}
 		.user__picture {
@@ -163,7 +159,7 @@
 	#member_popover {
 		width: 45px;
 		color: #999;
-
+		cursor: pointer;
 	}
 	&.alt {
 		margin: 0;
@@ -230,3 +226,21 @@
 		top: 1px;
 	}
 }
+
+.channel-header__links {
+	height: 32px;
+	vertical-align: top;
+	display: inline-block;
+	width: 15px;
+	margin: 9px 3px 3px 0;
+	&:hover {
+		svg {
+			fill: #888;
+		}
+	}
+	svg {
+		vertical-align: top;
+		margin-top: 8px;
+		fill: #AAA;
+	}
+}

web/sass-files/sass/partials/_modal.scss

@@ -154,6 +154,7 @@
 			background: #FFF;
 			position: relative;
 			max-width: 90%;
+			min-height: 50px;
 			min-width: 280px;
 			@include border-radius(3px);
 			display: table;

web/sass-files/sass/partials/_popover.scss

@@ -0,0 +1,9 @@
+.user-popover {
+	cursor: pointer;
+	display: inline-block;
+}
+
+.user-popover__image {
+	margin: 0 0 10px;
+	@include border-radius(128px);
+}

web/sass-files/sass/partials/_post.scss

@@ -425,4 +425,4 @@ body.ios {
 			width: 40px;
 		}
 	}
-}
+}

web/sass-files/sass/partials/_responsive.scss

@@ -413,7 +413,7 @@
         }
     }
     .footer, .footer-pane, .footer-push {
-        height: 185px;
+        height: auto;
     }
     .footer-pane {
         .footer-link {
@@ -574,6 +574,8 @@
     .modal {
         .modal-image {
             .image-wrapper {
+                font-size: 12px;
+                max-width: 280px;
                 .modal-close {
                     @include opacity(1);
                 }

web/sass-files/sass/partials/_settings.scss

@@ -1,6 +1,10 @@
 .user-settings {
     background: #fff;
     min-height:300px;
+    .table-responsive {
+        max-width: 560px;
+        max-height: 300px;
+    }
 }
 
 .settings-modal {

web/sass-files/sass/partials/_sidebar--right.scss

@@ -10,6 +10,14 @@
     &.move--left {
         right: 0;
     }
+    .sidebar--right__back {
+        color: #666;
+        width: 20px;
+        text-align: center;
+        margin: 0 0 0 -6px;
+        font-size: 12px;
+        display: inline-block;
+    }
     .sidebar-right__body {
         border-left: $border-gray;
         border-top: $border-gray;

web/sass-files/sass/styles.scss

@@ -15,6 +15,7 @@
 @import "partials/headers";
 @import "partials/footer";
 @import "partials/content";
+@import "partials/popover";
 @import "partials/post";
 @import "partials/post_right";
 @import "partials/navbar";
@@ -29,7 +30,7 @@
 @import "partials/modal";
 @import "partials/mentions";
 @import "partials/error";
-@import "partials/loading"; 
+@import "partials/loading";
 
 // Responsive Css
 @import "partials/responsive";