summaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
Diffstat (limited to 'web')
-rw-r--r--web/react/components/access_history_modal.jsx100
-rw-r--r--web/react/components/activity_log_modal.jsx116
-rw-r--r--web/react/components/post_list.jsx18
-rw-r--r--web/react/components/post_right.jsx1
-rw-r--r--web/react/components/sidebar_header.jsx4
-rw-r--r--web/react/components/user_settings.jsx172
-rw-r--r--web/react/components/user_settings_modal.jsx2
-rw-r--r--web/react/pages/channel.jsx12
-rw-r--r--web/sass-files/sass/partials/_access-history.scss29
-rw-r--r--web/sass-files/sass/partials/_activity-log.scss31
-rw-r--r--web/sass-files/sass/partials/_headers.scss15
-rw-r--r--web/sass-files/sass/partials/_responsive.scss46
-rw-r--r--web/sass-files/sass/partials/_settings.scss11
-rw-r--r--web/templates/channel.html2
14 files changed, 379 insertions, 180 deletions
diff --git a/web/react/components/access_history_modal.jsx b/web/react/components/access_history_modal.jsx
new file mode 100644
index 000000000..b23b3213f
--- /dev/null
+++ b/web/react/components/access_history_modal.jsx
@@ -0,0 +1,100 @@
+// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+var UserStore = require('../stores/user_store.jsx');
+var AsyncClient = require('../utils/async_client.jsx');
+var Utils = require('../utils/utils.jsx');
+
+function getStateFromStoresForAudits() {
+ return {
+ audits: UserStore.getAudits()
+ };
+}
+
+module.exports = React.createClass({
+ componentDidMount: function() {
+ UserStore.addAuditsChangeListener(this._onChange);
+ AsyncClient.getAudits();
+
+ var self = this;
+ $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) {
+ self.setState({ moreInfo: [] });
+ });
+ },
+ componentWillUnmount: function() {
+ UserStore.removeAuditsChangeListener(this._onChange);
+ },
+ _onChange: function() {
+ this.setState(getStateFromStoresForAudits());
+ },
+ handleMoreInfo: function(index) {
+ var newMoreInfo = this.state.moreInfo;
+ newMoreInfo[index] = true;
+ this.setState({ moreInfo: newMoreInfo });
+ },
+ getInitialState: function() {
+ var initialState = getStateFromStoresForAudits();
+ initialState.moreInfo = [];
+ return initialState;
+ },
+ render: function() {
+ var accessList = [];
+ var currentHistoryDate = null;
+
+ for (var i = 0; i < this.state.audits.length; i++) {
+ var currentAudit = this.state.audits[i];
+ var newHistoryDate = new Date(currentAudit.create_at);
+ var newDate = null;
+
+ if (!currentHistoryDate || currentHistoryDate.toLocaleDateString() !== newHistoryDate.toLocaleDateString()) {
+ currentHistoryDate = newHistoryDate;
+ newDate = (<div> {currentHistoryDate.toDateString()} </div>);
+ }
+
+ accessList[i] = (
+ <div className="access-history__table">
+ <div className="access__date">{newDate}</div>
+ <div className="access__report">
+ <div className="report__time">{newHistoryDate.toLocaleTimeString(navigator.language, {hour: '2-digit', minute:'2-digit'})}</div>
+ <div className="report__info">
+ <div>{"IP: " + currentAudit.ip_address}</div>
+ { this.state.moreInfo[i] ?
+ <div>
+ <div>{"Session ID: " + currentAudit.session_id}</div>
+ <div>{"URL: " + currentAudit.action.replace("/api/v1", "")}</div>
+ </div>
+ :
+ <a href="#" onClick={this.handleMoreInfo.bind(this, i)}>More info</a>
+ }
+ </div>
+ {i < this.state.audits.length - 1 ?
+ <div className="divider-light"/>
+ :
+ null
+ }
+ </div>
+ </div>
+ );
+ }
+
+ return (
+ <div>
+ <div className="modal fade" ref="modal" id="access-history" tabIndex="-1" role="dialog" aria-hidden="true">
+ <div className="modal-dialog modal-lg">
+ <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" id="myModalLabel">Access History</h4>
+ </div>
+ <div ref="modalBody" className="modal-body">
+ <form role="form">
+ { accessList }
+ </form>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+ }
+});
diff --git a/web/react/components/activity_log_modal.jsx b/web/react/components/activity_log_modal.jsx
new file mode 100644
index 000000000..d6f8f40eb
--- /dev/null
+++ b/web/react/components/activity_log_modal.jsx
@@ -0,0 +1,116 @@
+// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+var UserStore = require('../stores/user_store.jsx');
+var Client = require('../utils/client.jsx');
+var AsyncClient = require('../utils/async_client.jsx');
+
+function getStateFromStoresForSessions() {
+ return {
+ sessions: UserStore.getSessions(),
+ server_error: null,
+ client_error: null
+ };
+}
+
+module.exports = React.createClass({
+ submitRevoke: function(altId) {
+ var self = this;
+ Client.revokeSession(altId,
+ function(data) {
+ AsyncClient.getSessions();
+ }.bind(this),
+ function(err) {
+ state = getStateFromStoresForSessions();
+ state.server_error = err;
+ this.setState(state);
+ }.bind(this)
+ );
+ },
+ componentDidMount: function() {
+ UserStore.addSessionsChangeListener(this._onChange);
+ AsyncClient.getSessions();
+
+ var self = this;
+ $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) {
+ self.setState({ moreInfo: [] });
+ });
+ },
+ componentWillUnmount: function() {
+ UserStore.removeSessionsChangeListener(this._onChange);
+ },
+ _onChange: function() {
+ this.setState(getStateFromStoresForSessions());
+ },
+ handleMoreInfo: function(index) {
+ var newMoreInfo = this.state.moreInfo;
+ newMoreInfo[index] = true;
+ this.setState({ moreInfo: newMoreInfo });
+ },
+ getInitialState: function() {
+ var initialState = getStateFromStoresForSessions();
+ initialState.moreInfo = [];
+ return initialState;
+ },
+ render: function() {
+ var activityList = [];
+ var server_error = this.state.server_error ? this.state.server_error : null;
+
+ for (var i = 0; i < this.state.sessions.length; i++) {
+ var currentSession = this.state.sessions[i];
+ var lastAccessTime = new Date(currentSession.last_activity_at);
+ var firstAccessTime = new Date(currentSession.create_at);
+ var devicePicture = "";
+
+ if (currentSession.props.platform === "Windows") {
+ devicePicture = "fa fa-windows";
+ }
+ else if (currentSession.props.platform === "Macintosh" || currentSession.props.platform === "iPhone") {
+ devicePicture = "fa fa-apple";
+ }
+
+ activityList[i] = (
+ <div className="activity-log__table">
+ <div className="activity-log__report">
+ <div className="report__platform"><i className={devicePicture} />{currentSession.props.platform}</div>
+ <div className="report__info">
+ <div>{"Last activity: " + lastAccessTime.toDateString() + ", " + lastAccessTime.toLocaleTimeString()}</div>
+ { this.state.moreInfo[i] ?
+ <div>
+ <div>{"First time active: " + firstAccessTime.toDateString() + ", " + lastAccessTime.toLocaleTimeString()}</div>
+ <div>{"OS: " + currentSession.props.os}</div>
+ <div>{"Browser: " + currentSession.props.browser}</div>
+ <div>{"Session ID: " + currentSession.alt_id}</div>
+ </div>
+ :
+ <a href="#" onClick={this.handleMoreInfo.bind(this, i)}>More info</a>
+ }
+ </div>
+ </div>
+ <div className="activity-log__action"><button onClick={this.submitRevoke.bind(this, currentSession.alt_id)} className="btn btn-primary">Logout</button></div>
+ </div>
+ );
+ }
+
+ return (
+ <div>
+ <div className="modal fade" ref="modal" id="activity-log" tabIndex="-1" role="dialog" aria-hidden="true">
+ <div className="modal-dialog modal-lg">
+ <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" id="myModalLabel">Active Devices</h4>
+ </div>
+ <div ref="modalBody" className="modal-body">
+ <form role="form">
+ { activityList }
+ </form>
+ { server_error }
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+ }
+});
diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx
index a2b2ae03f..7c5d36593 100644
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -348,8 +348,8 @@ module.exports = React.createClass({
if (ChannelStore.isDefault(channel)) {
more_messages = (
<div className="channel-intro">
- <h4 className="channel-intro-title">Welcome</h4>
- <p>
+ <h4 className="channel-intro__title">Beginning of {ui_name}</h4>
+ <p className="channel-intro__content">
Welcome to {ui_name}!
<br/><br/>
{"This is the first channel " + strings.Team + "mates see when they"}
@@ -366,27 +366,27 @@ module.exports = React.createClass({
} else if (channel.name === Constants.OFFTOPIC_CHANNEL) {
more_messages = (
<div className="channel-intro">
- <h4 className="channel-intro-title">Welcome</h4>
- <p>
+ <h4 className="channel-intro__title">Beginning of {ui_name}</h4>
+ <p className="channel-intro__content">
{"This is the start of " + ui_name + ", a channel for conversations you’d prefer out of more focused channels."}
<br/>
- <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={ui_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a>
</p>
+ <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={ui_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a>
</div>
);
} else {
var ui_type = channel.type === 'P' ? "private group" : "channel";
more_messages = (
<div className="channel-intro">
- <h4 className="channel-intro-title">Welcome</h4>
- <p>
+ <h4 className="channel-intro__title">Beginning of {ui_name}</h4>
+ <p className="channel-intro__content">
{ creator_name != "" ? "This is the start of the " + ui_name + " " + ui_type + ", created by " + creator_name + " on " + utils.displayDate(channel.create_at) + "."
: "This is the start of the " + ui_name + " " + ui_type + ", created on "+ utils.displayDate(channel.create_at) + "." }
{ channel.type === 'P' ? " Only invited members can see this private group." : " Any member can join and read this channel." }
<br/>
- <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a>
- <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#channel_invite"><i className="fa fa-user-plus"></i>Invite others to this {ui_type}</a>
</p>
+ <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a>
+ <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#channel_invite"><i className="fa fa-user-plus"></i>Invite others to this {ui_type}</a>
</div>
);
}
diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx
index 7315266e6..3a5be4e08 100644
--- a/web/react/components/post_right.jsx
+++ b/web/react/components/post_right.jsx
@@ -351,6 +351,7 @@ module.exports = React.createClass({
$(".post-right__scroll").css("height", height + "px");
$(".post-right__scroll").scrollTop(100000);
$(".post-right__scroll").perfectScrollbar();
+ $(".post-right__scroll").perfectScrollbar('update');
},
render: function() {
diff --git a/web/react/components/sidebar_header.jsx b/web/react/components/sidebar_header.jsx
index bab2897b6..7a7e92854 100644
--- a/web/react/components/sidebar_header.jsx
+++ b/web/react/components/sidebar_header.jsx
@@ -115,7 +115,11 @@ module.exports = React.createClass({
return (
<div className="team__header theme">
<a className="settings_link" href="#" data-toggle="modal" data-target="#user_settings1">
+ { me.last_picture_update ?
<img className="user__picture" src={"/api/v1/users/" + me.id + "/image?time=" + me.update_at} />
+ :
+ <div />
+ }
<div className="header__info">
<div className="user__name">{ '@' + me.username}</div>
<div className="team__name">{ teamDisplayName }</div>
diff --git a/web/react/components/user_settings.jsx b/web/react/components/user_settings.jsx
index 59c97c309..ad890334e 100644
--- a/web/react/components/user_settings.jsx
+++ b/web/react/components/user_settings.jsx
@@ -5,6 +5,8 @@ var UserStore = require('../stores/user_store.jsx');
var SettingItemMin = require('./setting_item_min.jsx');
var SettingItemMax = require('./setting_item_max.jsx');
var SettingPicture = require('./setting_picture.jsx');
+var AccessHistoryModal = require('./access_history_modal.jsx');
+var ActivityLogModal = require('./activity_log_modal.jsx');
var client = require('../utils/client.jsx');
var AsyncClient = require('../utils/async_client.jsx');
var utils = require('../utils/utils.jsx');
@@ -443,149 +445,6 @@ var NotificationsTab = React.createClass({
}
});
-function getStateFromStoresForSessions() {
- return {
- sessions: UserStore.getSessions(),
- server_error: null,
- client_error: null
- };
-}
-
-var SessionsTab = React.createClass({
- submitRevoke: function(altId) {
- client.revokeSession(altId,
- function(data) {
- AsyncClient.getSessions();
- }.bind(this),
- function(err) {
- state = this.getStateFromStoresForSessions();
- state.server_error = err;
- this.setState(state);
- }.bind(this)
- );
- },
- componentDidMount: function() {
- UserStore.addSessionsChangeListener(this._onChange);
- AsyncClient.getSessions();
- },
- componentWillUnmount: function() {
- UserStore.removeSessionsChangeListener(this._onChange);
- },
- _onChange: function() {
- this.setState(getStateFromStoresForSessions());
- },
- getInitialState: function() {
- return getStateFromStoresForSessions();
- },
- render: function() {
- var server_error = this.state.server_error ? this.state.server_error : null;
-
- return (
- <div>
- <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" ref="title"><i className="modal-back"></i>Sessions</h4>
- </div>
- <div className="user-settings">
- <h3 className="tab-header">Sessions</h3>
- <div className="divider-dark first"/>
- { server_error }
- <div className="table-responsive" style={{ maxWidth: "560px", maxHeight: "300px" }}>
- <table className="table-condensed small">
- <thead>
- <tr><th>Id</th><th>Platform</th><th>OS</th><th>Browser</th><th>Created</th><th>Last Activity</th><th>Revoke</th></tr>
- </thead>
- <tbody>
- {
- this.state.sessions.map(function(value, index) {
- return (
- <tr key={ "" + index }>
- <td style={{ whiteSpace: "nowrap" }}>{ value.alt_id }</td>
- <td style={{ whiteSpace: "nowrap" }}>{value.props.platform}</td>
- <td style={{ whiteSpace: "nowrap" }}>{value.props.os}</td>
- <td style={{ whiteSpace: "nowrap" }}>{value.props.browser}</td>
- <td style={{ whiteSpace: "nowrap" }}>{ new Date(value.create_at).toLocaleString() }</td>
- <td style={{ whiteSpace: "nowrap" }}>{ new Date(value.last_activity_at).toLocaleString() }</td>
- <td><button onClick={this.submitRevoke.bind(this, value.alt_id)} className="pull-right btn btn-primary">Revoke</button></td>
- </tr>
- );
- }, this)
- }
- </tbody>
- </table>
- </div>
- <div className="divider-dark"/>
- </div>
- </div>
- );
- }
-});
-
-function getStateFromStoresForAudits() {
- return {
- audits: UserStore.getAudits()
- };
-}
-
-var AuditTab = React.createClass({
- componentDidMount: function() {
- UserStore.addAuditsChangeListener(this._onChange);
- AsyncClient.getAudits();
- },
- componentWillUnmount: function() {
- UserStore.removeAuditsChangeListener(this._onChange);
- },
- _onChange: function() {
- this.setState(getStateFromStoresForAudits());
- },
- getInitialState: function() {
- return getStateFromStoresForAudits();
- },
- render: function() {
- return (
- <div>
- <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" ref="title"><i className="modal-back"></i>Activity Log</h4>
- </div>
- <div className="user-settings">
- <h3 className="tab-header">Activity Log</h3>
- <div className="divider-dark first"/>
- <div className="table-responsive">
- <table className="table-condensed small">
- <thead>
- <tr>
- <th>Time</th>
- <th>Action</th>
- <th>IP Address</th>
- <th>Session</th>
- <th>Other Info</th>
- </tr>
- </thead>
- <tbody>
- {
- this.state.audits.map(function(value, index) {
- return (
- <tr key={ "" + index }>
- <td className="text-nowrap">{ new Date(value.create_at).toLocaleString() }</td>
- <td className="text-nowrap">{ value.action.replace("/api/v1", "") }</td>
- <td className="text-nowrap">{ value.ip_address }</td>
- <td className="text-nowrap">{ value.session_id }</td>
- <td className="text-nowrap">{ value.extra_info }</td>
- </tr>
- );
- }, this)
- }
- </tbody>
- </table>
- </div>
- <div className="divider-dark"/>
- </div>
- </div>
- );
- }
-});
-
var SecurityTab = React.createClass({
submitPassword: function(e) {
e.preventDefault();
@@ -637,6 +496,12 @@ var SecurityTab = React.createClass({
updateConfirmPassword: function(e) {
this.setState({ confirm_password: e.target.value });
},
+ handleHistoryOpen: function() {
+ $("#user_settings1").modal('hide');
+ },
+ handleDevicesOpen: function() {
+ $("#user_settings1").modal('hide');
+ },
getInitialState: function() {
return { current_password: '', new_password: '', confirm_password: '' };
},
@@ -711,6 +576,10 @@ var SecurityTab = React.createClass({
<div className="divider-dark first"/>
{ passwordSection }
<div className="divider-dark"/>
+ <br></br>
+ <a data-toggle="modal" className="security-links" data-target="#access-history" href="#" onClick={this.handleHistoryOpen}><i className="fa fa-clock-o"></i>View Access History</a>
+ <b> </b>
+ <a data-toggle="modal" className="security-links" data-target="#activity-log" href="#" onClick={this.handleDevicesOpen}><i className="fa fa-globe"></i>View and Logout of Active Devices</a>
</div>
</div>
);
@@ -1225,23 +1094,6 @@ module.exports = React.createClass({
<NotificationsTab user={this.state.user} activeSection={this.props.activeSection} updateSection={this.props.updateSection} />
</div>
);
-
- /* Temporarily removing sessions and activity_log tabs
-
- } else if (this.props.activeTab === 'sessions') {
- return (
- <div>
- <SessionsTab activeSection={this.props.activeSection} updateSection={this.props.updateSection} />
- </div>
- );
- } else if (this.props.activeTab === 'activity_log') {
- return (
- <div>
- <AuditTab activeSection={this.props.activeSection} updateSection={this.props.updateSection} />
- </div>
- );
- */
-
} else if (this.props.activeTab === 'appearance') {
return (
<div>
diff --git a/web/react/components/user_settings_modal.jsx b/web/react/components/user_settings_modal.jsx
index 1761e575a..421027244 100644
--- a/web/react/components/user_settings_modal.jsx
+++ b/web/react/components/user_settings_modal.jsx
@@ -30,8 +30,6 @@ module.exports = React.createClass({
tabs.push({name: "security", ui_name: "Security", icon: "glyphicon glyphicon-lock"});
tabs.push({name: "notifications", ui_name: "Notifications", icon: "glyphicon glyphicon-exclamation-sign"});
tabs.push({name: "appearance", ui_name: "Appearance", icon: "glyphicon glyphicon-wrench"});
- //tabs.push({name: "sessions", ui_name: "Sessions", icon: "glyphicon glyphicon-globe"});
- //tabs.push({name: "activity_log", ui_name: "Activity Log", icon: "glyphicon glyphicon-time"});
return (
<div className="modal fade" ref="modal" id="user_settings1" role="dialog" aria-hidden="true">
diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx
index f70d60e3a..cc78df120 100644
--- a/web/react/pages/channel.jsx
+++ b/web/react/pages/channel.jsx
@@ -32,6 +32,8 @@ var ErrorBar = require('../components/error_bar.jsx')
var ChannelLoader = require('../components/channel_loader.jsx');
var MentionList = require('../components/mention_list.jsx');
var ChannelInfoModal = require('../components/channel_info_modal.jsx');
+var AccessHistoryModal = require('../components/access_history_modal.jsx');
+var ActivityLogModal = require('../components/activity_log_modal.jsx');
var Constants = require('../utils/constants.jsx');
@@ -205,4 +207,14 @@ global.window.setup_channel_page = function(team_name, team_type, team_id, chann
document.getElementById('edit_mention_tab')
);
+ React.render(
+ <AccessHistoryModal />,
+ document.getElementById('access_history_modal')
+ );
+
+ React.render(
+ <ActivityLogModal />,
+ document.getElementById('activity_log_modal')
+ );
+
};
diff --git a/web/sass-files/sass/partials/_access-history.scss b/web/sass-files/sass/partials/_access-history.scss
new file mode 100644
index 000000000..f54c9a122
--- /dev/null
+++ b/web/sass-files/sass/partials/_access-history.scss
@@ -0,0 +1,29 @@
+.access-history__table {
+ display: table;
+ width: 100%;
+ padding-top: 15px;
+ line-height: 1.6;
+ &:first-child {
+ padding: 0;
+ }
+ > div {
+ display: table-cell;
+ vertical-align: top;
+ }
+ .access__date {
+ font-weight: 600;
+ font-size: 16px;
+ width: 190px;
+ }
+ .access__report {
+ border-bottom: 1px solid #ddd;
+ padding-bottom: 15px;
+ }
+ .report__time {
+ font-weight: 600;
+ font-size: 16px;
+ }
+ .report__info {
+ color: #999;
+ }
+} \ No newline at end of file
diff --git a/web/sass-files/sass/partials/_activity-log.scss b/web/sass-files/sass/partials/_activity-log.scss
new file mode 100644
index 000000000..36eb48750
--- /dev/null
+++ b/web/sass-files/sass/partials/_activity-log.scss
@@ -0,0 +1,31 @@
+.activity-log__table {
+ display: table;
+ width: 100%;
+ line-height: 1.8;
+ border-top: 1px solid #DDD;
+ padding: 15px 0;
+ &:first-child {
+ padding-top: 0;
+ border: none;
+ }
+ > div {
+ display: table-cell;
+ vertical-align: top;
+ }
+ .activity-log__report {
+ width: 80%;
+ }
+ .activity-log__action {
+ text-align: right;
+ }
+ .report__platform {
+ font-size: 16px;
+ font-weight: 600;
+ .fa {
+ margin-right: 6px;
+ }
+ }
+ .report__info {
+ color: #999;
+ }
+} \ No newline at end of file
diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss
index adeaa70d7..eab4becac 100644
--- a/web/sass-files/sass/partials/_headers.scss
+++ b/web/sass-files/sass/partials/_headers.scss
@@ -44,14 +44,16 @@
white-space: normal;
}
}
+
}
.channel-intro {
padding-bottom:5px;
margin: 0 1em 35px;
+ max-width: 850px;
border-bottom: 1px solid lightgrey;
.intro-links {
- margin: 0.5em 1.5em 0 0;
+ margin: 0 1.5em 10px 0;
display: inline-block;
.fa {
margin-right: 5px;
@@ -64,8 +66,15 @@
.channel-intro-img {
float:left;
}
- .channel-intro-title {
+ .channel-intro__title {
font-weight:600;
+ font-size: 20px;
+ margin-bottom: 15px;
+ }
+ .channel-intro__content {
+ background: #f7f7f7;
+ padding: 10px 15px;
+ @include border-radius(3px);
}
.channel-intro-text {
margin-top:35px;
@@ -106,9 +115,9 @@
height: 36px;
float: left;
@include border-radius(36px);
+ margin-right: 6px;
}
.header__info {
- padding-left: 42px;
color: #fff;
}
.team__name, .user__name {
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index b3d3cd7ea..d8a8fd982 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/web/sass-files/sass/partials/_responsive.scss
@@ -89,6 +89,9 @@
max-width: 810px;
}
}
+ .channel-intro {
+ max-width: 810px;
+ }
.date-separator, .new-separator {
&.hovered--comment {
&:before, &:after {
@@ -214,6 +217,12 @@
}
}
+@media (min-width: 992px){
+ .modal-lg {
+ width: 700px;
+ }
+}
+
@media screen and (min-width: 768px) {
.second-bar {
display: none;
@@ -252,11 +261,11 @@
}
}
}
- .post-header .post-header-col.post-header__reply {
- .dropdown-toggle:after {
- content: '...';
- }
- }
+ .post-header .post-header-col.post-header__reply {
+ .dropdown-toggle:after {
+ content: '...';
+ }
+ }
}
.signup-team__container {
padding: 30px 0;
@@ -640,6 +649,33 @@
padding: 9px 21px 10px 10px !important;
}
}
+@media screen and (max-width: 640px) {
+ .access-history__table {
+ > div {
+ display: block;
+ }
+ .access__report {
+ margin: 0 0 15px 15px;
+ }
+ .access__date {
+ div {
+ margin-bottom: 15px;
+ }
+ }
+ }
+ .activity-log__table {
+ > div {
+ display: block;
+ }
+ .activity-log__report {
+ width: 100%;
+ }
+ .activity-log__action {
+ text-align: left;
+ margin-top: 10px;
+ }
+ }
+}
@media screen and (max-width: 480px) {
.modal {
.modal-body {
diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss
index e60bc290e..b8dc9e997 100644
--- a/web/sass-files/sass/partials/_settings.scss
+++ b/web/sass-files/sass/partials/_settings.scss
@@ -1,3 +1,6 @@
+@import "access-history";
+@import "activity-log";
+
.user-settings {
background: #fff;
min-height:300px;
@@ -32,6 +35,12 @@
display: table-cell;
vertical-align: top;
}
+ .security-links {
+ margin-right: 20px;
+ .fa {
+ margin-right: 6px;
+ }
+ }
.settings-links {
width: 180px;
background: #FAFAFA;
@@ -223,4 +232,4 @@
.color-btn {
margin:4px;
-}
+} \ No newline at end of file
diff --git a/web/templates/channel.html b/web/templates/channel.html
index eaf0f2563..8e856032d 100644
--- a/web/templates/channel.html
+++ b/web/templates/channel.html
@@ -45,6 +45,8 @@
<div id="team_members_modal"></div>
<div id="direct_channel_modal"></div>
<div id="channel_info_modal"></div>
+ <div id="access_history_modal"></div>
+ <div id="activity_log_modal"></div>
<script>
window.setup_channel_page('{{ .Props.TeamDisplayName }}', '{{ .Props.TeamType }}', '{{ .Props.TeamId }}', '{{ .Props.ChannelName }}', '{{ .Props.ChannelId }}');
</script>
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-10-30 23:56:04 +0000