Commit 9919b4bb authored by Asaad Mahmood's avatar Asaad Mahmood Committed by Carlos Tadeu Panato Junior
Browse files

MM-10772 - Updating permissions changes (#1284)

* MM-10772 - Updating permissions changes

* Updating permissions stuff

* Updating button spacing

* Updating team icons

* Updating test snapshots
parent f27aa4bb
......@@ -26,6 +26,7 @@ export default class EditPostTimeLimitButton extends React.Component {
className='edit-post-time-limit-button'
onClick={this.props.onClick}
>
<i className='fa fa-gear'/>
<FormattedMessage
id={messageID}
values={{n: this.props.timeLimit}}
......
......@@ -3,7 +3,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import {FormattedMessage} from 'react-intl';
import {FormattedMessage, FormattedHTMLMessage} from 'react-intl';
import {Modal} from 'react-bootstrap';
import {Constants} from 'utils/constants';
......@@ -91,62 +91,67 @@ export default class EditPostTimeLimitModal extends React.Component {
</h4>
</Modal.Header>
<Modal.Body>
<FormattedMessage
<FormattedHTMLMessage
id='edit_post.time_limit_modal.description'
defaultMessage='Setting a time limit applies to all users who have the "Edit Post" permissions in any permission scheme.'
defaultMessage='Setting a time limit <strong>applies to all users</strong> who have the "Edit Post" permissions in any permission scheme.'
/>
<div>
<input
id='anytime'
type='radio'
name='limit'
value={Constants.ALLOW_EDIT_POST_ALWAYS}
checked={this.state.postEditTimeLimit === Constants.UNSET_POST_EDIT_TIME_LIMIT}
onChange={this.handleOptionChange}
/>
<label htmlFor='anytime'>
<FormattedMessage
id='edit_post.time_limit_modal.option_label_anytime'
defaultMessage='Anytime'
<div className='padding-left x2 padding-top padding-bottom'>
<div className='padding-top x2'>
<input
id='anytime'
type='radio'
name='limit'
value={Constants.ALLOW_EDIT_POST_ALWAYS}
checked={this.state.postEditTimeLimit === Constants.UNSET_POST_EDIT_TIME_LIMIT}
onChange={this.handleOptionChange}
/>
</label>
</div>
<div>
<input
id='timelimit'
type='radio'
name='limit'
value={Constants.ALLOW_EDIT_POST_TIME_LIMIT}
checked={this.state.postEditTimeLimit !== Constants.UNSET_POST_EDIT_TIME_LIMIT}
onChange={this.handleOptionChange}
/>
<label htmlFor='timelimit'>
<FormattedMessage
id='edit_post.time_limit_modal.option_label_time_limit.preinput'
defaultMessage='Can edit for'
<label htmlFor='anytime'>
<FormattedMessage
id='edit_post.time_limit_modal.option_label_anytime'
defaultMessage='Anytime'
/>
</label>
</div>
<div className='padding-top'>
<input
id='timelimit'
type='radio'
name='limit'
value={Constants.ALLOW_EDIT_POST_TIME_LIMIT}
checked={this.state.postEditTimeLimit !== Constants.UNSET_POST_EDIT_TIME_LIMIT}
onChange={this.handleOptionChange}
/>
</label>
<input
type='number'
min='0'
step='1'
max={INT32_MAX}
id='editPostTimeLimit'
readOnly={this.state.postEditTimeLimit === Constants.UNSET_POST_EDIT_TIME_LIMIT}
onChange={this.handleSecondsChange}
value={this.state.postEditTimeLimit === Constants.UNSET_POST_EDIT_TIME_LIMIT ? '' : this.state.postEditTimeLimit}
/>
<label htmlFor='timelimit'>
<label htmlFor='timelimit'>
<FormattedMessage
id='edit_post.time_limit_modal.option_label_time_limit.preinput'
defaultMessage='Can edit for'
/>
</label>
<input
type='number'
className='form-control inline'
min='0'
step='1'
max={INT32_MAX}
id='editPostTimeLimit'
readOnly={this.state.postEditTimeLimit === Constants.UNSET_POST_EDIT_TIME_LIMIT}
onChange={this.handleSecondsChange}
value={this.state.postEditTimeLimit === Constants.UNSET_POST_EDIT_TIME_LIMIT ? '' : this.state.postEditTimeLimit}
/>
<label htmlFor='timelimit'>
<FormattedMessage
id='edit_post.time_limit_modal.option_label_time_limit.postinput'
defaultMessage='seconds after posting'
/>
</label>
</div>
<div className='padding-top x2 light'>
<FormattedMessage
id='edit_post.time_limit_modal.option_label_time_limit.postinput'
defaultMessage='seconds after posting'
id='edit_post.time_limit_modal.subscript'
defaultMessage='Set the length of time users have to edit their messages after posting.'
/>
</label>
</div>
</div>
<FormattedMessage
id='edit_post.time_limit_modal.subscript'
defaultMessage='Set the length of time users have to edit their messages after posting.'
/>
</Modal.Body>
<Modal.Footer>
<div className='edit-post-time-limit-modal__error'>
......
......@@ -39,9 +39,6 @@ export default class TeamInList extends React.Component {
icon = (
<div className='team-btn__initials'>
{team.display_name ? team.display_name.replace(/\s/g, '').substring(0, 2) : '??'}
<div className='team-btn__content'>
{team.display_name}
</div>
</div>
);
}
......
......@@ -1758,10 +1758,10 @@
"edit_post.edit": "Edit {title}",
"edit_post.editPost": "Edit the post...",
"edit_post.save": "Save",
"edit_post.time_limit_button.no_limit": "Anytime",
"edit_post.time_limit_button.for_n_seconds": "For {n} seconds",
"edit_post.time_limit_button.no_limit": "Anytime",
"edit_post.time_limit_button.for_n_seconds": "For {n} seconds",
"edit_post.time_limit_modal.title": "Configure Global Edit Post Time Limit",
"edit_post.time_limit_modal.description": "Setting a time limit applies to all users who have the \"Edit Post\" permissions in any permission scheme.",
"edit_post.time_limit_modal.description": "Setting a time limit <strong>applies to all users</strong> who have the \"Edit Post\" permissions in any permission scheme.",
"edit_post.time_limit_modal.option_label_anytime": "Anytime",
"edit_post.time_limit_modal.option_label_time_limit.preinput": "Can edit for",
"edit_post.time_limit_modal.option_label_time_limit.postinput": "seconds after posting",
......
.edit-post-time-limit-button {
border-radius: 4px;
border-color: #333;
@include single-transition(all, .15s, ease);
color: #5B6672;
border-color: #5B6672;
border-radius: $border-rad*2;
height: 26px;
padding: 0 8px;
background: transparent;
i {
margin-right: 4px;
}
span {
display: inline !important;
}
&:hover {
background: $primary-color;
border-color: $primary-color;
color: $white;
}
}
\ No newline at end of file
.edit-post-time-limit-modal {
label {
margin-left: 5px;
margin-right: 5px;
margin-left: 7px;
margin-right: 7px;
font-weight: normal;
}
.edit-post-time-limit-modal__error {
display: inline-block;
......
......@@ -17,13 +17,15 @@
}
.permissions-block {
border: $border-gray;
@include border-radius($border-rad);
@include box-shadow(0 1px 2px 0 alpha-color($black, .5));
@include clearfix;
font-size: .95em;
margin: 2em 0;
padding: 0;
&.simple {
}
// &.simple {
// }
.more-schemes {
width: 100%;
......@@ -33,9 +35,9 @@
}
.header {
cursor: pointer;
align-items: center;
background: $white;
cursor: pointer;
display: flex;
flex-direction: row;
justify-content: space-between;
......@@ -50,6 +52,7 @@
.button {
self-align: end;
margin-left: 10px;
svg {
transform: rotate(0deg);
......@@ -146,7 +149,7 @@
align-items: center;
display: flex;
justify-content: space-around;
margin: 4px;
margin: 5px 7px 4px 6px;
min-height: 10px;
min-width: 10px;
transition: transform 300ms;
......@@ -155,6 +158,7 @@
transform: rotate(90deg);
transform-origin: 55% 50%;
transition: transform 300ms;
margin-top: 6px
}
}
......@@ -204,7 +208,7 @@
.permission-group {
.permission-group-row {
.permission-name {
min-width: 272px;
min-width: 268px;
}
}
......@@ -227,14 +231,14 @@
}
.permission-group-row {
padding: 0 0 0 30px;
padding: 0 0 0 25px;
&.combined {
padding: 0 0 0 48px;
}
.permission-name {
min-width: 242px;
min-width: 244px;
}
}
......@@ -243,7 +247,7 @@
padding: 0 0 0 78px;
.permission-name {
min-width: 212px;
min-width: 213px;
}
}
......@@ -303,7 +307,6 @@
.permissions-scheme-summary {
margin: 0 20px;
padding: 10px 20px 0 20px;
min-height: 110px;
border-left: 2px solid $transparent;
cursor: pointer;
&:nth-child(2) {
......@@ -337,17 +340,20 @@
}
}
.permissions-scheme-summary--teams {
padding-top: 30px;
padding: 1.5em 0 0.5em;
.team {
margin-bottom: 10px;
height: 25px;
display: inline-flex;
background: rgba(0, 0, 0, 0.05);
border-radius: 13px;
padding: 5px 8px;
padding: 0 8px;
margin-right: 10px;
align-items: center;
justify-content: center;
font-size: 11px;
color: alpha-color($black, .6);
}
}
}
......@@ -377,11 +383,21 @@
display: flex;
flex-grow: 1;
align-items: center;
.icon {
flex-grow: 0;
height: 43px;
width: 43px;
display: block;
@include border-radius(4px);
background-color: $primary-color;
color: $white;
font-weight: bold;
height: 44px;
letter-spacing: -.5px;
line-height: 42px;
position: relative;
text-align: center;
text-transform: capitalize;
vertical-align: top;
width: 44px;
.team-btn__image {
border-radius: 4px;
overflow: hidden;
......@@ -391,16 +407,7 @@
height: 100%;
width: 100%;
}
.team-btn__initials {
height: 100%;
width: 100%;
background: $gray;
color: $white;
height: 100%;
width: 100%;
border-radius: 4px;
padding: 4px;
}
.team-btn__content {
bottom: 4px;
font-size: 8.5px;
......
......@@ -91,3 +91,16 @@
}
}
}
.form-control {
&.inline {
display: inline-block;
width: auto;
}
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
background-color: #f9f9f9;
}
\ No newline at end of file
......@@ -366,19 +366,27 @@
font-weight: normal;
z-index: 100;
align-items: center;
&.with-back {
padding: 0;
.back {
display: flex;
font-size: 1.3rem;
font-size: 1.6rem;
width: 60px;
height: 60px;
border-right: 1px solid alpha-color($black, .1);
margin-right: 10px;
margin-right: 20px;
align-items: center;
justify-content: space-around;
text-decoration: none;
&:before {
top: 1px;
position: relative;
}
}
span {
}
}
......@@ -397,12 +405,24 @@
margin: 0 0 0 220px;
padding: 13px 0;
z-index: 100;
.save-button {
@include opacity(1);
background: $light-gray;
min-width: 100px;
height: 34px;
margin: 0 10px 0 13px;
color: alpha-color($black, .5);
&.btn-primary {
background: $primary-color;
color: $white;
}
}
.cancel-button {
@include border-radius($border-rad);
@include single-transition(all, .15s, ease);
display: flex;
justify-content: center;
align-items: center;
......@@ -411,7 +431,8 @@
margin: 0 10px 0 0;
text-decoration: none;
&:hover {
background-color: $light-gray;
background-color: $primary-color;
color: $white;
}
}
.error-message {
......@@ -425,8 +446,8 @@
}
.reset-defaults-btn {
position: absolute;
right: 0;
padding-right: 10px;
right: 0;
padding-right: 10px;
padding-left: 10px;
}
}
......
......@@ -18,7 +18,7 @@ $transparent: rgba(0, 0, 0, 0);
$border-gray: 1px solid #ddd;
// Random variables
$border-rad: 1px;
$border-rad: 2px;
// Webrtc Variables
$button--ready: #00A6EE;
......
......@@ -52,11 +52,6 @@ exports[`components/TeamInfo should match snapshot, without icon 1`] = `
className="team-btn__initials"
>
Te
<div
className="team-btn__content"
>
Test team
</div>
</div>
</span>
<div
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment