Fix private response css

amatosg · Oct 5, 2018 · 621c44e · 621c44e
1 parent 72a7200
commit 621c44e
Show file tree

Hide file tree

Showing 10 changed files with 63 additions and 49 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,6 +5,7 @@ server/composer.lock
 server/vendor
 server/files/
 !server/files/.gitkeep
+!server/files/.htaccess
 server/.dbdata
 server/.fakemail
 server/apidoc

diff --git a/client/src/app-components/ticket-event.js b/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>
-                    {(this.props.private*1) ? <span className="ticket-event__comment-author-type">{i18n('PRIVATE')}</span> : null}
+                    <span className="ticket-event__comment-badge-container">
+                        <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;
 

diff --git a/client/src/app-components/ticket-event.scss b/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;
+        }
+
+        &-badge-container {
+            margin-left: 12px;
+        }
 
-            &-type {
-                font-size: 10.6px;
-                padding-left: 10px;
-                color: $secondary-blue;
-                background-color: very-light-grey;
-                border: 2px solid;
-                border-radius: 4px;
-                padding: 4px;
-                margin-left: 12px;
-            }
+        &-badge {
+            font-size: 10.6px;
+            font-weight: bold;
+            color: $primary-blue;
+            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;
-        }
     }
 }
diff --git a/client/src/app-components/ticket-viewer.js b/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">
-                        {this.renderCustomResponses()}
-                        {this.renderPrivate()}
+                    <div className="row">
+                        <div className="ticket-viewer__response-actions">
+                            {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,24 +259,25 @@ 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 {
             return null;
         }
     }
 
+    renderCommentError() {
+        return (
+            <Message className="ticket-viewer__message" type="error">{i18n('TICKET_COMMENT_ERROR')}</Message>
+        );
+    }
+
     getCommentFormProps() {
         return {
             onSubmit: this.onSubmit.bind(this),

diff --git a/client/src/app-components/ticket-viewer.scss b/client/src/app-components/ticket-viewer.scss
@@ -10,9 +10,6 @@
         font-size: 16px;
         padding: 6px 0;
     }
-    &__private {
-
-    }
 
     &__number {
         color: white;
@@ -74,24 +71,30 @@
             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;
             align-items: center;
         }
 
     }
-    &__actions {
-        background-color: $very-light-grey;
-
-        display:flex;
-        align-items:center;justify-content: space-between;
-    }
-
 }
diff --git a/client/src/core-components/text-editor.scss b/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;
         }
     }

diff --git a/client/src/data/languages/en.js b/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',

diff --git a/client/src/scss/_vars.scss b/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;

diff --git a/server/.htaccess b/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]
diff --git a/server/files/.htaccess b/server/files/.htaccess
@@ -0,0 +1 @@
+Deny from all