Merge branch 'develop' into feature/650_folder_missing_endpoint_about_edit

.gitignore

@@ -1,4 +1,8 @@
 .idea/
 frontend/dist/app/
+frontend/dist/tracim.app.entry.js
+frontend/dist/asset/tracim/tracim.vendor.bundle.js
 frontend_app_html-document/dist/html-document.app.js
 frontend_lib/dist/tracim_frontend_lib.js
+npm-debug.log
+package-lock.json

backend/development.ini.sample

@@ -186,6 +186,13 @@ wsgidav.config_path = %(here)s/wsgidav.conf
 ## return error
 # preview.jpg.restricted_dims = True
 
+### Frontend
+frontend.serve = True
+# You can set dist folder of tracim frontend. by default, system
+# will try to get it automatically according to tracim_v2 repository
+# organisation.
+# frontend.dist_folder_path = /home/user/tracim_v2/frontend/dist
+
 ###
 # wsgi server configuration
 ###

backend/setup.py

@@ -41,6 +41,9 @@ requires = [
     'lxml',
     'redis',
     'rq',
+    # frontend file serve
+    'pyramid_mako',
+    'spectra',
 ]
 
 tests_require = [

backend/tests_configs.ini

@@ -4,7 +4,7 @@ depot_storage_name = test
 depot_storage_dir = /tmp/test/depot
 user.auth_token.validity = 604800
 preview_cache_dir = /tmp/test/preview_cache
-
+website.base_url = http://localhost:6543
 [app:command_test]
 use = egg:tracim_backend
 sqlalchemy.url = sqlite:///tracim_test.sqlite
@@ -12,6 +12,7 @@ depot_storage_name = test
 depot_storage_dir = /tmp/test/depot
 user.auth_token.validity = 604800
 preview_cache_dir = /tmp/test/preview_cache
+website.base_url = http://localhost:6543
 
 [mail_test]
 sqlalchemy.url = sqlite:///:memory:
@@ -37,6 +38,7 @@ email.notification.smtp.server = 127.0.0.1
 email.notification.smtp.port = 1025
 email.notification.smtp.user = test_user
 email.notification.smtp.password = just_a_password
+website.base_url = http://localhost:6543
 
 [mail_test_async]
 sqlalchemy.url = sqlite:///:memory:
@@ -63,6 +65,7 @@ email.notification.smtp.server = 127.0.0.1
 email.notification.smtp.port = 1025
 email.notification.smtp.user = test_user
 email.notification.smtp.password = just_a_password
+website.base_url = http://localhost:6543
 
 [functional_test]
 sqlalchemy.url = sqlite:///tracim_test.sqlite
@@ -72,6 +75,7 @@ user.auth_token.validity = 604800
 preview_cache_dir = /tmp/test/preview_cache
 preview.jpg.restricted_dims = True
 email.notification.activated = false
+website.base_url = http://localhost:6543
 
 [functional_test_no_db]
 sqlalchemy.url = sqlite://
@@ -81,6 +85,7 @@ user.auth_token.validity = 604800
 preview_cache_dir = /tmp/test/preview_cache
 preview.jpg.restricted_dims = True
 email.notification.activated = false
+website.base_url = http://localhost:6543
 
 [functional_test_with_mail_test_sync]
 sqlalchemy.url = sqlite:///tracim_test.sqlite
@@ -105,7 +110,7 @@ email.notification.smtp.server = 127.0.0.1
 email.notification.smtp.port = 1025
 email.notification.smtp.user = test_user
 email.notification.smtp.password = just_a_password
-
+website.base_url = http://localhost:6543
 
 [functional_test_with_mail_test_async]
 sqlalchemy.url = sqlite:///tracim_test.sqlite
@@ -129,4 +134,5 @@ email.notification.processing_mode = async
 email.notification.smtp.server = 127.0.0.1
 email.notification.smtp.port = 1025
 email.notification.smtp.user = test_user
-email.notification.smtp.password = just_a_password
+email.notification.smtp.password = just_a_password
+website.base_url = http://localhost:6543

backend/tracim_backend/__init__.py

@@ -8,7 +8,6 @@ except ImportError:
 from pyramid.config import Configurator
 from pyramid.authentication import BasicAuthAuthenticationPolicy
 from hapic.ext.pyramid import PyramidContext
-from pyramid.exceptions import NotFound
 from sqlalchemy.exc import OperationalError
 
 from tracim_backend.extensions import hapic
@@ -30,8 +29,10 @@ from tracim_backend.views.core_api.workspace_controller import WorkspaceControll
 from tracim_backend.views.contents_api.comment_controller import CommentController
 from tracim_backend.views.contents_api.file_controller import FileController
 from tracim_backend.views.contents_api.folder_controller import FolderController
+from tracim_backend.views.frontend import FrontendController
 from tracim_backend.views.errors import ErrorSchema
 from tracim_backend.exceptions import NotAuthenticated
+from tracim_backend.exceptions import PageNotFound
 from tracim_backend.exceptions import UserNotActive
 from tracim_backend.exceptions import InvalidId
 from tracim_backend.exceptions import InsufficientUserProfile
@@ -86,7 +87,7 @@ def web(global_config, **local_settings):
     hapic.set_context(context)
     # INFO - G.M - 2018-07-04 - global-context exceptions
     # Not found
-    context.handle_exception(NotFound, HTTPStatus.NOT_FOUND)
+    context.handle_exception(PageNotFound, HTTPStatus.NOT_FOUND)
     # Bad request
     context.handle_exception(WorkspaceNotFoundInTracimRequest, HTTPStatus.BAD_REQUEST)  # nopep8
     context.handle_exception(UserNotFoundInTracimRequest, HTTPStatus.BAD_REQUEST)  # nopep8
@@ -106,6 +107,7 @@ def web(global_config, **local_settings):
     context.handle_exception(OperationalError, HTTPStatus.INTERNAL_SERVER_ERROR)
     context.handle_exception(Exception, HTTPStatus.INTERNAL_SERVER_ERROR)
 
+
     # Add controllers
     session_controller = SessionController()
     system_controller = SystemController()
@@ -126,6 +128,11 @@ def web(global_config, **local_settings):
     configurator.include(file_controller.bind, route_prefix=BASE_API_V2)
     configurator.include(folder_controller.bind, route_prefix=BASE_API_V2)
 
+    if app_config.FRONTEND_SERVE:
+        configurator.include('pyramid_mako')
+        frontend_controller = FrontendController(app_config.FRONTEND_DIST_FOLDER_PATH)  # nopep8
+        configurator.include(frontend_controller.bind)
+
     hapic.add_documentation_view(
         '/api/v2/doc',
         'Tracim v2 API',

backend/tracim_backend/config.py

@@ -1,5 +1,7 @@
 # -*- coding: utf-8 -*-
 from urllib.parse import urlparse
+
+import os
 from paste.deploy.converters import asbool
 from tracim_backend.lib.utils.logger import logger
 from depot.manager import DepotManager
@@ -79,6 +81,12 @@ class CFG(object):
             'website.base_url',
             '',
         )
+        if not self.WEBSITE_BASE_URL:
+            raise Exception(
+                'website.base_url is needed in order to have correct path in'
+                'few place like in email.'
+                'You should set it with frontend root url.'
+            )
 
         # TODO - G.M - 26-03-2018 - [Cleanup] These params seems deprecated for tracimv2,  # nopep8
         # Verify this
@@ -435,6 +443,29 @@ class CFG(object):
 
         self.PREVIEW_JPG_ALLOWED_DIMS = allowed_dims
 
+        self.FRONTEND_SERVE = asbool(settings.get(
+            'frontend.serve', False
+        ))
+
+        # INFO - G.M - 2018-08-06 - we pretend that frontend_dist_folder
+        # is probably in frontend subfolder
+        # of tracim_v2 parent of both backend and frontend
+        backend_folder = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))  # nopep8
+        tracim_v2_folder = os.path.dirname(backend_folder)
+        frontend_dist_folder = os.path.join(tracim_v2_folder, 'frontend', 'dist')  # nopep8
+
+        self.FRONTEND_DIST_FOLDER_PATH = settings.get(
+            'frontend.dist_folder_path', frontend_dist_folder
+        )
+
+        # INFO - G.M - 2018-08-06 - We check dist folder existence
+        if self.FRONTEND_SERVE and not os.path.isdir(self.FRONTEND_DIST_FOLDER_PATH):  # nopep8
+            raise Exception(
+                'ERROR: {} folder does not exist as folder. '
+                'please set frontend.dist_folder.path'
+                'with a correct value'.format(self.FRONTEND_DIST_FOLDER_PATH)
+            )
+
     def configure_filedepot(self):
         depot_storage_name = self.DEPOT_STORAGE_NAME
         depot_storage_path = self.DEPOT_STORAGE_DIR

backend/tracim_backend/exceptions.py

@@ -209,3 +209,7 @@ class UnallowedSubContent(TracimException):
 
 class TooShortAutocompleteString(TracimException):
     pass
+
+
+class PageNotFound(TracimException):
+    pass

backend/tracim_backend/lib/core/notifications.py

@@ -1,7 +1,7 @@
 # -*- coding: utf-8 -*-
 from sqlalchemy.orm import Session
 
-from tracim_backend import CFG
+from tracim_backend.config import CFG
 from tracim_backend.lib.utils.logger import logger
 from tracim_backend.models.auth import User
 from tracim_backend.models.data import Content

backend/tracim_backend/lib/core/user.py

@@ -9,7 +9,7 @@ from sqlalchemy.orm import Session
 from sqlalchemy.orm import Query
 from sqlalchemy.orm.exc import NoResultFound
 
-from tracim_backend import CFG
+from tracim_backend.config import CFG
 from tracim_backend.models.auth import User
 from tracim_backend.models.auth import Group
 from tracim_backend.exceptions import NoUserSetted

backend/tracim_backend/lib/core/userworkspace.py

@@ -1,7 +1,7 @@
 # -*- coding: utf-8 -*-
 import typing
 
-from tracim_backend import CFG
+from tracim_backend.config import CFG
 from tracim_backend.models.context_models import UserRoleWorkspaceInContext
 from tracim_backend.models.roles import WorkspaceRoles
 

backend/tracim_backend/lib/core/workspace.py

@@ -5,7 +5,7 @@ from sqlalchemy.orm import Query
 from sqlalchemy.orm import Session
 from sqlalchemy.orm.exc import NoResultFound
 
-from tracim_backend import CFG
+from tracim_backend.config import CFG
 from tracim_backend.exceptions import EmptyLabelNotAllowed
 from tracim_backend.exceptions import WorkspaceNotFound
 from tracim_backend.lib.utils.translation import fake_translator as _

backend/tracim_backend/lib/mail_notifier/notifier.py

@@ -10,16 +10,19 @@ from lxml.html.diff import htmldiff
 from mako.template import Template
 from sqlalchemy.orm import Session
 
-from tracim_backend import CFG
+from tracim_backend.config import CFG
 from tracim_backend.lib.core.notifications import INotifier
 from tracim_backend.lib.mail_notifier.sender import EmailSender
 from tracim_backend.lib.mail_notifier.utils import SmtpConfiguration, EST
 from tracim_backend.lib.mail_notifier.sender import send_email_through
 from tracim_backend.lib.core.workspace import WorkspaceApi
 from tracim_backend.lib.utils.logger import logger
-from tracim_backend.models import User
+from tracim_backend.lib.utils.utils import get_login_frontend_url
+from tracim_backend.lib.utils.utils import get_email_logo_frontend_url
 from tracim_backend.models.auth import User
 from tracim_backend.models.contents import CONTENT_TYPES
+from tracim_backend.models.context_models import ContentInContext
+from tracim_backend.models.context_models import WorkspaceInContext
 from tracim_backend.models.data import ActionDescription
 from tracim_backend.models.data import Content
 from tracim_backend.models.data import UserRoleInWorkspace
@@ -234,7 +237,13 @@ class EmailManager(object):
             show_archived=True,
             show_deleted=True,
         ).get_one(event_content_id, CONTENT_TYPES.Any_SLUG)
-        main_content = content.parent if content.type == CONTENT_TYPES.Comment.slug else content
+        workspace_api = WorkspaceApi(
+            session=self.session,
+            current_user=user,
+            config=self.config,
+        )
+        workpace_in_context = workspace_api.get_workspace_with_context(workspace_api.get_one(content.workspace_id))  # nopep8
+        main_content = content.parent if content.type == CONTENT_TYPES.Comment.slug else content  # nopep8
         notifiable_roles = WorkspaceApi(
             current_user=user,
             session=self.session,
@@ -265,7 +274,7 @@ class EmailManager(object):
             # INFO - G.M - 2017-11-15 - set content_id in header to permit reply
             # references can have multiple values, but only one in this case.
             replyto_addr = self.config.EMAIL_NOTIFICATION_REPLY_TO_EMAIL.replace( # nopep8
-                '{content_id}',str(content.content_id)
+                '{content_id}', str(content.content_id)
             )
 
             reference_addr = self.config.EMAIL_NOTIFICATION_REFERENCES_EMAIL.replace( #nopep8
@@ -297,8 +306,21 @@ class EmailManager(object):
             # To link this email to a content we create a virtual parent
             # in reference who contain the content_id.
             message['References'] = formataddr(('',reference_addr))
-            body_text = self._build_email_body_for_content(self.config.EMAIL_NOTIFICATION_CONTENT_UPDATE_TEMPLATE_TEXT, role, content, user)
-            body_html = self._build_email_body_for_content(self.config.EMAIL_NOTIFICATION_CONTENT_UPDATE_TEMPLATE_HTML, role, content, user)
+            content_in_context = content_api.get_content_in_context(content)
+            body_text = self._build_email_body_for_content(
+                self.config.EMAIL_NOTIFICATION_CONTENT_UPDATE_TEMPLATE_TEXT,
+                role,
+                content_in_context,
+                workpace_in_context,
+                user
+            )
+            body_html = self._build_email_body_for_content(
+                self.config.EMAIL_NOTIFICATION_CONTENT_UPDATE_TEMPLATE_HTML,
+                role,
+                content_in_context,
+                workpace_in_context,
+                user
+            )
 
             part1 = MIMEText(body_text, 'plain', 'utf-8')
             part2 = MIMEText(body_html, 'html', 'utf-8')
@@ -362,9 +384,9 @@ class EmailManager(object):
             'user': user,
             'password': password,
             # TODO - G.M - 11-06-2018 - [emailTemplateURL] correct value for logo_url  # nopep8
-            'logo_url': '',
+            'logo_url': get_email_logo_frontend_url(self.config),
             # TODO - G.M - 11-06-2018 - [emailTemplateURL] correct value for login_url  # nopep8
-            'login_url': self.config.WEBSITE_BASE_URL,
+            'login_url': get_login_frontend_url(self.config),
         }
         body_text = self._render_template(
             mako_template_filepath=text_template_file_path,
@@ -415,8 +437,9 @@ class EmailManager(object):
             self,
             mako_template_filepath: str,
             role: UserRoleInWorkspace,
-            content: Content,
-            actor: User
+            content_in_context: ContentInContext,
+            workspace_in_context: WorkspaceInContext,
+            actor: User,
     ) -> str:
         """
         Build an email body and return it as a string
@@ -424,24 +447,21 @@ class EmailManager(object):
         :param role: the role related to user to whom the email must be sent. The role is required (and not the user only) in order to show in the mail why the user receive the notification
         :param content: the content item related to the notification
         :param actor: the user at the origin of the action / notification (for example the one who wrote a comment
-        :param config: the global configuration
         :return: the built email body as string. In case of multipart email, this method must be called one time for text and one time for html
         """
         logger.debug(self, 'Building email content from MAKO template {}'.format(mako_template_filepath))
-
+        content = content_in_context.content
         main_title = content.label
         content_intro = ''
         content_text = ''
         call_to_action_text = ''
 
-        # TODO - G.M - 11-06-2018 - [emailTemplateURL] correct value for call_to_action_url  # nopep8
-        call_to_action_url =''
+        call_to_action_url = content_in_context.frontend_url
         # TODO - G.M - 11-06-2018 - [emailTemplateURL] correct value for status_icon_url  # nopep8
         status_icon_url = ''
-        # TODO - G.M - 11-06-2018 - [emailTemplateURL] correct value for workspace_url  # nopep8
-        workspace_url = ''
+        workspace_url = workspace_in_context.frontend_url
         # TODO - G.M - 11-06-2018 - [emailTemplateURL] correct value for logo_url  # nopep8
-        logo_url = ''
+        logo_url = get_email_logo_frontend_url(self.config)
 
         action = content.get_last_action().id
         if ActionDescription.COMMENT == action:

backend/tracim_backend/lib/utils/utils.py

@@ -2,6 +2,8 @@
 import datetime
 import random
 import string
+from enum import Enum
+
 from redis import Redis
 from rq import Queue
 
@@ -10,6 +12,32 @@ from tracim_backend.config import CFG
 DATETIME_FORMAT = '%Y-%m-%dT%H:%M:%SZ'
 DEFAULT_WEBDAV_CONFIG_FILE = "wsgidav.conf"
 DEFAULT_TRACIM_CONFIG_FILE = "development.ini"
+CONTENT_FRONTEND_URL_SCHEMA = 'workspaces/{workspace_id}/contents/{content_type}/{content_id}'  # nopep8
+WORKSPACE_FRONTEND_URL_SCHEMA = 'workspaces/{workspace_id}'  # nopep8
+
+
+def get_root_frontend_url(config: CFG) -> str:
+    """
+    Return website base url with always '/' at the end
+    """
+    base_url = ''
+    if config.WEBSITE_BASE_URL[-1] == '/':
+        base_url = config.WEBSITE_BASE_URL
+    else:
+        base_url = config.WEBSITE_BASE_URL + '/'
+    return base_url
+
+
+def get_login_frontend_url(config: CFG):
+    """
+    Return login page url
+    """
+    return get_root_frontend_url(config) + 'login'
+
+
+def get_email_logo_frontend_url(config: CFG):
+    # TODO - G.M - 11-06-2018 - [emailTemplateURL] correct value for email_logo_frontend_url  # nopep8
+    return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAB3RJTUUH4QUTDjMSlsws9AAAB89JREFUaN7tmWtwlFcZx3/PeXeXXLmKQJEGsFZApIUBnaqjUm4VgdYyCUib0cJoKLmHW5EWmlGoQkMICURgEPuhtiYDU7XcyVgKVugULZVCQAwUYyENYAmEXHb3PH7IFjYQNgnZHfnA+bKz+7573v//PPf/C/fWvdWhJWHfMbO4P479OpCAigeowWglPq3ARWfU9AJ7Cb/3MAXZn95dBLKKHsfIQmAUIq7rv6t6gU+BKCAGaEBkN9h88tLe7sgjTdjAJ5Y4OGYMIo80Aw8g4kakJyLxiDiIxABPoMwj5+XP3R0ESpP8WC1H1YuqBj4bUWwIB5gA0d/6/xFQFUpKHBJLHADyU9chTEc1BdEZqJ0O+ofb4xcPyuBIxoBQuHc4ov3w2zrwH0Nd0aBDccwgVPsjEg/4Uc4jegKfvkfMmQ9JSfECkFP0HGJeuu0TrJZhSacg9Xh4Caze2wsXC1B9GugO+BAqUIkC/QIinhYsYoEqYDt+fY2s8WXkFE5CnBIg+vaWtJuQukzy5te2l4Bz2ysTkxchshCRWERMU2BKT4RuiLT0vwagHsENPIyR7zAx2eGybws09AUZEQLHcNS5wMEdB8NjgaKyBNTuQuTLoWOAs6AHUd5DpRzxX0KMBe0M+gA4D4Hdw5mT72LJQORxkM6IfgxSC3wjyHpHEN8M8jKPtYeAq2VgvhHg9A4RvPUIKzCyBVe346SM9LZw1y5KShzOxfUhL60SmMfcNUXgisXYS/iNA/IzhNmBgH4I3E8Cxzpmgby9ffFoMSKTQxA4jZjRpI35qENZbF5Rb1SWgcwM7HsQr28KhZnVd55GPfqTkOCbaB+i2lR1uHa8nHYeda0EygJWGILHGXzndaBgz3CQ5Fb8/hSqr5E7uj4sBXBVSjlqN6FaixKHlS8BxCYtHhs/bUly9JT597U9C30/eRYiU4Nc5Q1gH+AG/gvsxJBH2vg3w9pDPTjqFDGxX0FkKOih2PtHOcbIBiPMMi5XT9eDo9/xlu+rDW2BpX+MAQnOCudRWcWFA3OwncYhrke5VpuK1SrW7+sTVgKv5NYjsr2p6TMY1QEGvhi4mmw89unWXaiX6QQEN1YHuHjpELm5lsxvV2MbhxAdWwCSiNfnCXsb7mc/Ih8hXED8J1T1k6awEAG+R+LCLqEJOL2vInwQOP46VHaSm9QYiI1nMU4xwv2oa3OHs0+LiaHuHKr/wOo/r1yuOQwcDEqVw2KdqITQBFJGelFWojITPz8kY+wmAAp3pWLkJVT7oGwkY3R5REar/Ln1qO7AyIfsLGxQ1eB60E3UDmi9kKWPOwmcvP69cM8kROYCXVB5FW18I4LToeLSbTGnKh2T9MIChLHBOI2lT9srMUDB9s7AM8CApj7H/yaZExsiOd9GnbngcjzOciPyVPOuW0RFB7ZvHnDck4FJgbOpwPoPRHpAdxs782bwQSwei3ty0aC2EVh61ANMutEy63Gi/l0VUfSJC7sIjAnhYYON4x7eNgI9KgeifDPIOyuuDygRWnGuKDcQF6roWrGxbSNgzDAgqBuV6ki7z9WT5y4DR0LdoqoVbSOgZhAi7hv4bXzEFarDG7yqbPmsgN2aovhdLdf+2jqBorIE4JGbIugZCvcsijQHr5ojN1tbVaustUWNNP6S0vy60AR+ut4Ndj7CYzdlgL7AixTtmRnRLOToVNAhQeDfR+yPr+iJrIbf/+pM62l0WP8RKNNCSCCTySuJjgT42MTnv4rqjEDvg6J+VH5T8/qynZSW+ts40EgCQtcQDcsDEN2d9IKe4U2hiR5jmG1ERt4QKrS4pkqK2zmRSQMaUsj6D5cuu3C5ppCY6IQLf2dn8CIjZk4Q+N961VnJvlxf+4Z6v/cojvsDYEQL4BXRHVTXfkysjqPfd3tA6YqOnXx293gnLgvV5xFBVa2iv/b6dEX91p+fbf9ImTnxX6gWAadbILARX+0rbEjxohwCFpBVlH1nyJea2KTFY+OduHUGeaFJoNN3gcwr1smu37qsze16y7pQ4a7pYFYj0iuAvho0jbTxJQBkrB6Ky70VGIDqamA9+WmnWtwrZ20/fN4uQA1rss52Slw8wIOZKg4/QIlTKBfY32DttobSZafDJS0Ka3YXYEx6UCXZid8/n6wJRwHIXrsEI7kB6+xHtQTDn8hLPQuipBb2oJOkgSQBPREuAlupq98cfa6mXsXnOFpfV5uQMBRxlMpP/kJpbmP4tNHC3SNBNiLycJAbleLlOXLGVTB33edRLUBkepAuegyRd1D7Pphh10Wr5mJuMT5fNo67L45NQSUlIBqsYlXqkqaiGy51es3eWQh5CDfmUeufTcaE9QBkFY7AyIuImXxT3bfI7doUvQayFbUDMSZYRHiLq64n2JByOXzvBzLGbkJ1GarnP4OPmBt60Or0v+E381Fdj+ILOhYT4p1ADOhTzcA3EdjeXvCtEwDIGNc0J6vNB/0FDXXbmk9uc05wMSYLq+nAgYArtWJ3keYW0eVUVheE9/3ArbYXkND+mbO2H8gk0AnAlGZAb3WlWpQ/I/o6q9JevWMxIyJdWWZ+V4xnOUaebQH4MVS2I/59eO3bFGbWdEiNiVhrmVncH+NfhMg0IA4RH1bfQnQlq9LKwiYnRbTB/9HmKLrWfg2j94HUoI1/Z3XOOe6te+vuWf8DkM0cb7DOQZgAAAAASUVORK5CYII='  # nopep8'
 
 
 def get_redis_connection(config: CFG) -> Redis:
@@ -96,3 +124,4 @@ def password_generator(
     :return: password as string
     """
     return ''.join(random.choice(chars) for char_number in range(length))
+

backend/tracim_backend/models/applications.py

@@ -36,6 +36,12 @@ class Application(object):
         self.config = config
         self.main_route = main_route
 
+    # TODO - G.M - 2018-08-07 - Refactor slug coherence issue like this one.
+    # we probably should not have 2 kind of slug
+    @property
+    def minislug(self):
+        return self.slug.replace('contents/', '')
+
 
 # default apps
 calendar = Application(

backend/tracim_backend/models/context_models.py

@@ -5,8 +5,11 @@ from enum import Enum
 
 from slugify import slugify
 from sqlalchemy.orm import Session
-from tracim_backend import CFG
+from tracim_backend.config import CFG
 from tracim_backend.config import PreviewDim
+from tracim_backend.lib.utils.utils import get_root_frontend_url
+from tracim_backend.lib.utils.utils import CONTENT_FRONTEND_URL_SCHEMA
+from tracim_backend.lib.utils.utils import WORKSPACE_FRONTEND_URL_SCHEMA
 from tracim_backend.models import User
 from tracim_backend.models.auth import Profile
 from tracim_backend.models.data import Content
@@ -14,7 +17,7 @@ from tracim_backend.models.data import ContentRevisionRO
 from tracim_backend.models.data import Workspace
 from tracim_backend.models.data import UserRoleInWorkspace
 from tracim_backend.models.roles import WorkspaceRoles
-from tracim_backend.models.workspace_menu_entries import default_workspace_menu_entry
+from tracim_backend.models.workspace_menu_entries import default_workspace_menu_entry  # nopep8
 from tracim_backend.models.workspace_menu_entries import WorkspaceMenuEntry
 from tracim_backend.models.contents import CONTENT_TYPES
 
@@ -477,6 +480,14 @@ class WorkspaceInContext(object):
         # apps)
         return default_workspace_menu_entry(self.workspace)
 
+    @property
+    def frontend_url(self):
+        root_frontend_url = get_root_frontend_url(self.config)
+        workspace_frontend_url = WORKSPACE_FRONTEND_URL_SCHEMA.format(
+            workspace_id=self.workspace_id,
+        )
+        return root_frontend_url + workspace_frontend_url
+
 
 class UserRoleWorkspaceInContext(object):
     """
@@ -675,6 +686,16 @@ class ContentInContext(object):
         assert self._user
         return not self.content.has_new_information_for(self._user)
 
+    @property
+    def frontend_url(self):
+        root_frontend_url = get_root_frontend_url(self.config)
+        content_frontend_url = CONTENT_FRONTEND_URL_SCHEMA.format(
+            workspace_id=self.workspace_id,
+            content_type=self.content_type,
+            content_id=self.content_id,
+        )
+        return root_frontend_url + content_frontend_url
+
 
 class RevisionInContext(object):
     """

backend/tracim_backend/templates/mail/content_update_body_html.mak

@@ -45,7 +45,7 @@
             ${main_title}
             &mdash;&nbsp;<span style="font-weight: bold; color: #999; font-weight: bold;">
               ${status_label|n}
-              <img alt="status_icon" src="${status_icon_url}" style="vertical-align: middle;">
+              <img alt="" src="${status_icon_url}" style="vertical-align: middle;">
             </span>
         </td>
       </tr>
@@ -55,6 +55,8 @@
     <div id="content-body">
         <div>${content_text|n}</div>
         <div href='' id="call-to-action-container">
+            <span style=""> <a href="${call_to_action_url}"
+            id="call-to-action-button">${call_to_action_text}</a> </span> </div>
         </div>
     </div>
     

backend/tracim_backend/templates/mail/created_account_body_html.mak

@@ -68,10 +68,9 @@
         </div>
         <div id="call-to-action-container">
 
-            ${_('To go to {website_title}, please click on following link'.format(
+            ${_('To go to {website_title}, please click on following link :'.format(
                 website_title=config.WEBSITE_TITLE
             ))}
-
             <span style="">
                 <a href="${login_url}" id='call-to-action-button'>${login_url}</a>
             </span>

backend/tracim_backend/tests/library/test_webdav.py

@@ -29,6 +29,7 @@ class TestWebdavFactory(StandardTest):
         :return:
         """
         tracim_settings = {
+            'website.base_url': 'http://localhost:6543',
             'sqlalchemy.url': 'sqlite:///:memory:',
             'user.auth_token.validity': '604800',
             'depot_storage_dir': '/tmp/test/depot',

backend/tracim_backend/views/core_api/schemas.py

@@ -49,7 +49,7 @@ class UserDigestSchema(marshmallow.Schema):
     user_id = marshmallow.fields.Int(dump_only=True, example=3)
     avatar_url = marshmallow.fields.Url(
         allow_none=True,
-        example="/api/v2/assets/avatars/suri-cate.jpg",
+        example="/api/v2/asset/avatars/suri-cate.jpg",
         description="avatar_url is the url to the image file. "
                     "If no avatar, then set it to null "
                     "(and frontend will interpret this with a default avatar)",

backend/tracim_backend/views/core_api/user_controller.py

@@ -39,7 +39,6 @@ from tracim_backend.models.contents import CONTENT_TYPES
 SWAGGER_TAG__USER_ENDPOINTS = 'Users'
 
 
-
 class UserController(Controller):
 
     @hapic.with_api_doc(tags=[SWAGGER_TAG__USER_ENDPOINTS])

backend/tracim_backend/views/frontend.py

@@ -0,0 +1,67 @@
+import os
+
+from pyramid.renderers import render_to_response
+from pyramid.config import Configurator
+from tracim_backend.exceptions import PageNotFound
+from tracim_backend.models.applications import applications
+from tracim_backend.views import BASE_API_V2
+from tracim_backend.lib.utils.request import TracimRequest
+from tracim_backend.views.controllers import Controller
+import spectra
+
+INDEX_PAGE_NAME = 'index.mak'
+APP_FRONTEND_PATH = 'app/{minislug}.app.js'
+
+
+class FrontendController(Controller):
+
+    def __init__(self, dist_folder_path: str):
+        self.dist_folder_path = dist_folder_path
+
+    def _get_index_file_path(self):
+        index_file_path = os.path.join(self.dist_folder_path, INDEX_PAGE_NAME)
+        if not os.path.exists(index_file_path):
+            raise FileNotFoundError()
+        return index_file_path
+
+    def not_found_view(self, context, request: TracimRequest):
+
+        if request.path.startswith(BASE_API_V2):
+            raise PageNotFound('{} is not a valid path'.format(request.path)) from context  # nopep8
+        return self.index(context, request)
+
+    def index(self, context, request: TracimRequest):
+        app_config = request.registry.settings['CFG']
+        # TODO - G.M - 2018-08-07 - Refactor autogen valid app list for frontend
+        frontend_apps = []
+        for app in applications:
+            app_frontend_path = APP_FRONTEND_PATH.replace('{minislug}',
+                                                          app.minislug)  # nopep8
+            app_path = os.path.join(self.dist_folder_path,
+                                    app_frontend_path)  # nopep8
+            if os.path.exists(app_path):
+                frontend_apps.append(app)
+        return render_to_response(
+            self._get_index_file_path(),
+            {
+                'colors': {
+                    'primary': spectra.html('#7d4e24'),
+                },
+                'applications': frontend_apps,
+            }
+        )
+
+    def bind(self, configurator: Configurator) -> None:
+
+        configurator.add_notfound_view(self.not_found_view)
+        # index.html for /index.html and /
+        configurator.add_route('root', '/', request_method='GET')
+        configurator.add_view(self.index, route_name='root')
+        configurator.add_route('index', INDEX_PAGE_NAME, request_method='GET')
+        configurator.add_view(self.index, route_name='index')
+
+        for dirname in os.listdir(self.dist_folder_path):
+            configurator.add_static_view(
+                name=dirname,
+                path=os.path.join(self.dist_folder_path, dirname)
+            )

build_full_frontend.sh

@@ -8,80 +8,54 @@ if  [[ $1 = "-w" ]]; then
     windoz="windoz"
 fi
 
-echo -e "\n${BROWN}/!\ ${NC}this script does not run 'npm install'\n${BROWN}/!\ ${NC}it also assumes your webpack dev server of frontend is running"
+echo -e "\n${BROWN}/!\ ${NC}this script does not run 'npm install'\n${BROWN}/!\ ${NC}"
+
+# get the new sources
+git pull origin develop
+
+# create folder frontend/dist/app/ if no exists
+if [ ! -d "frontend/dist/app/" ]; then
+  mkdir frontend/dist/app/
+fi
 
 # Tracim Lib
-log "build frontend_lib"
 (
+  log "build frontend_lib"
   cd frontend_lib || exit
   npm run buildtracimlib$windoz
 )
 
 
 # app Html Document
-log "build frontend_app_html-document"
 (
   cd frontend_app_html-document || exit
-  npm run build$windoz
+  ./build_html-document.sh
 )
 
-log "copying built file to frontend/"
-cp frontend_app_html-document/dist/html-document.app.js frontend/dist/app/
-
-log "copying en translation.json"
-cp frontend_app_html-document/i18next.scanner/en/translation.json frontend/dist/app/html-document_en_translation.json
-
-log "copying fr translation.json"
-cp frontend_app_html-document/i18next.scanner/fr/translation.json frontend/dist/app/html-document_fr_translation.json
-
 
 # app Thread
-log "build frontend_app_thread"
 (
   cd frontend_app_thread || exit
-  npm run build$windoz
+  ./build_thread.sh
 )
 
-log "copying built file to frontend/"
-cp frontend_app_thread/dist/thread.app.js frontend/dist/app/
-
-log "copying Thread en translation.json"
-cp frontend_app_thread/i18next.scanner/en/translation.json frontend/dist/app/thread_en_translation.json
-
-log "copying Thread fr translation.json"
-cp frontend_app_thread/i18next.scanner/fr/translation.json frontend/dist/app/thread_fr_translation.json
-
 
 # app Workspace
-log "build frontend_app_workspace"
 (
   cd frontend_app_workspace || exit
-  npm run build$windoz
+  ./build_workspace.sh
 )
 
-log "copying built file to frontend/"
-cp frontend_app_workspace/dist/workspace.app.js frontend/dist/app/
-
-log "copying Thread en translation.json"
-cp frontend_app_workspace/i18next.scanner/en/translation.json frontend/dist/app/workspace_en_translation.json
-
-log "copying Thread fr translation.json"
-cp frontend_app_workspace/i18next.scanner/fr/translation.json frontend/dist/app/workspace_fr_translation.json
-
 # app Admin Workspace User
-log "build frontend_app_admin_workspace_user"
 (
   cd frontend_app_admin_workspace_user || exit
-  npm run build$windoz
+  ./build_admin_workspace_user.sh
 )
 
-log "copying built file to frontend/"
-cp frontend_app_admin_workspace_user/dist/admin_workspace_user.app.js frontend/dist/app/
-
-log "copying Thread en translation.json"
-cp frontend_app_admin_workspace_user/i18next.scanner/en/translation.json frontend/dist/app/admin_workspace_user_en_translation.json
-
-log "copying Thread fr translation.json"
-cp frontend_app_admin_workspace_user/i18next.scanner/fr/translation.json frontend/dist/app/admin_workspace_user_fr_translation.json
+# build Tracim
+(
+  cd frontend || exit
+  npm run build
+)
 
-log "frontend fully built"
+log "-- frontend build successful."

color.json.sample

@@ -0,0 +1,6 @@
+{
+  "primary": "#7d4e24",
+  "html-document": "#3f52e3",
+  "thread": "#ad4cf9",
+  "file": "#ff9900"
+}

frontend/.gitignore

@@ -1,4 +1,6 @@
 # Created by .ignore support plugin (hsz.mobi)
-.idea/
 .git/
 node_modules/
+dist/asset/tracim.app.entry.js
+dist/asset/tracim.vendor.bundle.js
+dist/asset/images/

frontend/dist/index.html

@@ -1,69 +1,67 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset='utf-8' />
-    <meta name="viewport" content="width=device-width, user-scalable=no">
-    <title>Tracim</title>
-    <link rel='shortcut icon' type='image/x-icon' href='/asset/favicon.ico' >
+<head>
+  <meta charset='utf-8' />
+  <meta name="viewport" content="width=device-width, user-scalable=no">
+  <title>Tracim</title>
+  <link rel='shortcut icon' type='image/x-icon' href='/asset/favicon.ico' >
 
-    <link rel="stylesheet" type="text/css" href="/font/font-awesome-4.7.0/css/font-awesome.css">
-    <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">
-    <!--
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
-    -->
-    <link rel="stylesheet" type="text/css" href="/asset/hamburger/hamburgers.min.css">
-    <link rel="stylesheet" type="text/css" href="/dev/bootstrap-4.0.0-beta.css">
+  <link rel="stylesheet" type="text/css" href="/asset/font/font-awesome-4.7.0/css/font-awesome.css">
+  <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">
+  <!--
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
+  -->
+  <link rel="stylesheet" type="text/css" href="/asset/hamburger/hamburgers.min.css">
+  <link rel="stylesheet" type="text/css" href="/asset/bootstrap/bootstrap-4.0.0-beta.css">
 
-    <style>
-      /* code bellow will be generated by backend */
-      .primaryColorFont { color: #7d4e24; }
-      .primaryColorFontDarken { color: #572800; }
-      .primaryColorFontLighten { color: #a3744a; }
-      .whiteFontColor {color: #fdfdfd;}
+  <style>
+    .primaryColorFont { color: #7d4e24; }
+    .primaryColorFontDarken { color: #522c00; }
+    .primaryColorFontLighten { color: #a37346; }
 
-      .primaryColorFontHover:hover { color: #7d4e24; }
-      .primaryColorFontDarkenHover:hover { color: #572800; }
-      .primaryColorFontLightenHover:hover { color: #a3744a; }
+    .primaryColorFontHover:hover { color: #7d4e24; }
+    .primaryColorFontDarkenHover:hover { color: #522c00; }
+    .primaryColorFontLightenHover:hover { color: #a37346; }
 
-      .primaryColorBg { background-color: #7d4e24; }
-      .primaryColorBgDarken { background-color: #572800; }
-      .primaryColorBgLighten { background-color: #a3744a; }
 
-      .primaryColorBgHover:hover { background-color: #7d4e24; }
-      .primaryColorBgDarkenHover:hover { background-color: #572800; }
-      .primaryColorBgLightenHover:hover { background-color: #a3744a; }
+    .primaryColorBg { background-color: #7d4e24; }
+    .primaryColorBgDarken { background-color: #522c00; }
+    .primaryColorBgLighten { background-color: #a37346; }
 
-      .primaryColorBorder { border-color: #7d4e24; }
-      .primaryColorBorderDarken { border-color: #572800; }
-      .primaryColorBorderLighten { border-color: #a3744a; }
+    .primaryColorBgHover:hover { background-color: #7d4e24; }
+    .primaryColorBgDarkenHover:hover { background-color: #522c00; }
+    .primaryColorBgLightenHover:hover { background-color: #a37346; }
 
-      .primaryColorBorderHover:hover { border-color: #7d4e24; }
-      .primaryColorBorderDarkenHover:hover { border-color: #572800; }
-      .primaryColorBorderLightenHover:hover { border-color: #a3744a; }
 
-    </style>
-  </head>
+    .primaryColorBorder { border-color: #7d4e24; }
+    .primaryColorBorderDarken { border-color: #522c00; }
+    .primaryColorBorderLighten { border-color: #a37346; }
 
-  <body>
-    <div id='content'></div>
+    .primaryColorBorderHover:hover { border-color: #7d4e24; }
+    .primaryColorBorderDarkenHover:hover { border-color: #522c00; }
+    .primaryColorBorderLightenHover:hover { border-color: #a37346; }
+  </style>
+</head>
 
-    <script src='/tracim.vendor.bundle.js'></script>
-    <script src='/tracim.app.entry.js'></script>
+<body>
+<div id='content'></div>
 
-    <script src='/app/workspace.app.js'></script>
-    <script src='/app/html-document.app.js'></script>
-    <script src='/app/thread.app.js'></script>
-    <!-- <script src='/app/file.app.js'></script> -->
-    <script src='/app/admin_workspace_user.app.js'></script>
+<script type='text/javascript' src='/asset/tracim.vendor.bundle.js'></script>
+<script type='text/javascript' src='/asset/tracim.app.entry.js'></script>
 
-    <script src="/dev/jquery-3.2.1.js"></script>
-    <script src="/dev/popper-1.12.3.js"></script>
-    <script src="/dev/bootstrap-4.0.0-beta.2.js"></script>
+<script type='text/javascript' src='/app/workspace.app.js'></script>
+<script type='text/javascript' src='/app/html-document.app.js'></script>
+<script type='text/javascript' src='/app/thread.app.js'></script>
+<script type='text/javascript' src='/app/admin_workspace_user.app.js'></script>
 
-    <script type="text/javascript" src="/asset/tinymce/js/tinymce/jquery.tinymce.min.js"></script>
-    <script type="text/javascript" src="/asset/tinymce/js/tinymce/tinymce.min.js"></script>
+<script type='text/javascript' src='/asset/bootstrap/jquery-3.2.1.js'></script>
+<script type='text/javascript' src='/asset/bootstrap/popper-1.12.3.js'></script>
+<script type='text/javascript' src='/asset/bootstrap/bootstrap-4.0.0-beta.2.js'></script>
 
-    <script type='text/javascript' src='/appInterface.js'></script>
-    <script type='text/javascript' src='/tinymceInit.js'></script>
-  </body>
+<script type='text/javascript' src='/asset/tinymce/js/tinymce/jquery.tinymce.min.js'></script>
+<script type='text/javascript' src='/asset/tinymce/js/tinymce/tinymce.min.js'></script>
+
+<script type='text/javascript' src='/asset/tracim/appInterface.js'></script>
+<script type='text/javascript' src='/asset/tracim/tinymceInit.js'></script>
+</body>
 </html>

frontend/dist/index.mak

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset='utf-8' />
+    <meta name="viewport" content="width=device-width, user-scalable=no">
+    <title>Tracim</title>
+    <link rel='shortcut icon' type='image/x-icon' href='/asset/favicon.ico' >
+
+    <link rel="stylesheet" type="text/css" href="/asset/font/font-awesome-4.7.0/css/font-awesome.css">
+    <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">
+    <!--
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
+    -->
+    <link rel="stylesheet" type="text/css" href="/asset/hamburger/hamburgers.min.css">
+    <link rel="stylesheet" type="text/css" href="/asset/bootstrap/bootstrap-4.0.0-beta.css">
+
+    <style>
+      <%
+        primary = colors['primary']
+        html_class = '.primaryColorFont{state}'
+        param = 'color'
+        color_change_value = 15
+      %>
+      ${html_class.replace('{state}', '')} { ${param}: ${primary.hexcode}; }
+      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken(color_change_value).hexcode}; }
+      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.brighten(color_change_value).hexcode}; }
+      <% html_class = '.primaryColorFont{state}Hover:hover' %>
+      ${html_class.replace('{state}', '')} { ${param}: ${primary.hexcode}; }
+      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken(color_change_value).hexcode}; }
+      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.brighten(color_change_value).hexcode}; }
+
+      <%
+        html_class = '.primaryColorBg{state}'
+        param = 'background-color'
+      %>
+      ${html_class.replace('{state}', '')} { ${param}: ${primary.hexcode}; }
+      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken(color_change_value).hexcode}; }
+      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.brighten(color_change_value).hexcode}; }
+      <% html_class = '.primaryColorBg{state}Hover:hover'%>
+      ${html_class.replace('{state}', '')} { ${param}: ${primary.hexcode}; }
+      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken(color_change_value).hexcode}; }
+      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.brighten(color_change_value).hexcode}; }
+
+      <%
+        param = 'border-color'
+        html_class = '.primaryColorBorder{state}'
+      %>
+      ${html_class.replace('{state}', '')} { ${param}: ${primary.hexcode}; }
+      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken(color_change_value).hexcode}; }
+      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.brighten(color_change_value).hexcode}; }
+      <% html_class = '.primaryColorBorder{state}Hover:hover' %>
+      ${html_class.replace('{state}', '')} { ${param}: ${primary.hexcode}; }
+      ${html_class.replace('{state}', 'Darken')} { ${param}: ${primary.darken(color_change_value).hexcode}; }
+      ${html_class.replace('{state}', 'Lighten')} { ${param}: ${primary.brighten(color_change_value).hexcode}; }
+    </style>
+  </head>
+
+  <body>
+    <div id='content'></div>
+
+    <script type='text/javascript' src='/asset/tracim.vendor.bundle.js'></script>
+    <script type='text/javascript' src='/asset/tracim.app.entry.js'></script>
+
+    <script type='text/javascript' src='/app/workspace.app.js'></script>
+    % for app in applications:
+    <script type='text/javascript' src='/app/${app.minislug}.app.js'></script>
+    %endfor
+    <script type='text/javascript' src='/app/admin_workspace_user.app.js'></script>
+
+    <script type='text/javascript' src='/asset/bootstrap/jquery-3.2.1.js'></script>
+    <script type='text/javascript' src='/asset/bootstrap/popper-1.12.3.js'></script>
+    <script type='text/javascript' src='/asset/bootstrap/bootstrap-4.0.0-beta.2.js'></script>
+
+    <script type='text/javascript' src='/asset/tinymce/js/tinymce/jquery.tinymce.min.js'></script>
+    <script type='text/javascript' src='/asset/tinymce/js/tinymce/tinymce.min.js'></script>
+
+    <script type='text/javascript' src='/asset/tracim/appInterface.js'></script>
+    <script type='text/javascript' src='/asset/tracim/tinymceInit.js'></script>
+  </body>
+</html>

frontend/i18next.scanner/en/translation.json

@@ -37,11 +37,6 @@
   "Change your status": "Change your status",
   "subscriber": "subscriber",
   "unsubscribed": "unsubscribed",
-  "Start a new Thread": "Start a new Thread",
-  "Writing a document": "Writing a document",
-  "Upload a file": "Upload a file",
-  "Start a videoconference": "Start a videoconference",
-  "View the Calendar": "View the Calendar",
   "Recent activity": "Recent activity",
   "Mark everything as read": "Mark everything as read",
   "See more": "See more",
@@ -50,24 +45,22 @@
   "Enter the name or email of the member": "Enter the name or email of the member",
   "Create an account": "Create an account",
   "Choose the role of the member": "Choose the role of the member",
-  "Supervisor": "Supervisor",
-  "Content Manager": "Content Manager",
-  "Contributor": "Contributor",
-  "Reader": "Reader",
   "Validate": "Validate",
   "Implement Tracim in your explorer": "Implement Tracim in your explorer",
   "Find all your documents deposited online directly on your computer via the workstation, without going through the software.": "Find all your documents deposited online directly on your computer via the workstation, without going through the software.",
   "Workspace Calendar": "Workspace Calendar",
   "Each workspace has its own calendar.": "Each workspace has its own calendar.",
   "Email Adress": "Email Adress",
-  "Explore the workspace": "Explore the workspace",
   "Old password": "Old password",
   "New password": "New password",
   "Name:": "Name:",
   "Email Adress:": "Email Adress:",
-  "An error has happened": "An error has happened",
   "You have subscribed to this workspace's notifications": "You have subscribed to this workspace's notifications",
   "Connection": "Connection",
   "Forgotten password ?": "Forgotten password ?",
-  "currently, you are ": "currently, you are "
+  "An error has happened when fetching workspace detail": "An error has happened when fetching workspace detail",
+  "An error has happened while fetching member list": "An error has happened while fetching member list",
+  "An error has happened while fetching recent activity list": "An error has happened while fetching recent activity list",
+  "An error has happened while fetching read status list": "An error has happened while fetching read status list",
+  "Hi {{name}} ! Currently, you are ": "Hi {{name}} ! Currently, you are "
 }

frontend/i18next.scanner/fr/translation.json

@@ -37,12 +37,6 @@
   "Change your status": "Changer de status",
   "subscriber": "Abonné(e)",
   "unsubscribed": "Non Abonné(e)",
-  "Start a new Thread": "Débuter une nouvelle discussion",
-  "Writing a document": "Rédiger un document",
-  "Upload a file": "Importer un fichier",
-  "Start a videoconference": "Débuter une visioconférence",
-  "View the Calendar": "Voir le Calendrier",
-  "Explore the workspace": "Explorer l'espace de travail",
   "Recent activity": "Activité récente",
   "Mark everything as read": "Tout marquer comme lu",
   "See more": "Voir plus",
@@ -50,10 +44,6 @@
   "Add a member": "Ajouter un membre",
   "Enter the name or email of the member": "Renseigner le nom ou l'email de l'utilisateur",
   "Create an account": "Créer un compte",
-  "Supervisor": "Responsable",
-  "Content Manager": "Gestionnaire de contenu",
-  "Contributor": "Contributeur",
-  "Reader": "Lecteur",
   "Validate": "Validé",
   "Implement Tracim in your explorer": "Implémenter Tracim dans votre explorateur",
   "Find all your documents deposited online directly on your computer via the workstation, without going through the software.": "Retrouvez tous vos documents déposés en ligne directement sur votre ordinateur via le poste de travail, sans passer par le logiciel.",
@@ -65,9 +55,12 @@
   "New password": "Nouveau mot de passe",
   "Name:": "Nom :",
   "Email Adress:": "Adresse mail :",
-  "An error has happened": "__NOT_TRANSLATED__",
   "You have subscribed to this workspace's notifications": "Vous êtes abonné aux notifications de cet espace de travail.",
   "Connection": "Connexion",
   "Forgotten password ?": "Mot de passe oublié ?",
-  "currently, you are ": "actuellement, vous êtes "
+  "An error has happened when fetching workspace detail": "__NOT_TRANSLATED__",
+  "An error has happened while fetching member list": "__NOT_TRANSLATED__",
+  "An error has happened while fetching recent activity list": "__NOT_TRANSLATED__",
+  "An error has happened while fetching read status list": "__NOT_TRANSLATED__",
+  "Hi {{name}} ! Currently, you are ": "Bonjour {{name}} ! Vous êtes actuellement"
 }

frontend/src/action-creator.async.js

@@ -6,11 +6,13 @@ import {
   USER_LOGOUT,
   USER_ROLE,
   USER_CONNECTED,
+  USER_KNOWN_MEMBER_LIST,
   setUserRole,
   WORKSPACE,
   WORKSPACE_LIST,
   WORKSPACE_DETAIL,
   WORKSPACE_MEMBER_LIST,
+  WORKSPACE_MEMBER_ADD,
   FOLDER,
   setFolderData,
   APP_LIST,
@@ -148,6 +150,36 @@ export const getUserRole = user => async dispatch => {
   if (fetchGetUserRole.status === 200) dispatch(setUserRole(fetchGetUserRole.json))
 }
 
+export const getUserKnownMember = (user, userNameToSearch) => dispatch => {
+  return fetchWrapper({
+    url: `${FETCH_CONFIG.apiUrl}/users/${user.user_id}/known_members?acp=${userNameToSearch}`,
+    param: {
+      headers: {
+        ...FETCH_CONFIG.headers,
+        'Authorization': 'Basic ' + user.auth
+      },
+      method: 'GET'
+    },
+    actionName: USER_KNOWN_MEMBER_LIST,
+    dispatch
+  })
+}
+
+export const putUserWorkspaceRead = (user, idWorkspace) => dispatch => {
+  return fetchWrapper({
+    url: `${FETCH_CONFIG.apiUrl}/users/${user.user_id}/workspaces/${idWorkspace}/read`,
+    param: {
+      headers: {
+        ...FETCH_CONFIG.headers,
+        'Authorization': 'Basic ' + user.auth
+      },
+      method: 'PUT'
+    },
+    actionName: USER_KNOWN_MEMBER_LIST,
+    dispatch
+  })
+}
+
 export const getWorkspaceList = user => dispatch => {
   return fetchWrapper({
     url: `${FETCH_CONFIG.apiUrl}/users/${user.user_id}/workspaces`,
@@ -238,6 +270,26 @@ export const getWorkspaceReadStatusList = (user, idWorkspace) => dispatch => {
   })
 }
 
+export const postWorkspaceMember = (user, idWorkspace, newMember) => dispatch => {
+  return fetchWrapper({
+    url: `${FETCH_CONFIG.apiUrl}/workspaces/${idWorkspace}/members`,
+    param: {
+      headers: {
+        ...FETCH_CONFIG.headers,
+        'Authorization': 'Basic ' + user.auth
+      },
+      method: 'POST',
+      body: JSON.stringify({
+        user_id: newMember.id,
+        user_email_or_public_name: newMember.name,
+        role: newMember.role
+      })
+    },
+    actionName: WORKSPACE_MEMBER_ADD,
+    dispatch
+  })
+}
+
 export const getFolderContent = (idWorkspace, idFolder) => async dispatch => {
   const fetchGetFolderContent = await fetchWrapper({
     url: `${FETCH_CONFIG.apiUrl}/workspaces/${idWorkspace}/contents/?parent_id=${idFolder}`,
@@ -252,7 +304,6 @@ export const getFolderContent = (idWorkspace, idFolder) => async dispatch => {
 }
 
 export const getAppList = user => dispatch => {
-  console.log(user)
   return fetchWrapper({
     url: `${FETCH_CONFIG.apiUrl}/system/applications`,
     param: {
@@ -260,8 +311,7 @@ export const getAppList = user => dispatch => {
         ...FETCH_CONFIG.headers,
         'Authorization': 'Basic ' + user.auth
       },
-      method: 'GET',
-      'Authorization': 'Basic ' + user.auth
+      method: 'GET'
     },
     actionName: APP_LIST,
     dispatch

frontend/src/action-creator.sync.js

@@ -17,18 +17,20 @@ export const removeFlashMessage = msg => ({ type: `${REMOVE}/${FLASH_MESSAGE}`,
 export const USER = 'User'
 export const USER_LOGIN = `${USER}/Login`
 export const USER_LOGOUT = `${USER}/Logout`
-export const USER_DATA = `${USER}/Data`
-export const USER_ROLE = `${USER}/Role`
 export const USER_CONNECTED = `${USER}/Connected`
 export const USER_DISCONNECTED = `${USER}/Disconnected`
-export const USER_LANG = `${USER}/Lang`
 export const setUserConnected = user => ({ type: `${SET}/${USER}/Connected`, user })
 export const setUserDisconnected = () => ({ type: `${SET}/${USER}/Disconnected` })
+export const USER_DATA = `${USER}/Data`
 export const updateUserData = userData => ({ type: `${UPDATE}/${USER}/Data`, data: userData })
+export const USER_ROLE = `${USER}/Role`
 export const setUserRole = userRole => ({ type: `${SET}/${USER}/Role`, userRole }) // this actually update workspaceList state
-export const setUserLang = lang => ({ type: `${SET}/${USER}/Lang`, lang })
 export const updateUserWorkspaceSubscriptionNotif = (workspaceId, subscriptionNotif) =>
   ({ type: `${UPDATE}/${USER_ROLE}/SubscriptionNotif`, workspaceId, subscriptionNotif })
+export const USER_LANG = `${USER}/Lang`
+export const setUserLang = lang => ({ type: `${SET}/${USER}/Lang`, lang })
+export const USER_KNOWN_MEMBER = `${USER}/KnownMember`
+export const USER_KNOWN_MEMBER_LIST = `${USER_KNOWN_MEMBER}/List`
 
 export const WORKSPACE = 'Workspace'
 export const WORKSPACE_CONTENT = `${WORKSPACE}/Content`
@@ -45,10 +47,13 @@ export const setWorkspaceDetail = workspaceDetail => ({ type: `${SET}/${WORKSPAC
 export const WORKSPACE_MEMBER = `${WORKSPACE}/Member`
 export const WORKSPACE_MEMBER_LIST = `${WORKSPACE_MEMBER}/List`
 export const setWorkspaceMemberList = workspaceMemberList => ({ type: `${SET}/${WORKSPACE_MEMBER_LIST}`, workspaceMemberList })
+export const WORKSPACE_MEMBER_ADD = `${WORKSPACE_MEMBER}/${ADD}`
 
 export const WORKSPACE_RECENT_ACTIVITY = `${WORKSPACE}/RecentActivity/List`
 export const WORKSPACE_RECENT_ACTIVITY_LIST = `${WORKSPACE_RECENT_ACTIVITY}/List`
 export const setWorkspaceRecentActivityList = workspaceRecentActivityList => ({ type: `${SET}/${WORKSPACE_RECENT_ACTIVITY_LIST}`, workspaceRecentActivityList })
+export const WORKSPACE_RECENT_ACTIVITY_FOR_USER_LIST = `${WORKSPACE_RECENT_ACTIVITY}/ForUser/List`
+export const setWorkspaceRecentActivityForUserList = workspaceRecentActivityForUserList => ({ type: `${SET}/${WORKSPACE_RECENT_ACTIVITY_FOR_USER_LIST}`, workspaceRecentActivityForUserList })
 
 export const WORKSPACE_READ_STATUS = `${WORKSPACE}/ReadStatus`
 export const WORKSPACE_READ_STATUS_LIST = `${WORKSPACE_READ_STATUS}/List`

frontend/src/component/Dashboard/ContentTypeBtn.styl

@@ -1,8 +1,10 @@
+@import "../../../node_modules/tracim_frontend_lib/src/css/Variable.styl"
+
 .contentTypeBtn
   display flex
   flex-direction column
   justify-content center
-  margin 0 15px
+  margin 15px
   border-radius 10px
   padding 15px
   width 230px

frontend/src/component/Dashboard/MemberList.jsx

@@ -1,16 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Checkbox } from 'tracim_frontend_lib'
+// import { Checkbox } from 'tracim_frontend_lib'
 
 require('./MemberList.styl')
 
 export class MemberList extends React.Component {
   constructor (props) {
     super(props)
-
     this.state = {
-      displayNewMemberList: true,
-      createAccountCheckbox: false
+      displayNewMemberList: true
     }
   }
 
@@ -21,7 +19,12 @@ export class MemberList extends React.Component {
   handleClickCheckboxCreateAccount = e => {
     e.preventDefault()
     e.stopPropagation()
-    this.setState(prev => ({createAccountCheckbox: !prev.createAccountCheckbox}))
+    this.props.onChangeCreateAccount(!this.props.createAccount)
+  }
+
+  handleClickBtnValidate = () => {
+    this.props.onClickValidateNewMember()
+    this.setState({displayNewMemberList: true})
   }
 
   render () {
@@ -40,7 +43,7 @@ export class MemberList extends React.Component {
               <div>
                 <ul className='memberlist__list'>
                   {props.memberList.map(m =>
-                    <li className='memberlist__list__item primaryColorBgLightenHover' key={m.id}>
+                    <li className='memberlist__list__item' key={m.id}>
                       <div className='memberlist__list__item__avatar'>
                         {m.avatarUrl ? <img src={m.avatarUrl} /> : <img src='NYI' />}
                       </div>
@@ -78,7 +81,7 @@ export class MemberList extends React.Component {
               </div>
             )
             : (
-              <form className='memberlist__form'>
+              <div className='memberlist__form'>
                 <div className='memberlist__form__close d-flex justify-content-end'>
                   <i className='fa fa-times' onClick={this.handleClickCloseAddMemberBtn} />
                 </div>
@@ -94,10 +97,34 @@ export class MemberList extends React.Component {
                       className='name__input form-control'
                       id='addmember'
                       placeholder='Nom ou Email'
-                      onChange={props.onChangeName}
+                      value={props.nameOrEmail}
+                      onChange={e => props.onChangeNameOrEmail(e.target.value)}
+                      autoComplete='off'
                     />
+
+                    {props.searchedKnownMemberList.length > 0 &&
+                      <div className='autocomplete primaryColorBorder'>
+                        {props.searchedKnownMemberList.filter((u, i) => i < 5).map(u => // only displays the first 5
+                          <div
+                            className='autocomplete__item primaryColorBgHover'
+                            onClick={() => props.onClickKnownMember(u)}
+                            key={u.user_id}
+                          >
+                            <div className='autocomplete__item__avatar primaryColorBorder'>
+                              <img src={u.avatar_url} />
+                            </div>
+
+                            <div className='autocomplete__item__name'>
+                              {u.public_name}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    }
                   </div>
 
+                  {/*
+                  // @TODO validate with DA that this checkbox is useless since the backend handle everything
                   <div className='memberlist__form__member__create'>
                     <div className='memberlist__form__member__create__checkbox mr-3'>
                       <Checkbox
@@ -111,6 +138,7 @@ export class MemberList extends React.Component {
                       {props.t('Create an account')}
                     </div>
                   </div>
+                  */}
                 </div>
 
                 <div className='memberlist__form__role'>
@@ -120,20 +148,29 @@ export class MemberList extends React.Component {
 
                   <ul className='memberlist__form__role__list'>
                     {props.roleList.map(r =>
-                      <li className='memberlist__form__role__list__item' key={r.slug}>
-                        <div className='item__radiobtn mr-3'>
-                          <input type='radio' name='role' value={r.slug} />
-                        </div>
-
-                        <div className='item__text'>
-                          <div className='item_text_icon mr-2' style={{color: r.hexcolor}}>
-                            <i className={`fa fa-${r.faIcon}`} />
+                      <li key={r.slug}>
+                        <label className='memberlist__form__role__list__item' htmlFor={r.slug}>
+                          <div className='item__radiobtn mr-3'>
+                            <input
+                              id={r.slug}
+                              type='radio'
+                              name='role'
+                              value={r.slug}
+                              checked={r.slug === props.role}
+                              onChange={() => props.onChangeRole(r.slug)}
+                            />
                           </div>
 
-                          <div className='item__text__name'>
-                            {r.label}
+                          <div className='item__text'>
+                            <div className='item__text__icon mr-2' style={{color: r.hexcolor}}>
+                              <i className={`fa fa-${r.faIcon}`} />
+                            </div>
+
+                            <div className='item__text__name'>
+                              {r.label}
+                            </div>
                           </div>
-                        </div>
+                        </label>
                       </li>
                     )}
 
@@ -141,11 +178,11 @@ export class MemberList extends React.Component {
                 </div>
 
                 <div className='memberlist__form__submitbtn'>
-                  <button className='btn btn-outline-primary'>
+                  <button className='btn btn-outline-primary' onClick={this.handleClickBtnValidate}>
                     {props.t('Validate')}
                   </button>
                 </div>
-              </form>
+              </div>
             )
           }
         </div>

frontend/src/component/Dashboard/MemberList.styl

@@ -1,3 +1,5 @@
+@import "../../../node_modules/tracim_frontend_lib/src/css/Variable.styl"
+
 .memberlist
   margin 0 0 50px 0
   width 35%
@@ -76,11 +78,38 @@
         cursor pointer
     &__member
       &__name
+        position relative
+        margin 0 0 20px 0
         .name__label
           margin 30px 0 20px 0
           label()
+        .autocomplete
+          position absolute
+          min-width 300px
+          background-color off-white
+          border-radius 10px
+          border-width 1px
+          border-style solid
+          &__item
+            display flex
+            align-items center
+            cursor pointer
+            padding 5px 8px
+            &:first-child
+              border-top-left-radius 10px
+              border-top-right-radius 10px
+            &:last-child
+              border-bottom-left-radius 10px
+              border-bottom-right-radius 10px
+            &__avatar
+              width 45px
+              height 45px
+              border-radius 50%
+              border-width 1px
+              border-style solid
+            &__name
+              margin-left 15px
       .name__input
-        margin-bottom 20px
         border 1px solid grey
         border-radius 10px
         padding 10px
@@ -106,6 +135,7 @@
           display flex
           align-items center
           margin 10px 25px 10px 0
+          cursor pointer
           .item
             &__text
               display flex
@@ -115,3 +145,28 @@
       & > button
         padding 8px 30px
         cursor pointer
+
+@media (min-width min-sm) and (max-width: max-lg)
+  .memberlist
+    width 50%
+
+@media (min-width: min-sm) and (max-width: max-sm)
+  .memberlist
+    margin 50px 0
+    width 90%
+
+@media (max-width: max-xs)
+  .memberlist
+    margin 50px 0
+    width 100%
+    &__title
+      margin-left 10px
+    &__wrapper
+      height auto
+    &__list
+      height auto
+      overflow-Y visible
+      &__item:nth-last-child(1)
+        border-bottom 1px solid grey
+    &__btnadd
+      border-top 0

frontend/src/component/Dashboard/MoreInfo.jsx

@@ -0,0 +1,66 @@
+import React from 'react'
+
+require('./MoreInfo.styl')
+
+export const MoreInfo = props =>
+  <div className='moreinfo'>
+    <div className='moreinfo__webdav genericBtnInfoDashboard'>
+      <div
+        className='moreinfo__webdav__btn genericBtnInfoDashboard__btn'
+        onClick={props.onClickToggleWebdav}
+      >
+        <div className='moreinfo__webdav__btn__icon genericBtnInfoDashboard__btn__icon'>
+          <i className='fa fa-windows' />
+        </div>
+
+        <div className='moreinfo__webdav__btn__text genericBtnInfoDashboard__btn__text'>
+          {props.t('Implement Tracim in your explorer')}
+        </div>
+      </div>
+
+      {props.displayWebdavBtn === true &&
+      <div className='moreinfo__webdav__information genericBtnInfoDashboard__info'>
+        <div className='moreinfo__webdav__information__text genericBtnInfoDashboard__info__text'>
+          {props.t('Find all your documents deposited online directly on your computer via the workstation, without going through the software.')}'
+        </div>
+
+        <div className='moreinfo__webdav__information__link genericBtnInfoDashboard__info__link'>
+          http://algoo.trac.im/webdav/
+        </div>
+      </div>
+      }
+    </div>
+
+    <div className='moreinfo__calendar genericBtnInfoDashboard'>
+      <div className='moreinfo__calendar__wrapperBtn'>
+        <div
+          className='moreinfo__calendar__btn genericBtnInfoDashboard__btn'
+          onClick={props.onClickToggleCalendar}
+        >
+          <div className='moreinfo__calendar__btn__icon genericBtnInfoDashboard__btn__icon'>
+            <i className='fa fa-calendar' />
+          </div>
+
+          <div className='moreinfo__calendar__btn__text genericBtnInfoDashboard__btn__text d-flex align-self-center'>
+            {props.t('Workspace Calendar')}
+          </div>
+        </div>
+      </div>
+
+      <div className='moreinfo__calendar__wrapperText'>
+        {props.displayCalendarBtn === true &&
+        <div className='moreinfo__calendar__information genericBtnInfoDashboard__info'>
+          <div className='moreinfo__calendar__information__text genericBtnInfoDashboard__info__text'>
+            {props.t('Each workspace has its own calendar.')}
+          </div>
+
+          <div className='moreinfo__calendar__information__link genericBtnInfoDashboard__info__link'>
+            http://algoo.trac.im/calendar/
+          </div>
+        </div>
+        }
+      </div>
+    </div>
+  </div>
+
+export default MoreInfo

frontend/src/component/Dashboard/MoreInfo.styl

@@ -0,0 +1,30 @@
+.moreinfo
+  display flex
+  justify-content space-between
+  flexwrap wrap
+  &__webdav
+    margin 0 15px 40px 0
+    &__btn
+      width 300px
+    &__information
+      width 300px
+  &__calendar
+    display none
+    margin-bottom 100px
+    &__wrapperBtn
+      margin-right 290px
+    &__btn
+      width 300px
+    &__information
+      width 300px
+
+@media (min-width: min-sm) and (max-width: max-sm)
+  .moreinfo__webdav__information
+    width 500px
+
+@media (max-width: max-xs)
+  .moreinfo
+    &__webdav
+      margin-left 10px
+      &__information
+        width 350px

frontend/src/component/Dashboard/RecentActivity.jsx

@@ -2,36 +2,45 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 
+require('./RecentActivity.styl')
+
 export const RecentActivity = props =>
-  <div className={props.customClass}>
-    <div className={`${props.customClass}__header`}>
-      <div className={classnames(`${props.customClass}__header__title`, 'subTitle')}>
+  <div className='activity'>
+    <div className='activity__header'>
+      <div className={classnames('activity__header__title', 'subTitle')}>
         {props.t('Recent activity')}
       </div>
 
-      <div className={classnames(`${props.customClass}__header__allread`, 'btn btn-outline-primary')}>
+      <div
+        className={classnames('activity__header__allread', 'btn btn-outline-primary')}
+        onClick={props.onClickEverythingAsRead}
+      >
         {props.t('Mark everything as read')}
       </div>
     </div>
 
-    <div className={`${props.customClass}__wrapper`}>
+    <div className='activity__wrapper'>
       {props.recentActivityFilteredForUser.map(content => {
         const contentType = props.contentTypeList.find(ct => ct.slug === content.type)
         return (
-          <div className={`${props.customClass}__workspace`} key={content.id}>
-            <div className={`${props.customClass}__workspace__icon`} style={{color: contentType.hexcolor}}>
+          <div
+            className='activity__workspace'
+            onClick={() => props.onClickRecentContent(content.id, content.type)}
+            key={content.id}
+          >
+            <div className='activity__workspace__icon' style={{color: contentType.hexcolor}}>
               <i className={`fa fa-${contentType.faIcon}`} />
             </div>
-            <div className={`${props.customClass}__workspace__name`}>
+            <div className='activity__workspace__name'>
               {content.label}
             </div>
           </div>
         )
       })}
 
-      <div className={classnames(`${props.customClass}__more`, 'd-flex flex-row-reverse')}>
+      <div className={classnames('activity__more', 'd-flex flex-row-reverse')}>
         <div
-          className={classnames(`${props.customClass}__more__btn`, 'btn btn-outline-primary')}
+          className={classnames('activity__more__btn', 'btn btn-outline-primary')}
           onClick={props.onClickSeeMore}
         >
           {props.t('See more')}

frontend/src/component/Dashboard/RecentActivity.styl

@@ -0,0 +1,67 @@
+@import "../../../node_modules/tracim_frontend_lib/src/css/Variable.styl"
+
+.activity
+  margin 0 35px 50px 0
+  width 60%
+  &__wrapper
+    border 1px solid grey
+    height 480px
+    overflow-y scroll
+  &__header
+    display flex
+    justify-content space-between
+    align-items center
+    margin-bottom 20px
+    height 44px
+    &__allread
+      padding 10px 25px
+      font-size 18px
+      cursor pointer
+  &__workspace
+    display flex
+    align-items center
+    border-bottom 1px solid grey
+    padding 15px
+    cursor pointer
+    &:hover
+      background-color fourthColor
+    &:nth-child(even)
+      background-color grey-hover
+      &:hover
+        background-color fourthColor
+    &__icon
+      margin 0 25px
+      font-size 25px
+    &__name
+      font-size 18px
+      font-weight 500
+      span
+        font-weight 400
+  &__more
+    &__btn
+      margin 15px
+      padding 10px 25px
+      cursor pointer
+
+@media (min-width min-sm) and (max-width: max-lg)
+  .activity
+    width 100%
+
+@media (min-width: min-md) and (max-width: max-md)
+  .activity
+    margin 25px 15px 25px 0
+
+@media (min-width: min-sm) and (max-width: max-sm)
+  .activity
+    margin 25px 15px 25px 0
+
+@media (max-width: max-xs)
+  .activity
+    margin 25px 0
+    width 100%
+    &__header
+      display block
+      height auto
+      margin 0 15px 20px 15px
+      &__title
+        margin-bottom 20px

frontend/src/component/Dashboard/UserStatus.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import {ROLE} from '../../helper.js'
+
+require('./UserStatus.styl')
+
+// @TODO Côme - 2018/08/07 - since api yet doesn't handle notification subscriptions, this file is WIP
+export const UserStatus = props =>
+  <div className='userstatus'>
+    <div className='userstatus__role'>
+      <div className='userstatus__role__msg'>
+        {props.t('Hi {{name}} ! Currently, you are ', {name: props.user.public_name})}
+      </div>
+
+      {(() => {
+        const myself = props.curWs.memberList.find(m => m.id === props.user.user_id)
+        if (myself === undefined) return
+
+        const myRole = ROLE.find(r => r.slug === myself.role)
+
+        return (
+          <div className='userstatus__role__definition'>
+            <div className='userstatus__role__definition__icon'>
+              <i className={`fa fa-${myRole.faIcon}`} />
+            </div>
+
+            <div className='userstatus__role__definition__text'>
+              {myRole.label}
+            </div>
+          </div>
+        )
+      })()}
+    </div>
+
+    <div className='userstatus__notification'>
+      <div className='userstatus__notification__text'>
+        {props.t("You have subscribed to this workspace's notifications")} (NYI)
+      </div>
+
+      {props.displayNotifBtn
+        ? (
+          <div className='userstatus__notification__subscribe dropdown'>
+            <button
+              className='userstatus__notification__subscribe__btn btn btn-outline-primary dropdown-toggle'
+              type='button'
+              id='dropdownMenuButton'
+              data-toggle='dropdown'
+              aria-haspopup='true'
+              aria-expanded='false'
+            >
+              {props.t('subscribed')}
+            </button>
+
+            <div className='userstatus__notification__subscribe__submenu dropdown-menu'>
+              <div className='userstatus__notification__subscribe__submenu__item dropdown-item'>
+                {props.t('subscriber')}
+              </div>
+              <div className='userstatus__notification__subscribe__submenu__item dropdown-item dropdown-item'>
+                {props.t('unsubscribed')}
+              </div>
+            </div>
+          </div>
+        )
+        : (
+          <div
+            className='userstatus__notification__btn btn btn-outline-primary'
+            onClick={props.onClickToggleNotifBtn}
+          >
+            {props.t('Change your status')}
+          </div>
+        )
+      }
+    </div>
+  </div>
+
+export default UserStatus

frontend/src/component/Dashboard/UserStatus.styl

@@ -0,0 +1,30 @@
+@import "../../../node_modules/tracim_frontend_lib/src/css/Variable.styl"
+
+.userstatus
+  width 35%
+  &__role
+    margin 20px 0
+    font-size 18px
+    &__msg
+      margin-right 15px
+    &__definition
+      display flex
+      &__icon
+        margin-right 15px
+        color gestionnaire
+  &__notification
+    font-size 18px
+    &__btn
+      margin 20px 0
+      border 1px solid thirdColor
+      padding 10px 15px
+      cursor pointer
+    &__subscribe
+      &__btn
+        margin 20px 0
+        border 1px solid thirdColor
+        padding 10px 15px
+      &__submenu
+        padding 0
+        &__item
+          padding 10px

frontend/src/component/Sidebar/WorkspaceListItem.jsx

@@ -7,27 +7,27 @@ import { Link } from 'react-router-dom'
 
 const WorkspaceListItem = props => {
   return (
-    <li className='sidebar__navigation__workspace__item'>
+    <li className='sidebar__content__navigation__workspace__item'>
       <div
-        className='sidebar__navigation__workspace__item__wrapper primaryColorBg primaryColorBgDarkenHover primaryColorBorder'
+        className='sidebar__content__navigation__workspace__item__wrapper primaryColorBg primaryColorBgDarkenHover primaryColorBorder'
         onClick={props.onClickTitle}
       >
-        <div className='sidebar__navigation__workspace__item__number'>
+        <div className='sidebar__content__navigation__workspace__item__number'>
           {props.label.substring(0, 2).toUpperCase()}
         </div>
 
-        <div className='sidebar__navigation__workspace__item__name' title={props.label}>
+        <div className='sidebar__content__navigation__workspace__item__name' title={props.label}>
           {props.label}
         </div>
 
-        <div className='sidebar__navigation__workspace__item__icon'>
+        <div className='sidebar__content__navigation__workspace__item__icon'>
           <i className={classnames(props.isOpenInSidebar ? 'fa fa-chevron-up' : 'fa fa-chevron-down')} />
         </div>
       </div>
 
       <AnimateHeight duration={500} height={props.isOpenInSidebar ? 'auto' : 0}>
         <ul
-          className='sidebar__navigation__workspace__item__submenu'
+          className='sidebar__content__navigation__workspace__item__submenu'
           id={`sidebarSubMenu_${props.number}`}
         >
           { props.allowedApp.map(aa =>
@@ -37,14 +37,14 @@ const WorkspaceListItem = props => {
             >
               <Link to={aa.route}>
                 <div className={classnames(
-                  'sidebar__navigation__workspace__item__submenu__dropdown primaryColorBgLighten primaryColorBgHover primaryColorBorderDarken',
+                  'sidebar__content__navigation__workspace__item__submenu__dropdown primaryColorBgLighten primaryColorBgHover primaryColorBorderDarken',
                   {'activeFilter': props.activeFilterList.includes(aa.slug)}
                 )}>
                   <div className='dropdown__icon'>
                     <i className={classnames(`fa fa-${aa.faIcon}`)} style={{backgroudColor: aa.hexcolor}} />
                   </div>
 
-                  <div className='sidebar__navigation__workspace__item__submenu__dropdown__showdropdown'>
+                  <div className='sidebar__content__navigation__workspace__item__submenu__dropdown__showdropdown'>
                     <div className='dropdown__title' id='navbarDropdown'>
                       <div className='dropdown__title__text'>
                         {aa.label/* [props.lang.id] */}

frontend/src/component/common/Input/SubDropdownCreateButton.jsx

@@ -15,7 +15,7 @@ const SubDropdownCreateButton = props => {
                 style={{color: app.hexcolor}}
               />
             </div>
-            <div className='subdropdown__link__folder__text'>
+            <div className={`subdropdown__link__${app.slug}__text`}>
               {app.creationLabel}
             </div>
           </div>

frontend/src/container/AdminWorkspacePage.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import PropTypes from 'prop-types'
 import Sidebar from './Sidebar.jsx'
 import {
   Delimiter,
@@ -27,98 +26,116 @@ class AdminWorkspacePage extends React.Component {
               This page informs all workspaces of the instances
             </div>
 
-            <div className='adminWorkspacePage__createworkspace'>
-              <button className='adminWorkspacePage__createworkspace__btncreate btn btn-primary primaryColorBg primaryColorBorder primaryColorBorderDarkenHover'>
-                {this.props.t('Create a workspace')}
-              </button>
-            </div>
+            { /*
+              Alexi Cauvin 08/08/2018 => desactivate create workspace button due to redundancy
+
+              <div className='adminWorkspacePage__createworkspace'>
+                <button className='adminWorkspacePage__createworkspace__btncreate btn btn-primary primaryColorBg primaryColorBorder primaryColorBorderDarkenHover'>
+                  {this.props.t('Create a workspace')}
+                </button>
+              </div>
+            */ }
 
             <Delimiter customClass={'adminWorkspacePage__delimiter'} />
 
             <div className='adminWorkspacePage__workspaceTable'>
 
-              <table class='table'>
+              <table className='table'>
                 <thead>
                   <tr>
-                    <th scope='col'># ID</th>
+                    <th scope='col'>ID</th>
                     <th scope='col'>Workspace</th>
                     <th scope='col'>Description</th>
-                    <th scope='col'>Users</th>
-                    <th scope='col'>Calendar</th>
+                    <th scope='col'>Member's number</th>
+                    { /*
+                      <th scope='col'>Calendar</th>
+                    */ }
                   </tr>
                 </thead>
                 <tbody>
                   <tr>
-                    <th>#1</th>
+                    <th>1</th>
                     <td>Design v_2</td>
                     <td>Workspace about tracim v2 design</td>
-                    <td>8 users</td>
-                    <td className='d-flex align-items-center flex-wrap'>
-                      <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
-                        <i className='fa fa-fw fa-check-square-o' />
-                      </div>
-                      Enable
-                    </td>
+                    <td>8 members</td>
+                    { /*
+                      <td className='d-flex align-items-center flex-wrap'>
+                        <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
+                          <i className='fa fa-fw fa-check-square-o' />
+                        </div>
+                        Enable
+                      </td>
+                    */ }
                   </tr>
                   <tr>
-                    <th>#2</th>
+                    <th>2</th>
                     <td>New features</td>
                     <td>Add a new features : Annotated files</td>
-                    <td>5 users</td>
-                    <td className='d-flex align-items-center flex-wrap'>
-                      <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
-                        <i className='fa fa-fw fa-square-o' />
-                      </div>
-                      Disable
-                    </td>
+                    <td>5 members</td>
+                    { /*
+                      <td className='d-flex align-items-center flex-wrap'>
+                        <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
+                          <i className='fa fa-fw fa-square-o' />
+                        </div>
+                        Disable
+                      </td>
+                    */ }
                   </tr>
                   <tr>
-                    <th>#3</th>
+                    <th>3</th>
                     <td>Fix Backend</td>
                     <td>workspace referring to multiple issues on the backend </td>
-                    <td>3 users</td>
-                    <td className='d-flex align-items-center flex-wrap'>
-                      <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
-                        <i className='fa fa-fw fa-check-square-o' />
-                      </div>
-                      Enable
-                    </td>
+                    <td>3 members</td>
+                    { /*
+                      <td className='d-flex align-items-center flex-wrap'>
+                        <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
+                          <i className='fa fa-fw fa-check-square-o' />
+                        </div>
+                        Enable
+                      </td>
+                    */ }
                   </tr>
                   <tr>
-                    <th>#4</th>
+                    <th>4</th>
                     <td>Design v_2</td>
                     <td>Workspace about tracim v2 design</td>
-                    <td>8 users</td>
-                    <td className='d-flex align-items-center flex-wrap'>
-                      <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
-                        <i className='fa fa-fw fa-square-o' />
-                      </div>
-                      Disable
-                    </td>
+                    <td>8 members</td>
+                    { /*
+                      <td className='d-flex align-items-center flex-wrap'>
+                        <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
+                          <i className='fa fa-fw fa-square-o' />
+                        </div>
+                        Disable
+                      </td>
+                    */ }
                   </tr>
                   <tr>
-                    <th>#5</th>
+                    <th>5</th>
                     <td>New features</td>
                     <td>Add a new features : Annotated files</td>
-                    <td>5 users</td>
-                    <td className='d-flex align-items-center flex-wrap'>
-                      <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
-                        <i className='fa fa-fw fa-square-o' />
-                      </div>
-                      Disable
-                    </td>
+                    <td>5 members</td>
+                    { /*
+                      <td className='d-flex align-items-center flex-wrap'>
+                        <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
+                          <i className='fa fa-fw fa-square-o' />
+                        </div>
+                        Disable
+                      </td>
+                    */ }
                   </tr>
                   <tr>
-                    <th>#6</th>
+                    <th>6</th>
                     <td>Fix Backend</td>
                     <td>workspace referring to multiple issues on the backend </td>
-                    <td>3 users</td>
-                    <td className='d-flex align-items-center flex-wrap'>
-                      <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
-                        <i className='fa fa-fw fa-check-square-o' />
-                      </div>
-                      Enable
-                    </td>
+                    <td>3 members</td>
+                    { /*
+                      <td className='d-flex align-items-center flex-wrap'>
+                        <div className='adminWorkspacePage__workspaceTable__calendaricon mr-2'>
+                          <i className='fa fa-fw fa-check-square-o' />
+                        </div>
+                        Enable
+                      </td>
+                    */ }
                   </tr>
                 </tbody>
               </table>
@@ -131,8 +148,4 @@ class AdminWorkspacePage extends React.Component {
   }
 }
 
-AdminWorkspacePage.propTypes = {
-  availableApp: PropTypes.array.isRequired
-}
-
 export default translate()(AdminWorkspacePage)

frontend/src/container/AppFullscreenManager.jsx

@@ -9,11 +9,11 @@ class AppFullscreenManager extends React.Component {
   constructor (props) {
     super(props)
     this.state = {
-      AmIMounted: false
+      isMounted: false
     }
   }
 
-  componentDidMount = () => this.setState({AmIMounted: true})
+  componentDidMount = () => this.setState({isMounted: true})
 
   render () {
     const { props } = this
@@ -22,7 +22,7 @@ class AppFullscreenManager extends React.Component {
       <div className='AppFullScreenManager'>
         <div id='appFullscreenContainer' />
 
-        {this.state.AmIMounted && (// we must wait for the component to be fully mounted to be sure the div#appFullscreenContainer exists in DOM
+        {this.state.isMounted && (// we must wait for the component to be fully mounted to be sure the div#appFullscreenContainer exists in DOM
           <div className='emptyDiForRoute'>
             <Route path={PAGE.ADMIN.WORKSPACE} render={() => {
               props.renderAppFullscreen({slug: 'admin_workspace_user', hexcolor: '#7d4e24', type: 'workspace'}, props.user, {})

frontend/src/container/Dashboard.jsx

@@ -10,25 +10,39 @@ import {
   getWorkspaceDetail,
   getWorkspaceMemberList,
   getWorkspaceRecentActivityList,
-  getWorkspaceReadStatusList
+  getWorkspaceReadStatusList,
+  getUserKnownMember,
+  postWorkspaceMember,
+  putUserWorkspaceRead
 } from '../action-creator.async.js'
 import {
   newFlashMessage,
   setWorkspaceDetail,
   setWorkspaceMemberList,
   setWorkspaceRecentActivityList,
+  setWorkspaceRecentActivityForUserList,
   setWorkspaceReadStatusList
 } from '../action-creator.sync.js'
-import { ROLE } from '../helper.js'
+import { ROLE, PAGE } from '../helper.js'
+import UserStatus from '../component/Dashboard/UserStatus.jsx'
 import ContentTypeBtn from '../component/Dashboard/ContentTypeBtn.jsx'
 import RecentActivity from '../component/Dashboard/RecentActivity.jsx'
 import MemberList from '../component/Dashboard/MemberList.jsx'
+import MoreInfo from '../component/Dashboard/MoreInfo.jsx'
 
 class Dashboard extends React.Component {
   constructor (props) {
     super(props)
     this.state = {
       workspaceIdInUrl: props.match.params.idws ? parseInt(props.match.params.idws) : null, // this is used to avoid handling the parseInt everytime
+      newMember: {
+        id: '',
+        avatarUrl: '',
+        nameOrEmail: '',
+        // createAccount: false, // @TODO ask DA about this checkbox if it is still usefull (since backend handles it all)
+        role: ''
+      },
+      searchedKnownMemberList: [],
       displayNewMemberDashboard: false,
       displayNotifBtn: false,
       displayWebdavBtn: false,
@@ -41,52 +55,126 @@ class Dashboard extends React.Component {
 
     const fetchWorkspaceDetail = await props.dispatch(getWorkspaceDetail(props.user, state.workspaceIdInUrl))
     switch (fetchWorkspaceDetail.status) {
-      case 200:
-        props.dispatch(setWorkspaceDetail(fetchWorkspaceDetail.json)); break
-      default:
-        props.dispatch(newFlashMessage(props.t('An error has happened when fetching workspace detail'), 'warning')); break
+      case 200: props.dispatch(setWorkspaceDetail(fetchWorkspaceDetail.json)); break
+      default: props.dispatch(newFlashMessage(`${props.t('An error has happened while fetching')} ${props.t('workspace detail')}`, 'warning')); break
     }
+    this.loadMemberList()
+    this.loadRecentActivity()
+  }
+
+  loadMemberList = async () => {
+    const { props, state } = this
 
     const fetchWorkspaceMemberList = await props.dispatch(getWorkspaceMemberList(props.user, state.workspaceIdInUrl))
     switch (fetchWorkspaceMemberList.status) {
-      case 200:
-        props.dispatch(setWorkspaceMemberList(fetchWorkspaceMemberList.json)); break
-      default:
-        props.dispatch(newFlashMessage(props.t('An error has happened while fetching member list'), 'warning')); break
+      case 200: props.dispatch(setWorkspaceMemberList(fetchWorkspaceMemberList.json)); break
+      default: props.dispatch(newFlashMessage(`${props.t('An error has happened while fetching')} ${props.t('member list')}`, 'warning')); break
     }
+  }
+
+  loadRecentActivity = async () => {
+    const { props, state } = this
 
     const fetchWorkspaceRecentActivityList = await props.dispatch(getWorkspaceRecentActivityList(props.user, state.workspaceIdInUrl))
+    const fetchWorkspaceReadStatusList = await props.dispatch(getWorkspaceReadStatusList(props.user, state.workspaceIdInUrl))
+
     switch (fetchWorkspaceRecentActivityList.status) {
-      case 200:
-        props.dispatch(setWorkspaceRecentActivityList(fetchWorkspaceRecentActivityList.json)); break
-      default:
-        props.dispatch(newFlashMessage(props.t('An error has happened while fetching recent activity list'), 'warning')); break
+      case 200: props.dispatch(setWorkspaceRecentActivityList(fetchWorkspaceRecentActivityList.json)); break
+      default: props.dispatch(newFlashMessage(`${props.t('An error has happened while fetching')} ${props.t('recent activity list')}`, 'warning')); break
     }
 
-    const fetchWorkspaceReadStatusList = await props.dispatch(getWorkspaceReadStatusList(props.user, state.workspaceIdInUrl))
     switch (fetchWorkspaceReadStatusList.status) {
+      case 200: props.dispatch(setWorkspaceReadStatusList(fetchWorkspaceReadStatusList.json)); break
+      default: props.dispatch(newFlashMessage(`${props.t('An error has happened while fetching')} ${props.t('read status list')}`, 'warning')); break
+    }
+
+    const readStatusForUserList = fetchWorkspaceReadStatusList.json.filter(c => c.read_by_user).map(c => c.content_id)
+    const recentActivityForUserList = fetchWorkspaceRecentActivityList.json.filter(content => !readStatusForUserList.includes(content.content_id))
+
+    props.dispatch(setWorkspaceRecentActivityForUserList(recentActivityForUserList))
+  }
+
+  handleToggleNewMemberDashboard = () => this.setState(prevState => ({displayNewMemberDashboard: !prevState.displayNewMemberDashboard}))
+
+  handleToggleNotifBtn = () => this.setState(prevState => ({displayNotifBtn: !prevState.displayNotifBtn}))
+
+  handleToggleWebdavBtn = () => this.setState(prevState => ({displayWebdavBtn: !prevState.displayWebdavBtn}))
+
+  handleToggleCalendarBtn = () => this.setState(prevState => ({displayCalendarBtn: !prevState.displayCalendarBtn}))
+
+  handleClickRecentContent = (idContent, typeContent) => this.props.history.push(PAGE.WORKSPACE.CONTENT(this.props.curWs.id, typeContent, idContent))
+
+  handleClickMarkRecentActivityAsRead = async () => {
+    const { props } = this
+    const fetchUserWorkspaceAllRead = await props.dispatch(putUserWorkspaceRead(props.user, props.curWs.id))
+    switch (fetchUserWorkspaceAllRead.status) {
+      case 204: this.loadRecentActivity(); break
+      default: props.dispatch(newFlashMessage(`${props.t('An error has happened while fetching "mark all as read"')}`, 'warning')); break
+    }
+  }
+
+  handleClickSeeMore = async () => {
+    console.log('nyi')
+  }
+
+  handleSearchUser = async userNameToSearch => {
+    const { props } = this
+    const fetchUserKnownMemberList = await props.dispatch(getUserKnownMember(props.user, userNameToSearch))
+    switch (fetchUserKnownMemberList.status) {
       case 200:
-        props.dispatch(setWorkspaceReadStatusList(fetchWorkspaceReadStatusList.json)); break
+        this.setState({searchedKnownMemberList: fetchUserKnownMemberList.json}); break
       default:
-        props.dispatch(newFlashMessage(props.t('An error has happened while fetching read status list'), 'warning')); break
+        props.dispatch(newFlashMessage(`${props.t('An error has happened while fetching')} ${props.t('known members list')}`, 'warning')); break
     }
   }
 
-  handleToggleNewMemberDashboard = () => this.setState(prevState => ({
-    displayNewMemberDashboard: !prevState.displayNewMemberDashboard
-  }))
+  handleChangeNewMemberNameOrEmail = newNameOrEmail => {
+    if (newNameOrEmail.length >= 2) this.handleSearchUser(newNameOrEmail)
+    this.setState(prev => ({newMember: {...prev.newMember, nameOrEmail: newNameOrEmail}}))
+  }
+
+  handleClickKnownMember = knownMember => {
+    this.setState(prev => ({
+      newMember: {
+        ...prev.newMember,
+        id: knownMember.user_id,
+        nameOrEmail: knownMember.public_name,
+        avatarUrl: knownMember.avatar_url
+      },
+      searchedKnownMemberList: []
+    }))
+  }
+
+  // handleChangeNewMemberCreateAccount = newCreateAccount => this.setState(prev => ({newMember: {...prev.newMember, createAccount: newCreateAccount}}))
+
+  handleChangeNewMemberRole = newRole => this.setState(prev => ({newMember: {...prev.newMember, role: newRole}}))
+
+  handleClickValidateNewMember = async () => {
+    const { props, state } = this
+
+    if (state.newMember.nameOrEmail === '') {
+      props.dispatch(newFlashMessage(props.t('Please set a name or email'), 'warning'))
+      return
+    }
 
-  handleToggleNotifBtn = () => this.setState(prevState => ({
-    displayNotifBtn: !prevState.displayNotifBtn
-  }))
+    if (state.newMember.role === '') {
+      props.dispatch(newFlashMessage(props.t('Please set a role'), 'warning'))
+      return
+    }
 
-  handleToggleWebdavBtn = () => this.setState(prevState => ({
-    displayWebdavBtn: !prevState.displayWebdavBtn
-  }))
+    const fetchWorkspaceNewMember = await props.dispatch(postWorkspaceMember(props.user, props.curWs.id, {
+      id: state.newMember.id,
+      name: state.newMember.nameOrEmail,
+      role: state.newMember.role
+    }))
 
-  handleToggleCalendarBtn = () => this.setState(prevState => ({
-    displayCalendarBtn: !prevState.displayCalendarBtn
-  }))
+    switch (fetchWorkspaceNewMember.status) {
+      case 200:
+        this.loadMemberList(); break
+      default:
+        props.dispatch(newFlashMessage(props.t('An error has happened while adding the member'), 'warning')); break
+    }
+  }
 
   render () {
     const { props, state } = this
@@ -118,72 +206,13 @@ class Dashboard extends React.Component {
                 </div>
               </div>
 
-              <div className='dashboard__userstatut'>
-                <div className='dashboard__userstatut__role'>
-                  <div className='dashboard__userstatut__role__msg'>
-                    {props.t(`Hi ! ${props.user.public_name} `)}{props.t('currently, you are ')}
-                  </div>
-
-                  {(() => {
-                    const myself = props.curWs.memberList.find(m => m.id === props.user.user_id)
-                    if (myself === undefined) return
-
-                    const myRole = ROLE.find(r => r.slug === myself.role)
-
-                    return (
-                      <div className='dashboard__userstatut__role__definition'>
-                        <div className='dashboard__userstatut__role__definition__icon'>
-                          <i className={`fa fa-${myRole.faIcon}`} />
-                        </div>
-
-                        <div className='dashboard__userstatut__role__definition__text'>
-                          {myRole.label}
-                        </div>
-                      </div>
-                    )
-                  })()}
-                </div>
-
-                <div className='dashboard__userstatut__notification'>
-                  <div className='dashboard__userstatut__notification__text'>
-                    {props.t("You have subscribed to this workspace's notifications")} (nyi)
-                  </div>
-
-                  {state.displayNotifBtn
-                    ? (
-                      <div className='dashboard__userstatut__notification__subscribe dropdown'>
-                        <button
-                          className='dashboard__userstatut__notification__subscribe__btn btn btn-outline-primary dropdown-toggle'
-                          type='button'
-                          id='dropdownMenuButton'
-                          data-toggle='dropdown'
-                          aria-haspopup='true'
-                          aria-expanded='false'
-                        >
-                          {props.t('subscriber')}
-                        </button>
-
-                        <div className='dashboard__userstatut__notification__subscribe__submenu dropdown-menu'>
-                          <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item'>
-                            {props.t('subscriber')}
-                          </div>
-                          <div className='dashboard__userstatut__notification__subscribe__submenu__item dropdown-item dropdown-item'>
-                            {props.t('unsubscribed')}
-                          </div>
-                        </div>
-                      </div>
-                    )
-                    : (
-                      <div
-                        className='dashboard__userstatut__notification__btn btn btn-outline-primary'
-                        onClick={this.handleToggleNotifBtn}
-                      >
-                        {props.t('Change your status')}
-                      </div>
-                    )
-                  }
-                </div>
-              </div>
+              <UserStatus
+                user={props.user}
+                curWs={props.curWs}
+                displayNotifBtn={state.displayNotifBtn}
+                onClickToggleNotifBtn={this.handleToggleNotifBtn}
+                t={props.t}
+              />
             </div>
 
             <div className='dashboard__calltoaction justify-content-xl-center'>
@@ -202,9 +231,11 @@ class Dashboard extends React.Component {
             <div className='dashboard__workspaceInfo'>
               <RecentActivity
                 customClass='dashboard__activity'
-                recentActivityFilteredForUser={props.curWs.recentActivityList.filter(content => !props.curWs.contentReadStatusList.includes(content.id))}
+                recentActivityFilteredForUser={props.curWs.recentActivityForUserList}
                 contentTypeList={props.contentType}
-                onClickSeeMore={() => {}}
+                onClickRecentContent={this.handleClickRecentContent}
+                onClickEverythingAsRead={this.handleClickMarkRecentActivityAsRead}
+                onClickSeeMore={this.handleClickSeeMore}
                 t={props.t}
               />
 
@@ -212,70 +243,26 @@ class Dashboard extends React.Component {
                 customClass='dashboard__memberlist'
                 memberList={props.curWs.memberList}
                 roleList={ROLE}
+                searchedKnownMemberList={state.searchedKnownMemberList}
+                nameOrEmail={state.newMember.nameOrEmail}
+                onChangeNameOrEmail={this.handleChangeNewMemberNameOrEmail}
+                onClickKnownMember={this.handleClickKnownMember}
+                // createAccount={state.newMember.createAccount}
+                // onChangeCreateAccount={this.handleChangeNewMemberCreateAccount}
+                role={state.newMember.role}
+                onChangeRole={this.handleChangeNewMemberRole}
+                onClickValidateNewMember={this.handleClickValidateNewMember}
                 t={props.t}
               />
             </div>
 
-            <div className='dashboard__moreinfo'>
-              <div className='dashboard__moreinfo__webdav genericBtnInfoDashboard'>
-                <div
-                  className='dashboard__moreinfo__webdav__btn genericBtnInfoDashboard__btn'
-                  onClick={this.handleToggleWebdavBtn}
-                >
-                  <div className='dashboard__moreinfo__webdav__btn__icon genericBtnInfoDashboard__btn__icon'>
-                    <i className='fa fa-windows' />
-                  </div>
-
-                  <div className='dashboard__moreinfo__webdav__btn__text genericBtnInfoDashboard__btn__text'>
-                    {this.props.t('Implement Tracim in your explorer')}
-                  </div>
-                </div>
-                {this.state.displayWebdavBtn === true &&
-                <div>
-                  <div className='dashboard__moreinfo__webdav__information genericBtnInfoDashboard__info'>
-                    <div className='dashboard__moreinfo__webdav__information__text genericBtnInfoDashboard__info__text'>
-                      {this.props.t('Find all your documents deposited online directly on your computer via the workstation, without going through the software.')}'
-                    </div>
-
-                    <div className='dashboard__moreinfo__webdav__information__link genericBtnInfoDashboard__info__link'>
-                      http://algoo.trac.im/webdav/
-                    </div>
-                  </div>
-                </div>
-                }
-              </div>
-              <div className='dashboard__moreinfo__calendar genericBtnInfoDashboard'>
-                <div className='dashboard__moreinfo__calendar__wrapperBtn'>
-                  <div
-                    className='dashboard__moreinfo__calendar__btn genericBtnInfoDashboard__btn'
-                    onClick={this.handleToggleCalendarBtn}
-                  >
-                    <div className='dashboard__moreinfo__calendar__btn__icon genericBtnInfoDashboard__btn__icon'>
-                      <i className='fa fa-calendar' />
-                    </div>
-
-                    <div className='dashboard__moreinfo__calendar__btn__text genericBtnInfoDashboard__btn__text'>
-                      {this.props.t('Workspace Calendar')}
-                    </div>
-                  </div>
-                </div>
-                <div className='dashboard__moreinfo__calendar__wrapperText'>
-                  {this.state.displayCalendarBtn === true &&
-                  <div>
-                    <div className='dashboard__moreinfo__calendar__information genericBtnInfoDashboard__info'>
-                      <div className='dashboard__moreinfo__calendar__information__text genericBtnInfoDashboard__info__text'>
-                        {this.props.t('Each workspace has its own calendar.')}
-                      </div>
-
-                      <div className='dashboard__moreinfo__calendar__information__link genericBtnInfoDashboard__info__link'>
-                        http://algoo.trac.im/calendar/
-                      </div>
-                    </div>
-                  </div>
-                  }
-                </div>
-              </div>
-            </div>
+            <MoreInfo
+              onClickToggleWebdav={this.handleToggleWebdavBtn}
+              displayWebdavBtn={state.displayWebdavBtn}
+              onClickToggleCalendar={this.handleToggleCalendarBtn}
+              displayCalendarBtn={state.displayCalendarBtn}
+              t={props.t}
+            />
           </PageContent>
         </PageWrapper>
       </div>

frontend/src/container/Header.jsx

@@ -65,9 +65,11 @@ class Header extends React.Component {
         <nav className='navbar navbar-expand-md navbar-light bg-light'>
           <Logo logoSrc={logoHeader} onClickImg={this.handleClickLogo} />
 
-          <div className='header__breadcrumb d-none d-lg-block ml-4'>
-            Dev Tracim - liste des contenus
-          </div>
+          { /*
+            <div className='header__breadcrumb d-none d-lg-block ml-4'>
+              Dev Tracim - liste des contenus
+            </div>
+          */ }
 
           <NavbarToggler />
 

frontend/src/container/Login.jsx

@@ -102,35 +102,36 @@ class Login extends React.Component {
                         onChange={this.handleChangePassword}
                       />
 
-                      <div className='row mt-4 mb-4'>
-                        <div className='col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6'>
-                          {/*
-                          <InputCheckbox
-                            parentClassName='connection__form__rememberme'
-                            customClass=''
-                            label='Se souvenir de moi'
-                            checked={this.state.inputRememberMe}
-                            onChange={this.handleChangeRememberMe}
-                          />
-                          */}
-                        </div>
-
-                        <div className='col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6 text-sm-right'>
+                      <div className='row align-items-center mt-4 mb-4'>
+
+                        {/*
+                          <div className='col-12 col-sm-6 col-md-6 col-lg-6 col-xl-6'>
+                            <InputCheckbox
+                              parentClassName='connection__form__rememberme'
+                              customClass=''
+                              label='Se souvenir de moi'
+                              checked={this.state.inputRememberMe}
+                              onChange={this.handleChangeRememberMe}
+                            />
+                          </div>
+                        */}
+
+                        <div className='col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6'>
                           <LoginBtnForgotPw
                             customClass='connection__form__pwforgot'
                             label={this.props.t('Forgotten password ?')}
                           />
                         </div>
+                        <Button
+                          htmlType='button'
+                          bootstrapType='primary'
+                          customClass='connection__form__btnsubmit ml-auto'
+                          label={this.props.t('Connection')}
+                          onClick={this.handleClickSubmit}
+                        />
                       </div>
-
-                      <Button
-                        htmlType='button'
-                        bootstrapType='primary'
-                        customClass='connection__form__btnsubmit ml-auto'
-                        label={this.props.t('Connection')}
-                        onClick={this.handleClickSubmit}
-                      />
                     </div>
+
                   </CardBody>
                 </Card>
 
@@ -140,8 +141,8 @@ class Login extends React.Component {
           </div>
 
           <footer className='loginpage__footer'>
-            <div className='loginpage__footer__text whiteFontColor'>
-              copyright © 2013 - 2018 tracim project.
+            <div className='loginpage__footer__text d-flex align-items-center flex wrap'>
+            copyright © 2013 - 2018 <a href='http://www.tracim.fr/' target='_blank' className='ml-3'>tracim.fr</a>
             </div>
           </footer>
 

frontend/src/container/Sidebar.jsx

@@ -106,49 +106,47 @@ class Sidebar extends React.Component {
 
     return (
       <div className={classnames('sidebar primaryColorBgDarken', {'sidebarclose': sidebarClose})}>
-        <div className='sidebarSticky'>
-          <div className='sidebar__expand primaryColorBg whiteColorBorder' onClick={this.handleClickToggleSidebar}>
-            <i className={classnames('fa fa-chevron-left', {'fa-chevron-right': sidebarClose, 'fa-chevron-left': !sidebarClose})} />
-          </div>
 
-          <div className='sidebar__wrapper'>
-
-            <nav className='sidebar__navigation'>
-              <ul className='sidebar__navigation__workspace'>
-                { workspaceList.map(ws =>
-                  <WorkspaceListItem
-                    idWs={ws.id}
-                    label={ws.label}
-                    allowedApp={ws.sidebarEntry}
-                    lang={activeLang}
-                    activeFilterList={ws.id === workspaceIdInUrl ? [qs.parse(this.props.location.search).type] : []}
-                    isOpenInSidebar={ws.isOpenInSidebar}
-                    onClickTitle={() => this.handleClickWorkspace(ws.id, !ws.isOpenInSidebar)}
-                    onClickAllContent={this.handleClickAllContent}
-                    // onClickContentFilter={this.handleClickContentFilter}
-                    key={ws.id}
-                  />
-                )}
-              </ul>
-            </nav>
-
-            <div className='sidebar__btnnewworkspace'>
-              <button
-                className='sidebar__btnnewworkspace__btn btn btn-primary primaryColorBg primaryColorBorder primaryColorBorderDarkenHover mb-5'
-                onClick={this.handleClickNewWorkspace}
-              >
-                {t('Create a workspace')}
-              </button>
-            </div>
+        <div className='sidebar__expand primaryColorBg' onClick={this.handleClickToggleSidebar}>
+          <i className={classnames('fa fa-chevron-left', {'fa-chevron-right': sidebarClose, 'fa-chevron-left': !sidebarClose})} />
+        </div>
 
+        <div className='sidebar__content'>
+          <nav className={classnames('sidebar__content__navigation', {'sidebarclose': sidebarClose})}>
+            <ul className='sidebar__content__navigation__workspace'>
+              { workspaceList.map(ws =>
+                <WorkspaceListItem
+                  idWs={ws.id}
+                  label={ws.label}
+                  allowedApp={ws.sidebarEntry}
+                  lang={activeLang}
+                  activeFilterList={ws.id === workspaceIdInUrl ? [qs.parse(this.props.location.search).type] : []}
+                  isOpenInSidebar={ws.isOpenInSidebar}
+                  onClickTitle={() => this.handleClickWorkspace(ws.id, !ws.isOpenInSidebar)}
+                  onClickAllContent={this.handleClickAllContent}
+                  // onClickContentFilter={this.handleClickContentFilter}
+                  key={ws.id}
+                />
+              )}
+            </ul>
+          </nav>
+
+          <div className='sidebar__content__btnnewworkspace'>
+            <button
+              className='sidebar__content__btnnewworkspace__btn btn btn-primary primaryColorBg primaryColorBorder primaryColorBorderDarkenHover mb-5'
+              onClick={this.handleClickNewWorkspace}
+            >
+              {t('Create a workspace')}
+            </button>
           </div>
 
-          <div className='sidebar__footer mb-2'>
-            <div className='sidebar__footer__text whiteFontColor d-flex align-items-end justify-content-center'>
-              Copyright - 2013 - 2018
-              <div className='sidebar__footer__text__link'>
-                <a href='http://www.tracim.fr/' target='_blank' className='ml-3'>tracim.fr</a>
-              </div>
+        </div>
+
+        <div className='sidebar__footer mb-2'>
+          <div className='sidebar__footer__text whiteFontColor d-flex align-items-end justify-content-center'>
+            Copyright - 2013 - 2018
+            <div className='sidebar__footer__text__link'>
+              <a href='http://www.tracim.fr/' target='_blank' className='ml-3'>tracim.fr</a>
             </div>
           </div>
         </div>

frontend/src/container/Tracim.jsx

@@ -70,6 +70,12 @@ class Tracim extends React.Component {
   render () {
     const { props } = this
 
+    if (props.user.logged === null) return null // @TODO show loader
+
+    if (props.user.logged === false && props.location.pathname !== '/login') {
+      return <Redirect to={{pathname: '/login', state: {from: props.location}}} />
+    }
+
     return (
       <div className='tracim'>
         <Header />
@@ -89,34 +95,41 @@ class Tracim extends React.Component {
             }
           }} />
 
-          { props.user.logged
-            ? (
-              <Route path='/workspaces/:idws?' render={() => // Workspace Router
-                <div className='sidebarpagecontainer'>
-                  <Sidebar />
-
-                  <Route exact path={PAGE.WORKSPACE.ROOT} render={() => props.workspaceList.length === 0 // handle '/' and redirect to first workspace
-                    ? null
+          <Route path='/workspaces/:idws?' render={() => // Workspace Router
+            <div className='sidebarpagecontainer'>
+              <Sidebar />
 
-          <PrivateRoute path='/admin_temp/workspace' component={AdminWorkspacePage} />
-
-                  <Route exact path={`${PAGE.WORKSPACE.ROOT}/:idws`} render={props2 => // handle '/workspaces/:id' and add '/contents'
-                    <Redirect to={{pathname: `/workspaces/${props2.match.params.idws}/contents`, state: {from: props.location}}} />
-                  } />
-
-                  <Route path={PAGE.WORKSPACE.DASHBOARD(':idws')} component={Dashboard} />
-                  <Route path={PAGE.WORKSPACE.CALENDAR(':idws')} component={() => <div><br /><br /><br /><br />NYI</div>} />
-                  <Route path={PAGE.WORKSPACE.CONTENT(':idws', ':type', ':idcts')} component={WorkspaceContent} />
-                  <Route exact path={PAGE.WORKSPACE.CONTENT_LIST(':idws')} component={WorkspaceContent} />
+              <Route exact path={PAGE.WORKSPACE.ROOT} render={() => props.workspaceList.length === 0 // handle '/' and redirect to first workspace
+                ? null // @FIXME this needs to be handled in case of new user that has no workspace
+                : <Redirect to={{pathname: `/workspaces/${props.workspaceList[0].id}/contents`, state: {from: props.location}}} />
+              } />
 
-                  <Route path={PAGE.ACCOUNT} component={Account} />
-                  <Route path={PAGE.ADMIN.ROOT} component={AppFullscreenManager} />
-                </div>
+              <Route exact path={`${PAGE.WORKSPACE.ROOT}/:idws`} render={props2 => // handle '/workspaces/:id' and add '/contents'
+                <Redirect to={{pathname: `/workspaces/${props2.match.params.idws}/contents`, state: {from: props.location}}} />
               } />
-            )
-            : props.user.logged === false && props.location.pathname !== '/login' &&
-              <Redirect to={{pathname: '/login', state: {from: props.location}}} />
-          }
+
+              <Route path={PAGE.WORKSPACE.DASHBOARD(':idws')} component={Dashboard} />
+              <Route path={PAGE.WORKSPACE.CALENDAR(':idws')} component={() => <div><br /><br /><br /><br />NYI</div>} />
+              <Route path={PAGE.WORKSPACE.CONTENT(':idws', ':type', ':idcts')} component={WorkspaceContent} />
+              <Route exact path={PAGE.WORKSPACE.CONTENT_LIST(':idws')} component={WorkspaceContent} />
+            </div>
+          } />
+
+          <Route path={PAGE.ACCOUNT} render={() =>
+            <div className='sidebarpagecontainer'>
+              <Sidebar />
+              <Account />
+            </div>
+          } />
+
+          <Route path={PAGE.ADMIN.ROOT} render={() =>
+            <div className='sidebarpagecontainer'>
+              <Sidebar />
+              <AppFullscreenManager />
+            </div>
+          } />
+
+          <Route path='/admin_temp/workspace' component={AdminWorkspacePage} />
 
           <Route path={'/wip/:cp'} component={WIPcomponent} /> {/* for testing purpose only */}
 

frontend/src/css/AdminWorkspacePage.styl

@@ -1,11 +1,14 @@
+.table th
+  vertical-align middle
+
 .adminWorkspacePage
   &__createworkspace
     &__btncreate
       margin 25px 15px
   &__description
-    margin 25px 15px
+    margin 25px 0
     font-size 20px
   &__delimiter
-    margin 25px auto 65px auto
+    margin 65px auto
   &__workspaceTable
     margin 25px 15px

frontend/src/css/Dashboard.styl

@@ -1,35 +1,9 @@
+@import "../../node_modules/tracim_frontend_lib/src/css/Variable.styl"
+
 flexwrap()
   display flex
   flex-wrap wrap
 
-btnNotification()
-  margin 20px 0
-  border 1px solid thirdColor
-  padding 10px 15px
-
-hoverfocus()
-  background-color thirdColor
-  color white
-
-bgandcolor()
-  background-color transparent
-  color thirdColor
-
-label()
-  font-weight 500
-  font-size 18px
-  color thirdColor
-
-coloricon()
-  .fa-gavel
-    color responsable
-  .fa-graduation-cap
-    color gestionnaire
-  .fa-pencil
-    color contributeur
-  .fa-eye
-    color lecteur
-
 .dashboard
   width 100%
   &__header
@@ -55,30 +29,6 @@ coloricon()
     &__detail
       margin-bottom 20px
       font-size 18px
-  &__userstatut
-    width 35%
-    &__role
-      margin 20px 0
-      font-size 18px
-      &__msg
-        margin-right 15px
-      &__definition
-        display flex
-        &__icon
-          margin-right 15px
-          color gestionnaire
-    &__notification
-      font-size 18px
-      &__btn
-        btnNotification()
-        cursor pointer
-      &__subscribe
-        &__btn
-          btnNotification()
-        &__submenu
-          padding 0
-          &__item
-            padding 10px
   &__calltoaction
     flexwrap()
     margin 100px 0
@@ -93,66 +43,6 @@ coloricon()
           font-size 18px
   &__workspaceInfo
     flexwrap()
-  &__activity
-    margin 0 35px 50px 0
-    width 60%
-    &__wrapper
-      border 1px solid grey
-      height 480px
-      overflow-y scroll
-    &__header
-      display flex
-      justify-content space-between
-      align-items center
-      margin-bottom 20px
-      height 44px
-      &__allread
-        padding 10px 25px
-        font-size 18px
-        cursor pointer
-    &__workspace
-      display flex
-      align-items center
-      border-bottom 1px solid grey
-      padding 15px
-      cursor pointer
-      &:hover
-        background-color fourthColor
-      &:nth-child(even)
-        background-color grey-hover
-        &:hover
-          background-color fourthColor
-      &__icon
-        margin 0 25px
-        font-size 25px
-      &__name
-        font-size 18px
-        font-weight 500
-        span
-          font-weight 400
-    &__more
-      &__btn
-        margin 15px
-        padding 10px 25px
-        cursor pointer
-  &__moreinfo
-    display flex
-    justify-content space-between
-    flexwrap wrap
-    &__webdav
-      margin 0 15px 40px 0
-      &__btn
-        width 300px
-      &__information
-        width 300px
-    &__calendar
-      margin-bottom 100px
-      &__wrapperBtn
-        margin-right 290px
-      &__btn
-        width 300px
-      &__information
-        width 300px
 
 /**** MEDIAQUERIES *****/
 
@@ -169,10 +59,6 @@ coloricon()
       width auto
     &__calltoaction
       justify-content center
-    &__activity
-      width 100%
-    &__memberlist
-      width 50%
 
 /**** MEDIA 992px & 1199px ****/
 
@@ -181,14 +67,6 @@ coloricon()
   .dashboard
     margin-left 15px
 
-/**** MEDIA 768px & 991px ****/
-
-@media (min-width: min-md) and (max-width: max-md)
-
-  .dashboard
-    &__activity
-      margin 25px 15px 25px 0
-
 /**** MEDIA 576px & 767px ****/
 
 @media (min-width: min-sm) and (max-width: max-sm)
@@ -196,57 +74,22 @@ coloricon()
   .dashboard
     &__activity
       margin 25px 15px 25px 0
-    &__memberlist
-      margin 50px 0
-      width 90%
-    &__moreinfo__webdav__information
-      width 500px
 
 /**** MEDIA 575px ****/
 
 @media (max-width: max-xs)
 
-  position()
-    margin-left 10px
-    width auto
-
   .dashboard
     margin-left 0
     &__title
       margin-left 10px
     &__workspace
-      position()
+      margin-left 10px
+      width auto
     &__userstatut
-     position()
+      margin-left 10px
+      width auto
     &__calltoaction
       justify-content center
       &__button
         margin 10px
-    &__activity
-      margin 25px 0
-      width 100%
-      &__header
-        display block
-        height auto
-        margin 0 15px 20px 15px
-        &__title
-          margin-bottom 20px
-    &__memberlist
-      margin 50px 0
-      width 100%
-      &__title
-        margin-left 10px
-      &__wrapper
-        height auto
-      &__list
-        height auto
-        overflow-Y visible
-        &__item:nth-last-child(1)
-          border-bottom 1px solid grey
-      &__btnadd
-        border-top 0
-    &__moreinfo
-      &__webdav
-        margin-left 10px
-        &__information
-          width 350px

frontend/src/css/Header.styl

@@ -25,6 +25,7 @@
       margin-top 15px
       list-style none
       &__itemsearch
+        display none
         margin-right 8%
         width 55%
         &__search

frontend/src/css/Login.styl

@@ -43,6 +43,7 @@
         padding-left 45px
     &__btnsubmit
       display block
+      margin-right 15px
       border none
       width 150px
       background-color green
@@ -52,13 +53,12 @@
       &:focus
         box-shadow shadow-all-side-green
     &__pwforgot
-      margin-top 3px
       cursor pointer
       font-size 13px
       &:hover::after
         position absolute
         top 20px
-        right 15px
+        left 15px
         border-bottom 1px solid darkGrey
         padding-bottom 2px
         content ' '
@@ -70,6 +70,12 @@
     &__text
       width 310px
       font-size 17px
+      color off-white
+      & > a
+        color off-white
+        font-size 19px
+        &:hover
+          text-decoration underline
 
 @media (min-width: min-lg) and (max-width: max-lg)
   .loginpage

frontend/src/css/Sidebar.styl

@@ -1,4 +1,4 @@
-sidebar-width = 280px
+sidebar-width = 300px
 sidebar-animate-speed = 0.5s
 
 .sidebarSticky
@@ -15,6 +15,9 @@ leftside()
   background-color rgba(253, 253, 253, 0.3)
 
 .sidebar
+  display flex
+  flex-direction column
+  justify-content space-between
   position relative
   transition all sidebar-animate-speed
   width sidebar-width
@@ -26,8 +29,7 @@ leftside()
     width 0
   &__expand
     position absolute
-    top 0
-    right -43px
+    right -42px
     display flex
     justify-content center
     align-items center
@@ -38,75 +40,86 @@ leftside()
     cursor pointer
     color white
     transition all sidebar-animate-speed
-  &__btnnewworkspace
-    margin 50px 0
-    overflow hidden
-    &__btn
-      display block
-      margin 0 auto
-      padding 15px 30px
-  &__navigation
-    padding 0
-    overflow hidden
-    &__workspace
-      padding-left 0
-      list-style none
-      &__item
-        &__wrapper
-          display flex
-          align-items center
-          border-bottom 1px solid
-          width 100%
-          height 100%
-          cursor pointer
-        &__number
-          display flex
-          leftside()
-          padding 12px
-          width 50px
-          letter-spacing 2px
-        &__name
-          padding 10px
-          font-size 20px
-          color off-white
-          white-space nowrap
-          overflow hidden
-          text-overflow ellipsis
-        &__icon
-          margin 0 10px 0 auto
-          color white
-        &__submenu
-          margin 0
-          padding 0
-          width 100%
-          overflow hidden
-          & > li
-            display block
-          &__dropdown
+  &__content
+    height 100%
+    &__btnnewworkspace
+      margin 50px 0
+      overflow hidden
+      &__btn
+        display block
+        margin 0 auto
+        padding 15px 30px
+    &__navigation
+      padding 0
+      width sidebar-width
+      transition all sidebar-animate-speed
+      overflow hidden
+      &.sidebarclose
+        width 0
+      &__workspace
+        padding-left 0
+        list-style none
+        &__item
+          &__wrapper
             display flex
             align-items center
             border-bottom 1px solid
+            width 100%
+            height 100%
             cursor pointer
-            &__showdropdown
+          &__number
+            display flex
+            leftside()
+            padding 12px
+            width 50px
+            letter-spacing 2px
+          &__name
+            padding 10px
+            width 224px
+            font-size 20px
+            color off-white
+            white-space nowrap
+            overflow hidden
+            text-overflow ellipsis
+          &__icon
+            display flex
+            align-items center
+            width 26px
+            height 50px
+            color white
+          &__submenu
+            margin 0
+            padding 0
+            width 100%
+            overflow hidden
+            & > li
+              display block
+            &__dropdown
               display flex
-              justify-content space-between
               align-items center
-              padding 0 10px
-              width 100%
-            .dropdown__icon
-              padding 10px 15px
-              min-width 50px
-              leftside()
-            .dropdown__title
-              white-space nowrap
-              overflow hidden
-              text-overflow ellipsis
-              // color off-white
-            &.activeFilter
+              border-bottom 1px solid
+              cursor pointer
+              &__showdropdown
+                display flex
+                justify-content space-between
+                align-items center
+                padding 0 10px
+                width 100%
               .dropdown__icon
-                background-color rgba(253, 253, 253, 0.8)
+                padding 10px 15px
+                min-width 50px
+                leftside()
+              .dropdown__title
+                white-space nowrap
+                overflow hidden
+                text-overflow ellipsis
+                // color off-white
+              &.activeFilter
+                .dropdown__icon
+                  background-color rgba(253, 253, 253, 0.8)
   &__footer
     &__text
+      color off-white
       font-size 14px
       &__link
         & > a
@@ -116,39 +129,47 @@ leftside()
             text-decoration underline
             color fourthColor
 
+
+/***** MEDIAQUERIES ******/
+
 /***** MEDIA 992px and 1199px ******/
 
 @media (min-width: min-lg) and (max-width: max-lg)
 
+  .sidebarpagecontainer
+    position relative
+
   .sidebar
-    position fixed
+    position absolute
 
-/***** MEDIA 576px and 991px ******/
+/*** MEDIA 768px and 991px ****/
 
-@media (min-width: min-sm) and (max-width: max-md)
+@media (min-width: min-md) and (max-width: max-md)
 
-  .sidebarSticky
-    top 69px
+  .sidebarpagecontainer
+    position relative
 
   .sidebar
-    position fixed
+    position absolute
 
 /***** MEDIA 576px and 767px *****/
 
 @media (min-width: min-sm) and (max-width: max-sm)
 
   .sidebarpagecontainer
+    position relative
     padding-top 69px
 
-/***** MEDIA  *****/
+  .sidebar
+    position absolute
+
+/***** MEDIA 575px *****/
 
 @media (max-width: 575px)
 
   .sidebarpagecontainer
+    position relative
     padding-top 69px
 
-  .sidebarSticky
-    top 69px
-
   .sidebar
-    position fixed
+    position absolute

frontend/src/css/index.styl

@@ -30,3 +30,5 @@ html, body, #content
 @import 'HomepageCard'
 
 @import 'ExtandedAction'
+
+@import 'AdminWorkspacePage'

frontend/src/reducer/currentWorkspace.js

@@ -2,7 +2,7 @@ import {
   SET,
   WORKSPACE_DETAIL,
   WORKSPACE_MEMBER_LIST,
-  WORKSPACE_READ_STATUS_LIST,
+  WORKSPACE_READ_STATUS_LIST, WORKSPACE_RECENT_ACTIVITY_FOR_USER_LIST,
   WORKSPACE_RECENT_ACTIVITY_LIST
 } from '../action-creator.sync.js'
 import { handleRouteFromApi } from '../helper.js'
@@ -15,6 +15,7 @@ const defaultWorkspace = {
   sidebarEntryList: [],
   memberList: [],
   recentActivityList: [],
+  recentActivityForUserList: [],
   contentReadStatusList: []
 }
 
@@ -65,6 +66,23 @@ export default function currentWorkspace (state = defaultWorkspace, action) {
         }))
       }
 
+    case `${SET}/${WORKSPACE_RECENT_ACTIVITY_FOR_USER_LIST}`:
+      return {
+        ...state,
+        recentActivityForUserList: action.workspaceRecentActivityForUserList.map(ra => ({
+          id: ra.content_id,
+          slug: ra.slug,
+          label: ra.label,
+          type: ra.content_type,
+          idParent: ra.parent_id,
+          showInUi: ra.show_in_ui,
+          isArchived: ra.is_archived,
+          isDeleted: ra.is_deleted,
+          statusSlug: ra.status,
+          subContentTypeSlug: ra.sub_content_types
+        }))
+      }
+
     case `${SET}/${WORKSPACE_READ_STATUS_LIST}`:
       return {
         ...state,