[#2512] add app gallery

backend/tracim_backend/config.py

@@ -185,7 +185,8 @@ def _load_global_config(self) -> None:
             "agenda,"
             "collaborative_document_edition,"
             "share_content,"
-            "upload_permission"
+            "upload_permission,"
+            "gallery"
         )
 
         self.APP__ENABLED = string_to_list(
@@ -869,6 +870,16 @@ def _set_default_app(self, enabled_app_list: typing.List[str]) -> None:
             app_config=self,
         )
 
+        gallery = Application(
+            label="Gallery",
+            slug="gallery",
+            fa_icon="picture-o",
+            is_active=True,
+            config={},
+            main_route="/ui/workspaces/{workspace_id}/gallery",
+            app_config=self,
+        )
+
         collaborative_document_edition = Application(
             label="Collaborative Document Edition",
             slug="collaborative_document_edition",
@@ -896,6 +907,7 @@ def _set_default_app(self, enabled_app_list: typing.List[str]) -> None:
                 (folder.slug, folder),
                 (markdownpluspage.slug, markdownpluspage),
                 (agenda.slug, agenda),
+                (gallery.slug, gallery),
                 (collaborative_document_edition.slug, collaborative_document_edition),
                 (share_content.slug, share_content),
                 (upload_permissions.slug, upload_permissions),

build_full_frontend.sh

@@ -100,6 +100,11 @@ log "cd $DEFAULTDIR/frontend_app_agenda"
 cd $DEFAULTDIR/frontend_app_agenda || exit 1
 ./build_agenda.sh $dev
 
+# app Gallery
+log "cd $DEFAULTDIR/frontend_app_gallery"
+cd $DEFAULTDIR/frontend_app_gallery || exit 1
+./build_gallery.sh $dev
+
 # app Collaborative document edition
 log "cd $DEFAULTDIR/frontend_app_collaborative_document_edition"
 cd $DEFAULTDIR/frontend_app_collaborative_document_edition || exit 1

color.json.sample

@@ -4,5 +4,6 @@
   "contents/thread": "#428BCA",
   "contents/file": "#ffa500",
   "contents/folder": "#414548",
-  "agenda": "#ff4b3a"
+  "agenda": "#ff4b3a",
+  "gallery": "#ffa500"
 }

frontend/dist/assets/tracim/appInterface.js

@@ -31,6 +31,8 @@ var getSelectedApp = function (appName) {
         return (appShareFolderAdvanced || {default: {}}).default
       case 'collaborative_document_edition':
         return (appCollaborativeDocumentEdition || {default: {}}).default
+      case 'gallery':
+        return (appGallery || {default: {}}).default
       default:
         return APP_NOT_LOADED
     }

frontend/dist/index.html

@@ -75,6 +75,7 @@
 <script type='text/javascript' src='/app/admin_workspace_user.app.js'></script>
 <script type='text/javascript' src='/app/workspace_advanced.app.js'></script>
 <script type='text/javascript' src='/app/agenda.app.js'></script>
+<script type='text/javascript' src='/app/gallery.app.js'></script>
 
 <script type='text/javascript' src='/assets/bootstrap/jquery-3.2.1.js'></script>
 <script type='text/javascript' src='/assets/bootstrap/popper-1.12.3.js'></script>

frontend/dist/index.mak

@@ -91,6 +91,7 @@
     <script type='text/javascript' src='/app/share_folder.app.js'></script>
     <script type='text/javascript' src='/app/admin_workspace_user.app.js'></script>
     <script type='text/javascript' src='/app/workspace_advanced.app.js'></script>
+    <script type='text/javascript' src='/app/gallery.app.js'></script>
 
     <script type='text/javascript' src='/assets/bootstrap/jquery-3.2.1.js'></script>
     <script type='text/javascript' src='/assets/bootstrap/popper-1.12.3.js'></script>

frontend/i18next.scanner/en/translation.json

@@ -240,5 +240,7 @@
   "Create an office document": "Create an office document",
   "Full name (required)": "Full name (required)",
   "Password (required)": "Password (required)",
-  "Thank you, your upload is finished !": "Thank you, your upload is finished !"
+  "Thank you, your upload is finished !": "Thank you, your upload is finished !",
+  "Open the gallery": "Open the gallery",
+  "Gallery": "Gallery"
 }

frontend/i18next.scanner/fr/translation.json

@@ -240,5 +240,7 @@
   "Create an office document": "Créer un doc. bureautique",
   "Full name (required)": "Nom complet (requis)",
   "Password (required)": "Mot de passe (requis)",
-  "Thank you, your upload is finished !": "Merci, votre téléversement est terminé !"
+  "Thank you, your upload is finished !": "Merci, votre téléversement est terminé !",
+  "Open the gallery": "Ouvrir la galerie",
+  "Gallery": "Galerie"
 }

frontend/src/appFactory.js

@@ -4,7 +4,7 @@ import { withRouter } from 'react-router-dom'
 import { FETCH_CONFIG, ROLE, PROFILE, PAGE, findUserRoleIdInWorkspace } from './helper.js'
 import i18n from './i18n.js'
 
-const mapStateToProps = ({ system, currentWorkspace }) => ({ system, currentWorkspace })
+const mapStateToProps = ({ system, currentWorkspace, workspaceList }) => ({ system, currentWorkspace, workspaceList })
 
 export function appFactory (WrappedComponent) {
   return withRouter(connect(mapStateToProps)(class AppFactory extends React.Component {

frontend/src/component/Workspace/BtnExtandedAction.jsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { translate } from 'react-i18next'
+import { PAGE } from '../../helper'
+import { Link } from 'react-router-dom'
 
 const ExtandedAction = props => {
   return (
@@ -81,6 +83,21 @@ const ExtandedAction = props => {
           </div>
         )}
 
+        {props.folderData && (
+          <Link
+            className='subdropdown__item primaryColorBgLightenHover dropdown-item d-flex align-items-center'
+            onClick={e => e.stopPropagation()}
+            to={`${PAGE.WORKSPACE.GALLERY(props.folderData.workspaceId)}?folder_ids=${props.folderData.id}`}
+          >
+            <div className='subdropdown__item__icon mr-3'>
+              <i className='fa fa-fw fa-picture-o' />
+            </div>
+
+            <div className='subdropdown__item__text'>
+              {props.t('Gallery')}
+            </div>
+          </Link>
+        )}
       </div>
     </div>
   )

frontend/src/component/Workspace/Folder.jsx

@@ -103,74 +103,70 @@ class Folder extends React.Component {
           </div>
 
           <div className='folder__header__button'>
-            {props.userRoleIdInWorkspace >= 2 && (
-              <div className='folder__header__button__addbtn'>
-                {props.showCreateContentButton && folderAvailableApp.length > 0 && (
-                  <div title={props.t('Create in folder')}>
-                    <button
-                      className={classnames(
-                        'folder__header__button__addbtn__text',
-                        'btn',
-                        'outlineTextBtn',
-                        'primaryColorBorder',
-                        'primaryColorBgHover',
-                        'primaryColorBorderDarkenHover',
-                        'dropdown-toggle',
-                        props.userRoleIdInWorkspace === 2 ? 'no-margin-right' : ''
-                      )}
-                      type='button'
-                      id='dropdownMenuButton'
-                      data-toggle='dropdown'
-                      aria-haspopup='true'
-                      aria-expanded='false'
-                      onClick={e => e.stopPropagation()}
-                    >
-                      <span className='folder__header__button__addbtn__text-desktop'>
-                        {`${props.t('Create in folder')}...`}
-                      </span>
+            <div className='folder__header__button__addbtn'>
+              {props.userRoleIdInWorkspace >= 2 && props.showCreateContentButton && folderAvailableApp.length > 0 && (
+                <div title={props.t('Create in folder')}>
+                  <button
+                    className={classnames(
+                      'folder__header__button__addbtn__text',
+                      'btn',
+                      'outlineTextBtn',
+                      'primaryColorBorder',
+                      'primaryColorBgHover',
+                      'primaryColorBorderDarkenHover',
+                      'dropdown-toggle',
+                      props.userRoleIdInWorkspace === 2 ? 'no-margin-right' : ''
+                    )}
+                    type='button'
+                    id='dropdownMenuButton'
+                    data-toggle='dropdown'
+                    aria-haspopup='true'
+                    aria-expanded='false'
+                    onClick={e => e.stopPropagation()}
+                  >
+                    <span className='folder__header__button__addbtn__text-desktop'>
+                      {`${props.t('Create in folder')}...`}
+                    </span>
 
-                      <span className='folder__header__button__addbtn__text-responsive'>
-                        <i className='folder__header__button__addbtn__text-responsive__iconplus fa fa-plus' />
-                      </span>
-                    </button>
+                    <span className='folder__header__button__addbtn__text-responsive'>
+                      <i className='folder__header__button__addbtn__text-responsive__iconplus fa fa-plus' />
+                    </span>
+                  </button>
 
-                    <div className='addbtn__subdropdown dropdown-menu' aria-labelledby='dropdownMenuButton'>
-                      <SubDropdownCreateButton
-                        folderId={props.folderData.id}
-                        availableApp={folderAvailableApp}
-                        onClickCreateContent={(e, folderId, slug) => props.onClickCreateContent(e, folderId, slug)}
-                      />
-                    </div>
-                  </div>
-                )}
-
-                <div className='d-none d-md-flex' title={props.t('Actions')}>
-                  {props.userRoleIdInWorkspace >= 4 && (
-                    <BtnExtandedAction
-                      userRoleIdInWorkspace={props.userRoleIdInWorkspace}
-                      onClickExtendedAction={{
-                        edit: {
-                          callback: e => props.onClickExtendedAction.edit(e, props.folderData),
-                          label: props.t('Edit')
-                        },
-                        download: {
-                          callback: e => props.onClickExtendedAction.download(e, props.folderData),
-                          label: props.t('Download')
-                        },
-                        archive: {
-                          callback: e => props.onClickExtendedAction.archive(e, props.folderData),
-                          label: props.t('Archive')
-                        },
-                        delete: {
-                          callback: e => props.onClickExtendedAction.delete(e, props.folderData),
-                          label: props.t('Delete')
-                        }
-                      }}
+                  <div className='addbtn__subdropdown dropdown-menu' aria-labelledby='dropdownMenuButton'>
+                    <SubDropdownCreateButton
+                      folderId={props.folderData.id}
+                      availableApp={folderAvailableApp}
+                      onClickCreateContent={(e, folderId, slug) => props.onClickCreateContent(e, folderId, slug)}
                     />
-                  )}
+                  </div>
                 </div>
+              )}
+              <div className='d-none d-md-flex' title={props.t('Actions')}>
+                <BtnExtandedAction
+                  userRoleIdInWorkspace={props.userRoleIdInWorkspace}
+                  onClickExtendedAction={{
+                    edit: {
+                      callback: e => props.onClickExtendedAction.edit(e, props.folderData),
+                      label: props.t('Edit')
+                    },
+                    download: {
+                      callback: e => props.onClickExtendedAction.download(e, props.folderData),
+                      label: props.t('Download')
+                    },
+                    archive: {
+                      callback: e => props.onClickExtendedAction.archive(e, props.folderData),
+                      label: props.t('Archive')
+                    },
+                    delete: {
+                      callback: e => props.onClickExtendedAction.delete(e, props.folderData),
+                      label: props.t('Delete')
+                    }
+                  }}
+                  folderData={props.folderData}
+                />
               </div>
-            )}
+            </div>
           </div>
 
           <div className='folder__header__status' />

frontend/src/container/AppFullscreenRouter.jsx

@@ -70,6 +70,15 @@ class AppFullscreenRouter extends React.Component {
               return null
             }} />
 
+            <Route path={PAGE.WORKSPACE.GALLERY(':idws')} render={() => {
+              const galleryConfig = {
+                workspaceId: props.match.params.idws,
+                forceShowSidebar: false
+              }
+              props.renderAppFullscreen({ slug: 'gallery', hexcolor: '#7d4e24', appConfig: galleryConfig }, props.user, {})
+              return null
+            }} />
+
             <Route path={PAGE.WORKSPACE.CONTENT_EDITION(':idws', ':idcts')} render={({ match }) => {
               const content = {
                 workspace_id: match.params.idws,

frontend/src/container/Dashboard.jsx

@@ -435,9 +435,11 @@ class Dashboard extends React.Component {
           // these endpoints are /system/applications, /system/content_types and key sidebar_entry from /user/me/workspaces
           // HACK - CH - 2019-09-10 - hard coding collabora creation label from the hack since backend still isn't clear about appList and contentTypeList usage
           // See https://github.com/tracim/tracim/issues/2375
+          // HACK - GM - 2019-11-26 - hard coding gallery creation label because gallery don't have a content_type
           const creationLabelWithHACK = (() => {
             switch (app.slug) {
               case 'agenda': return props.t('Open the agenda')
+              case 'gallery': return props.t('Open the gallery')
               case 'collaborative_document_edition': return HACK_COLLABORA_CONTENT_TYPE([{}]).creationLabel
               default: return contentType.creationLabel
             }
@@ -449,15 +451,21 @@ class Dashboard extends React.Component {
             ? HACK_COLLABORA_CONTENT_TYPE([{}]).slug
             : contentType.slug
 
+          const route = (() => {
+            switch (app.slug) {
+              case 'agenda': return PAGE.WORKSPACE.AGENDA(props.curWs.id)
+              case 'gallery': return PAGE.WORKSPACE.GALLERY(props.curWs.id)
+              default: return `${PAGE.WORKSPACE.NEW(props.curWs.id, slugWithHACK)}?parent_id=null`
+            }
+          })()
+
           return {
             ...app,
             hexcolor: app.slug === HACK_COLLABORA_CONTENT_TYPE([{}]).slug
               ? HACK_COLLABORA_CONTENT_TYPE([{}]).hexcolor
               : app.hexcolor,
             creationLabel: creationLabelWithHACK,
-            route: app.slug === 'agenda'
-              ? PAGE.WORKSPACE.AGENDA(props.curWs.id)
-              : `${PAGE.WORKSPACE.NEW(props.curWs.id, slugWithHACK)}?parent_id=null`
+            route: route
           }
         })
       : []

frontend/src/container/Tracim.jsx

@@ -278,7 +278,8 @@ class Tracim extends React.Component {
             PAGE.ADMIN.USER,
             PAGE.ADMIN.WORKSPACE,
             PAGE.AGENDA,
-            PAGE.WORKSPACE.CONTENT_EDITION()
+            PAGE.WORKSPACE.CONTENT_EDITION(),
+            PAGE.WORKSPACE.GALLERY()
           ]} render={() => <AppFullscreenRouter />} />
 
           <Route path={'/wip/:cp'} component={WIPcomponent} /> {/* for testing purpose only */}

frontend/src/helper.js

@@ -37,7 +37,8 @@ export const PAGE = {
     CONTENT: (idws = ':idws', type = ':type', idcts = ':idcts') => `/ui/workspaces/${idws}/contents/${type}/${idcts}`,
     SHARE_FOLDER: (idws = ':idws') => `/ui/workspaces/${idws}/contents/share_folder`,
     ADMIN: (idws = ':idws') => `/ui/workspaces/${idws}/admin`,
-    CONTENT_EDITION: (idws = ':idws', idcts = ':idcts') => `/ui/online_edition/workspaces/${idws}/contents/${idcts}`
+    CONTENT_EDITION: (idws = ':idws', idcts = ':idcts') => `/ui/online_edition/workspaces/${idws}/contents/${idcts}`,
+    GALLERY: (idws = ':idws') => `/ui/workspaces/${idws}/gallery`
   },
   LOGIN: '/ui/login',
   FORGOT_PASSWORD: '/ui/forgot-password',

frontend/src/i18n.js

@@ -26,6 +26,8 @@ const collaborativeDocumentEditionEnTranslation = require('../dist/app/collabora
 const collaborativeDocumentEditionFrTranslation = require('../dist/app/collaborative_document_edition_fr_translation.json')
 const shareFolderEnTranslation = require('../dist/app/share_folder_en_translation.json')
 const shareFolderFrTranslation = require('../dist/app/share_folder_fr_translation.json')
+const galleryEnTranslation = require('../dist/app/gallery_en_translation.json')
+const galleryFrTranslation = require('../dist/app/gallery_fr_translation.json')
 
 export const getBrowserLang = () => {
   const browserLang = navigator.language
@@ -60,7 +62,8 @@ i18n
           ...wsEnTranslation, // workspace
           ...agendaEnTranslation, // agenda
           ...collaborativeDocumentEditionEnTranslation,
-          ...shareFolderEnTranslation // share folder
+          ...shareFolderEnTranslation, // share folder,
+          ...galleryEnTranslation // gallery
         }
       },
       fr: {
@@ -76,7 +79,8 @@ i18n
           ...wsFrTranslation, // workspace
           ...agendaFrTranslation, // agenda
           ...collaborativeDocumentEditionFrTranslation,
-          ...shareFolderFrTranslation // share folder
+          ...shareFolderFrTranslation, // share folder
+          ...galleryFrTranslation // gallery
         }
       }
     }