Fix private response css

.gitignore

@@ -5,6 +5,7 @@ server/composer.lock
 server/vendor
 server/files/
 !server/files/.gitkeep
+!server/files/.htaccess
 server/.dbdata
 server/.fakemail
 server/apidoc

client/src/app-components/ticket-event.js

@@ -6,6 +6,7 @@ import API from 'lib-app/api-call';
 
 import DateTransformer from 'lib-core/date-transformer';
 import Icon from 'core-components/icon';
+import Tooltip from 'core-components/tooltip';
 
 class TicketEvent extends React.Component {
     static propTypes = {
@@ -84,8 +85,10 @@ class TicketEvent extends React.Component {
                 <span className="ticket-event__comment-pointer" />
                 <div className="ticket-event__comment-author">
                     <span className="ticket-event__comment-author-name">{this.props.author.name}</span>
-                    <span className="ticket-event__comment-author-type">{i18n((this.props.author.staff) ? 'STAFF' : 'CUSTOMER')}</span>
+                    <span className="ticket-event__comment-badge-container">
-                    {(this.props.private*1) ? <span className="ticket-event__comment-author-type">{i18n('PRIVATE')}</span> : null}
+                        <span className="ticket-event__comment-badge">{i18n((this.props.author.staff) ? 'STAFF' : 'CUSTOMER')}</span>
+                    </span>
+                    {(this.props.private*1) ? this.renderPrivateBadge() : null}
                 </div>
                 <div className="ticket-event__comment-date">{DateTransformer.transformToString(this.props.date)}</div>
                 <div className="ticket-event__comment-content" dangerouslySetInnerHTML={{__html: this.props.content}}></div>
@@ -172,6 +175,16 @@ class TicketEvent extends React.Component {
         );
     }
 
+    renderPrivateBadge() {
+        return (
+            <span className="ticket-event__comment-badge-container">
+                <Tooltip content={i18n('PRIVATE_DESCRIPTION')} openOnHover>
+                    <span className="ticket-event__comment-badge">{i18n('PRIVATE')}</span>
+                </Tooltip>
+            </span>
+        );
+    }
+
     renderFileRow(file) {
         let node = null;
 

client/src/app-components/ticket-event.scss

@@ -47,7 +47,7 @@
 
     &__comment {
         position: relative;
-        word-break: break-all;
+        word-wrap: break-word;
 
         &-pointer {
             right: 100%;
@@ -64,17 +64,19 @@
             position: relative;
             padding: 12px;
             color: $primary-black;
+        }
 
-            &-type {
+        &-badge-container {
-                font-size: 10.6px;
+            margin-left: 12px;
-                padding-left: 10px;
+        }
-                color: $secondary-blue;
+
-                background-color: very-light-grey;
+        &-badge {
-                border: 2px solid;
+            font-size: 10.6px;
-                border-radius: 4px;
+            font-weight: bold;
-                padding: 4px;
+            color: $primary-blue;
-                margin-left: 12px;
+            background-color: $very-light-grey;
-            }
+            padding: 6px;
+            width: 100px;
         }
 
         &-date {
@@ -109,10 +111,6 @@
         .ticket-event__icon {
             background-color: $primary-blue;
         }
-
-        .ticket-event__comment-author-type {
-            color: $primary-blue;
-        }
     }
 
     &_circled {
@@ -190,16 +188,9 @@
             background-color: $light-yellow;
             border-color: $light-yellow;
         }
-        .ticket-event__comment-content {
-            background-color: $very-light-yellow;
-            border-color: $very-light-yellow;
-        }
         .ticket-event__staff-pic {
             background-color: $light-yellow;
             border-color: $light-yellow;
         }
-        .ticket-event__file {
-            background-color: $light-yellow;
-        }
     }
 }

client/src/app-components/ticket-viewer.js

@@ -19,6 +19,7 @@ import Button             from 'core-components/button';
 import Message            from 'core-components/message';
 import Icon               from 'core-components/icon';
 import TextEditor         from 'core-components/text-editor';
+import InfoTooltip        from 'core-components/info-tooltip';
 
 class TicketViewer extends React.Component {
     static propTypes = {
@@ -214,9 +215,11 @@ class TicketViewer extends React.Component {
             <div className="ticket-viewer__response">
                 <Form {...this.getCommentFormProps()}>
                     <div className="ticket-viewer__response-title row">{i18n('RESPOND')}</div>
-                    <div className="ticket-viewer__actions row">
+                    <div className="row">
-                        {this.renderCustomResponses()}
+                        <div className="ticket-viewer__response-actions">
-                        {this.renderPrivate()}
+                            {this.renderCustomResponses()}
+                            {this.renderPrivate()}
+                        </div>
                     </div>
                     <div className="ticket-viewer__response-field row">
                         <FormField name="content" validation="TEXT_AREA" required field="textarea" fieldProps={{allowImages: this.props.allowAttachments}}/>
@@ -256,17 +259,12 @@ class TicketViewer extends React.Component {
         return customResponsesNode;
     }
 
-    renderCommentError() {
-        return (
-            <Message className="ticket-viewer__message" type="error">{i18n('TICKET_COMMENT_ERROR')}</Message>
-        );
-    }
-
     renderPrivate() {
         if (this.props.userStaff) {
             return (
-                <div className="ticket-viewer__private">
+                <div className="ticket-viewer__response-private">
                     <FormField label={i18n('PRIVATE')} name="private" field="checkbox"/>
+                    <InfoTooltip className="ticket-viewer__response-private-info" text={i18n('PRIVATE_DESCRIPTION')} />
                 </div>
             );
         } else {
@@ -274,6 +272,12 @@ class TicketViewer extends React.Component {
         }
     }
 
+    renderCommentError() {
+        return (
+            <Message className="ticket-viewer__message" type="error">{i18n('TICKET_COMMENT_ERROR')}</Message>
+        );
+    }
+
     getCommentFormProps() {
         return {
             onSubmit: this.onSubmit.bind(this),

client/src/app-components/ticket-viewer.scss

@@ -10,9 +10,6 @@
         font-size: 16px;
         padding: 6px 0;
     }
-    &__private {
-
-    }
 
     &__number {
         color: white;
@@ -74,12 +71,25 @@
             text-align: left;
         }
 
-        &-custom {
+        &-actions {
             background-color: $very-light-grey;
+            display: flex;
+            justify-content: space-between;
+        }
+
+        &-custom {
             padding: 20px 0 0 20px;
             text-align: left;
         }
 
+        &-private {
+            padding: 20px 20px 0 0;
+
+            &-info {
+                margin-left: 5px;
+            }
+        }
+
         &-buttons {
             display: flex;
             justify-content: space-between;
@@ -87,11 +97,4 @@
         }
 
     }
-    &__actions {
-        background-color: $very-light-grey;
-
-        display:flex;
-        align-items:center;justify-content: space-between;
-    }
-
 }

client/src/core-components/text-editor.scss

@@ -7,7 +7,7 @@
         border: 1px solid $grey;
         border-radius: 3px;
 
-        .ql-container {
+        .ql-editor {
             min-height: 200px;
         }
     }

client/src/data/languages/en.js

@@ -184,7 +184,7 @@ export default {
     'HIMSELF': 'himself',
     'ADD_USER': 'Add user',
     'UPLOAD_FILE': 'Upload file',
-    'PRIVATE': 'private',
+    'PRIVATE': 'Private',
     'ENABLE_USER': 'Enable User',
     'DISABLE_USER': 'Disable User',
 
@@ -301,6 +301,7 @@ export default {
     'SMTP_SERVER_DESCRIPTION': 'The configuration of the SMTP server allows the application to send mails. If you do not configure it, no emails will be sent by OpenSupports.',
     'ENABLE_USER_DESCRIPTION': 'This action allows the user to sign in and create tickets.',
     'DISABLE_USER_DESCRIPTION': 'User will be disabled and will not be able to sign in and create tickets.',
+    'PRIVATE_DESCRIPTION': 'This response will only be seen by staff members',
 
     //ERRORS
     'EMAIL_OR_PASSWORD': 'Email or password invalid',

client/src/scss/_vars.scss

@@ -6,7 +6,7 @@ $primary-blue: #414A59;
 $secondary-blue: #20B8c5;
 
 $primary-yellow: #E5D151;
-$light-yellow: rgba(229,209,81,0.6);
+$light-yellow: #fff19c;
 $very-light-yellow: #ffffe0;
 
 $primary-green: #82CA9C;

server/.htaccess

@@ -1,4 +1,4 @@
 RewriteEngine on
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
-RewriteRule .* index.php [PT,L]
+RewriteRule .* index.php [PT,L]

server/files/.htaccess

@@ -0,0 +1 @@
+Deny from all