Merge pull request #257 from erikaperugachi/view

View

Author: Erika Perugachi

electron_app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "criptext",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "author": {
     "name": "Criptext Inc.",
     "email": "[email protected]",

email_mailbox/src/components/ActivityPanel.js

@@ -16,13 +16,13 @@ class ActivityPanel extends Component {
     return (
       <aside className="navigation-feed-container">
         <header>
-          <div className="header-content">
+          <div
+            className="header-content"
+            onClick={() => this.props.onToggleActivityPanel()}
+          >
             {this.renderHeaderIcon()}
             <div className="header-title">ACTIVITY FEED</div>
-            <div
-              className="header-button"
-              onClick={() => this.props.onToggleActivityPanel()}
-            >
+            <div className="header-button">
               <i className="icon-next" />
             </div>
             <div className="header-clear" />

email_mailbox/src/components/File.js

@@ -1,12 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import ReactTooltip from 'react-tooltip';
 import { convertToHumanSize } from './../utils/StringUtils';
 import { FileType } from './../utils/const';
 import './file.css';
 
 const File = props => {
   return (
-    <div className="file-container">
+    <div
+      id={props.file.token}
+      className="file-container"
+      data-tip=""
+      data-for={props.file.token}
+    >
       {renderFileIcon(props.file.type)}
       <div className="file-content-detail">
         <span className="file-detail-name">{props.file.name}</span>
@@ -17,6 +23,16 @@ const File = props => {
       <button>
         <i className="icon-download" />
       </button>
+      <ReactTooltip
+        place="bottom"
+        className="file-tooltip"
+        id={props.file.token}
+        type="dark"
+        effect="solid"
+        target={props.file.token}
+      >
+        {props.file.name}
+      </ReactTooltip>
     </div>
   );
 };

email_mailbox/src/components/activitypanel.scss

@@ -25,6 +25,7 @@ aside.navigation-feed-container{
     width: 288px;
 
     .header-content {
+      cursor: pointer;
       margin: 0%;
 
       .feed-header-icon {
@@ -86,6 +87,7 @@ aside.navigation-feed-container{
 
       .header-button {
         cursor: pointer;
+        display: none;
         float: right;
         font-size: 24px;
         height: $_HEIGHT_HEADER;

email_mailbox/src/components/file.scss

@@ -5,10 +5,11 @@
   border: 1px solid #e7e5e5;
   border-radius: 6px;
   display: flex;
-  height: 38px;
+  height: 20px;
   margin-right: 20px;
+  padding: 10px;
   position: relative;
-  width: 256px;
+  width: 236px;
 
   &:hover{
     background-color: #f7f6f6;
@@ -32,10 +33,23 @@
       font-size: 13px;
     }
   }
+
+  .file-tooltip{
+    background-color: #e1e1e1 !important;
+    color: black !important;
+    font-weight: normal;
+    font-size: 10.5px !important;
+    border-radius: 3px !important;
+    padding: 4px 16px !important;
+   
+      &:after{
+        border-top-color: #e1e1e1 !important;
+        border-bottom-color: #e1e1e1 !important;
+      }
+  }
 }
 
 .file-content-icon{
-  margin-left: 12px;
   position: relative;
 
   >div{
@@ -54,25 +68,29 @@
   .icon-container-file-default{
     background-color: #4a90e2;
   }
-  
 }
 
 .file-content-detail{
   display: flex;
   flex-grow: 1;
+  height: 100%;
   margin-left: 10px;
-  padding-right: 14px;
+  width: calc(100% - 32px);
 
   .file-detail-name{
-    display: flex;
     flex-grow: 1;
     font-size: 14px;
     font-weight: 700;
+    overflow: hidden;
+    padding-right: 5px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .file-detail-size{
     color: #9b9b9b;
     flex-grow: 0;
     font-size: 13px;
+    white-space: nowrap;
   }
 }

email_mailbox/src/components/threaditem.scss

@@ -153,28 +153,28 @@
 }
 
 .thread-label-option{
+  align-items: center;
+  color: #d5d5d5;
   display: none;
+  height: 100%;
+  justify-content: space-around;
   padding-right: 10px;
-  color: #d5d5d5;
   position: absolute;
   right: 0;
-  height: 100%;
-  justify-content: space-around;
-  align-items: center;
 
   > div{
     height: 31px;
     width: 31px;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 12px;
     border-radius: 50%;
     margin-right: 9px;
     border: solid 1px rgba(128, 128, 128, 0);
 
     i{
       color: rgba(60, 72, 88, 0.6);
+      font-size: 16px;
     }
 
     &.thread-label-mark{

email_mailbox/src/containers/Email.js

@@ -62,7 +62,7 @@ const getContacts = (contacts, contactIds) => {
 const getFiles = (files, fileTokens) => {
   return fileTokens
     ? files.size
-      ? fileTokens.map(token => {
+      ? fileTokens.filter(token => files.get(token)).map(token => {
           return files.get(token).toJS();
         })
       : []

email_mailbox/src/containers/ThreadHeader.js

@@ -60,7 +60,7 @@ const getLabelIncluded = (labels, threadLabels) => {
 };
 
 const getThreadsIds = threads => {
-  return !threads.length ? [] : Set(threads.map(thread => thread.get('id')));
+  return !threads.size ? Set() : Set(threads.map(thread => thread.get('id')));
 };
 
 const shouldMarkAsUnread = (threads, itemsChecked) => {