fix toolbar and page port view for size in small devices (#2338)

remove old alfresco and activiti prefix fix login toggle mobile devices
2025-07-24 17:32:15 +00:00 · 2017-09-14 19:53:46 +01:00
parent 6d12b07fe2
commit 5c7ccb9b83
19 changed files with 127 additions and 116 deletions
--- a/demo-shell-ng2/app/app.component.html
+++ b/demo-shell-ng2/app/app.component.html
@@ -1,20 +1,20 @@
-<md-toolbar color="primary" *ngIf="!isAPageWithHeaderBar()">
-    <ng2-alfresco-userinfo
-        class="user-profile"
+<md-toolbar color="primary" *ngIf="!isAPageWithHeaderBar()" class="adf-app-toolbar" >
+    <adf-userinfo
+        class="adf-app-user-profile"
        [menuPositionX]="'before'"
        [menuPositionY]="'above'">
-    </ng2-alfresco-userinfo>
+    </adf-userinfo>

-    <span>ADF Demo Application</span>
+    <span  class="adf-app-hide-xsmall" >ADF Demo Application</span>

-    <div class="app-menu--spacer"></div>
+    <div class="adf-app-menu-spacer"></div>

    <search-bar></search-bar>

-    <a md-button data-automation-id="home" href="" routerLink="/">Home</a>
-    <a md-button data-automation-id="files" href="" routerLink="/files">Content Services</a>
-    <a md-button data-automation-id="activiti" href="" routerLink="/activiti">Process Services</a>
-    <a md-button data-automation-id="login" href="" routerLink="/login">Login</a>
+    <a class="adf-app-hide-xsmall adf-app-hide-small" md-button data-automation-id="home" href="" routerLink="/">Home</a>
+    <a class="adf-app-hide-xsmall adf-app-hide-small" md-button data-automation-id="files" href="" routerLink="/files">Content Services</a>
+    <a class="adf-app-hide-xsmall adf-app-hide-small"  md-button data-automation-id="activiti" href="" routerLink="/activiti">Process Services</a>
+    <a class="adf-app-hide-xsmall adf-app-hide-small" md-button data-automation-id="login" href="" routerLink="/login">Login</a>

    <theme-picker></theme-picker>
    <button md-icon-button [mdMenuTriggerFor]="langMenu">
@@ -29,7 +29,24 @@
    <button md-icon-button [mdMenuTriggerFor]="appMenu">
        <md-icon>more_vert</md-icon>
    </button>
+
    <md-menu #appMenu="mdMenu">
+        <a md-menu-item href="" routerLink="/">
+            <md-icon>home</md-icon>
+            <span>Home</span>
+        </a>
+        <a md-menu-item href="" routerLink="/files">
+            <md-icon>folder_open</md-icon>
+            <span>Content Services</span>
+        </a>
+        <a md-menu-item href="" routerLink="/activiti">
+            <md-icon>device_hub</md-icon>
+            <span>Process Services</span>
+        </a>
+        <a md-menu-item href="" routerLink="/login">
+            <md-icon>vpn_key</md-icon>
+            <span>Login</span>
+        </a>
        <a md-menu-item href="" routerLink="/dl-custom-sources">
            <md-icon>extension</md-icon>
            <span>DL: Custom Sources</span>
--- a/demo-shell-ng2/app/app.component.scss
+++ b/demo-shell-ng2/app/app.component.scss
@@ -1,24 +1,29 @@
-.user-profile {
+@import '~@angular/material/theming';
+
+
+.adf-app-user-profile {
    margin-right: 10px;
 }

-.app-menu--spacer {
+.adf-app-menu-spacer {
    flex: 1 1 auto;
 }

-.p-10 {
-    padding: 10px;
+.adf-app-toolbar {
+    overflow: hidden;
 }

-.m-10 {
-    margin: 10px;
+@media ($mat-small) {
+
+    .adf-app-hide-small{
+        display: none !important;
    }

-._dialog_overlay {
-    position: static !important;
+}
+@media ($mat-xsmall) {
+
+    .adf-app-hide-xsmall{
+        display: none !important;
    }

-.md-simple-snackbar-action {
-    border: 0px;
-    cursor: pointer;
 }
--- a/demo-shell-ng2/app/components/about/about.component.html
+++ b/demo-shell-ng2/app/components/about/about.component.html
@@ -108,5 +108,5 @@

    <h3>Packages</h3>
    <small>Current project is using the following ADF libraries:</small>
-    <alfresco-datatable [data]="data"></alfresco-datatable>
+    <adf-datatable [data]="data"></adf-datatable>
 </div>
--- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
+++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html
@@ -12,20 +12,20 @@
                    <adf-accordion>
                        <adf-accordion-group [heading]="'Tasks'" [isSelected]="true" [isOpen]="true"
                                             [headingIcon]="'assignment'">
-                            <activiti-filters
+                            <adf-filters
                                [filterParam]="{name:'MY tasks'}"
                                [appId]="appId"
                                [hasIcon]="false"
                                (filterClick)="onTaskFilterClick($event)"
                                (onSuccess)="onSuccessTaskFilterList($event)"
                                #activitifilter>
-                            </activiti-filters>
+                            </adf-filters>
                        </adf-accordion-group>
                    </adf-accordion>
                </div>
                <div class="activiti-demo-grid-item activiti-demo-tasks-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
                     *ngIf="taskFilter && !isStartTaskMode()">
-                    <activiti-tasklist
+                    <adf-tasklist
                        [appId]="taskFilter?.appId"
                        [page]="taskPage"
                        [size]="taskPagination.maxItems"
@@ -48,7 +48,7 @@
                            <data-column key="created" title="Created" class="hidden"></data-column>
                        </data-columns>
                        -->
-                    </activiti-tasklist>
+                    </adf-tasklist>

                    <adf-pagination
                        (changePageNumber)="onChangePageNumber($event)"
@@ -60,7 +60,7 @@
                    </adf-pagination>
                </div>
                <div class="activiti-demo-grid-item activiti-demo-tasks-details" *ngIf="!isStartTaskMode()" fxFlex.gt-md="1 1 auto">
-                    <activiti-task-details #activitidetails
+                    <adf-task-details #activitidetails
                                           [debugMode]="true"
                                           [taskId]="currentTaskId"
                                           [fieldValidators]="fieldValidators"
@@ -69,7 +69,7 @@
                                           (taskCreated)="onTaskCreated($event)"
                                           (assignTask)="onAssignTask()"
                                           (taskDeleted)="onTaskDeleted($event)">
-                    </activiti-task-details>
+                    </adf-task-details>
                    <hr>
                    <div *ngIf="currentTaskId">
                        {{'PS-TAB.AUDIT-LOG' | translate}}
@@ -119,18 +119,18 @@
                    <adf-accordion>
                        <adf-accordion-group [heading]="'Processes'" [isSelected]="true" [isOpen]="true"
                                             [headingIcon]="'assessment'">
-                            <activiti-process-instance-filters
+                            <adf-process-instance-filters
                                [filterParam]="{index: 0}"
                                [appId]="appId"
                                (filterClick)="onProcessFilterClick($event)"
                                (onSuccess)="onSuccessProcessFilterList($event)">
-                            </activiti-process-instance-filters>
+                            </adf-process-instance-filters>
                        </adf-accordion-group>
                    </adf-accordion>
                </div>
                <div class="activiti-demo-grid-item activiti-demo-processes-list activiti-demo-list" fxFlex.gt-md="335px" [ngClass.gt-md]="{'small-pagination': true}"
                     *ngIf="processFilter && !isStartProcessMode()">
-                    <activiti-process-instance-list
+                    <adf-process-instance-list
                        *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
                        [processDefinitionKey]="processFilter.filter.processDefinitionKey"
                        [name]="processFilter.filter.name"
@@ -146,15 +146,15 @@
                            <data-column key="created" title="Created" class="hidden"></data-column>
                        </data-columns>
                        -->
-                    </activiti-process-instance-list>
+                    </adf-process-instance-list>
                </div>
                <div class="activiti-demo-grid-item activiti-demo-processes-details" *ngIf="!isStartProcessMode()" fxFlex.gt-md="1 1 auto">
-                    <activiti-process-instance-details
+                    <adf-process-instance-details
                        [processInstanceId]="currentProcessInstanceId"
                        (processCancelled)="processCancelled()"
                        (showProcessDiagram)="onShowProcessDiagram($event)"
                        (taskClick)="onProcessDetailsTaskClick($event)">
-                    </activiti-process-instance-details>
+                    </adf-process-instance-details>
                    <hr>
                    <div *ngIf="currentProcessInstanceId">
                        {{'PS-TAB.START-PROCESS' | translate}}
@@ -201,7 +201,7 @@
                </analytics-report-list>
            </div>
            <div class="activiti-demo-grid-item activiti-demo-reports-details" fxFlex.gt-md="1 1 auto">
-                <activiti-analytics
+                <adf-analytics
                    *ngIf="report"
                    [appId]="appId"
                    [reportId]="report.id"
@@ -209,7 +209,7 @@
                    (editReport)="onEditReport($event)"
                    (reportSaved)="onReportSaved($event)"
                    (reportDeleted)="onReportDeleted()">
-                </activiti-analytics>
+                </adf-analytics>
                <div *ngIf="!report">
                    <span>{{'ANALYTICS_REPORT.NO_REPORT_MESSAGE' | translate}}</span>
                </div>
--- a/demo-shell-ng2/app/components/activiti/activiti-process-attachments.component.html
+++ b/demo-shell-ng2/app/components/activiti/activiti-process-attachments.component.html
@@ -21,10 +21,10 @@
 </div>

 <div *ngIf="fileShowed">
-    <alfresco-viewer
+    <adf-viewer
        [(showViewer)]="fileShowed"
        [blobFile]="content"
        [displayName]="contentName"
        [overlayMode]="true">
-    </alfresco-viewer>
+    </adf-viewer>
 </div>
--- a/demo-shell-ng2/app/components/activiti/activiti-show-diagram.component.html
+++ b/demo-shell-ng2/app/components/activiti/activiti-show-diagram.component.html
@@ -1,4 +1,4 @@
 <div>
    <button md-mini-fab  (click)="onClickBack()" ><md-icon>keyboard_backspace</md-icon></button>
-    <activiti-diagram [processInstanceId]="processDefinitionId"></activiti-diagram>
+    <adf-diagram [processInstanceId]="processDefinitionId"></adf-diagram>
 </div>
--- a/demo-shell-ng2/app/components/activiti/activiti-task-attachments.component.html
+++ b/demo-shell-ng2/app/components/activiti/activiti-task-attachments.component.html
@@ -20,10 +20,10 @@
 </div>

 <div *ngIf="fileShowed">
-    <alfresco-viewer
+    <adf-viewer
        [(showViewer)]="fileShowed"
        [blobFile]="content"
        [displayName]="contentName"
        [overlayMode]="true">
-    </alfresco-viewer>
+    </adf-viewer>
 </div>
--- a/demo-shell-ng2/app/components/activiti/form-node-viewer.component.html
+++ b/demo-shell-ng2/app/components/activiti/form-node-viewer.component.html
@@ -1,6 +1,6 @@
 <div class="activiti-form-viewer" *ngIf="nodeId">
-    <activiti-form [nodeId]="nodeId"
+    <adf-form [nodeId]="nodeId"
                   [saveMetadata]="true"
                   [path]="'/Sites/swsdp/documentLibrary'">
-    </activiti-form>
+    </adf-form>
 </div>
--- a/demo-shell-ng2/app/components/activiti/form-viewer.component.html
+++ b/demo-shell-ng2/app/components/activiti/form-viewer.component.html
@@ -1,11 +1,11 @@
 <div class="activiti-form-viewer" *ngIf="taskId">
-    <activiti-form [taskId]="taskId"></activiti-form>
-    <!--<activiti-form [formName]="'activitiForms:patientFolder'"-->
+    <adf-form [taskId]="taskId"></adf-form>
+    <!--<adf-form [formName]="'activitiForms:patientFolder'"-->
                       <!--[saveMetadata]="true"-->
                       <!--[path]="'/Sites/swsdp/documentLibrary'"-->
-                       <!--[nameNode]="'test'"></activiti-form>-->
-    <!--<activiti-form [nodeId]="'e280be3a-6584-45a1-8bb5-89bfe070262e'"-->
+                       <!--[nameNode]="'test'"></adf-form>-->
+    <!--<adf-form [nodeId]="'e280be3a-6584-45a1-8bb5-89bfe070262e'"-->
                   <!--[saveMetadata]="true"-->
                   <!--[path]="'/Sites/swsdp/documentLibrary'">-->
-    <!--</activiti-form>-->
+    <!--</adf-form>-->
 </div>
--- a/demo-shell-ng2/app/components/datatable/datatable-demo.component.css
+++ b/demo-shell-ng2/app/components/datatable/datatable-demo.component.css
@@ -1,10 +1,10 @@
-alfresco-datatable >>> .custom-row-style.alfresco-datatable__row:focus {
+adf-datatable >>> .custom-row-style.alfresco-datatable__row:focus {
    outline-offset: -1px;
    outline-width: 1px;
    outline-color: green;
    outline-style: solid;
 }

-alfresco-datatable >>> .custom-row-style.alfresco-datatable__row--selected {
+adf-datatable >>> .custom-row-style.alfresco-datatable__row--selected {
    color: green;
 }
--- a/demo-shell-ng2/app/components/files/files.component.html
+++ b/demo-shell-ng2/app/components/files/files.component.html
@@ -3,7 +3,7 @@
        <adf-sites-dropdown (change)="getSiteContent($event)">
        </adf-sites-dropdown>
    </div>
-    <alfresco-upload-drag-area
+    <adf-upload-drag-area
        [parentId]="documentList.currentFolderId"
        [versioning]="versioning"
        [adf-node-permission]="'create'"
@@ -208,7 +208,7 @@
                </content-action>
            </content-actions>
        </adf-document-list>
-    </alfresco-upload-drag-area>
+    </adf-upload-drag-area>
 </div>

 <context-menu-holder></context-menu-holder>
@@ -264,7 +264,7 @@
        </md-input-container>
    </section>
    <div *ngIf="!acceptedFilesTypeShow">
-        <alfresco-upload-button
+        <adf-upload-button
            #uploadButton
            tooltip="Custom tooltip"
            [disabled]="!enableUpload"
@@ -276,10 +276,10 @@
            [adf-node-permission]="'create'"
            [adf-nodes]="getCurrentDocumentListNode()"
            (permissionEvent)="handlePermissionError($event)">
-        </alfresco-upload-button>
+        </adf-upload-button>
    </div>
    <div *ngIf="acceptedFilesTypeShow">
-        <alfresco-upload-button
+        <adf-upload-button
            #uploadButton
            tooltip="Custom tooltip"
            [disabled]="!enableUpload"
@@ -292,7 +292,7 @@
            [adf-node-permission]="'create'"
            [adf-nodes]="getCurrentDocumentListNode()"
            (permissionEvent)="handlePermissionError($event)">
-        </alfresco-upload-button>
+        </adf-upload-button>
    </div>
    <section>
        <md-checkbox [(ngModel)]="enableUpload">Enable upload (demoing enabled/disabled state only if the permission are not checked dynamically)</md-checkbox>
@@ -312,7 +312,7 @@

 <div *ngIf="showViewer">
    <ng-container *ngIf="!useInlineViewer">
-        <alfresco-viewer
+        <adf-viewer
            [(showViewer)]="showViewer"
            [fileNodeId]="fileNodeId"
            [overlayMode]="true">
@@ -323,15 +323,15 @@
                </ng-template>
            </extension-viewer>

-        </alfresco-viewer>
+        </adf-viewer>
    </ng-container>

    <ng-container *ngIf="useInlineViewer">
        <div class="adf-not-overlay-viewer">
-            <alfresco-viewer
+            <adf-viewer
                [(showViewer)]="showViewer"
                [fileNodeId]="fileNodeId">
-            </alfresco-viewer>
+            </adf-viewer>
        </div>
    </ng-container>
 </div>
--- a/demo-shell-ng2/app/components/login/login-demo.component.html
+++ b/demo-shell-ng2/app/components/login/login-demo.component.html
@@ -60,7 +60,7 @@
            <md-slide-toggle
                id="switch1-mobile"
                [color]="'primary'"
-                (click)="toggleECM()"
+                (change)="toggleECM()"
                [checked]="isECM">
                Content Services
            </md-slide-toggle>
@@ -69,7 +69,7 @@
            <md-slide-toggle
                id="switch2-mobile"
                [color]="'primary'"
-                (click)="toggleBPM()"
+                (change)="toggleBPM()"
                [checked]="isBPM">
                Process Services
            </md-slide-toggle>
@@ -78,7 +78,7 @@
            <md-slide-toggle
                id="switch3-mobile"
                [color]="'primary'"
-                (click)="toggleCSRF()"
+                (change)="toggleCSRF()"
                [checked]="!disableCsrf">
                CSRF
            </md-slide-toggle>
@@ -87,7 +87,7 @@
            <md-slide-toggle
                id="switch4-mobile"
                [color]="'primary'"
-                (click)="toggleFooter()"
+                (change)="toggleFooter()"
                [checked]="showFooter">
                Login footer
            </md-slide-toggle>
--- a/demo-shell-ng2/app/components/search/search-bar.component.html
+++ b/demo-shell-ng2/app/components/search/search-bar.component.html
@@ -1,4 +1,4 @@
-<alfresco-search-control *ngIf="isLoggedIn()"
+<adf-search-control *ngIf="isLoggedIn()"
                         [searchTerm]="searchTerm"
                         [autocomplete]="false"
                         [highlight]="true"
@@ -6,10 +6,10 @@
                         (searchChange)="onSearchTermChange($event);"
                         (expand)="onExpandToggle($event);"
                         (fileSelect)="onItemClicked($event)">
-</alfresco-search-control>
+</adf-search-control>

-<alfresco-viewer *ngIf="fileShowed" [(showViewer)]="fileShowed"
+<adf-viewer *ngIf="fileShowed" [(showViewer)]="fileShowed"
                 [fileNodeId]="fileNodeId"
                 [overlayMode]="true">
    <md-spinner></md-spinner>
-</alfresco-viewer>
+</adf-viewer>
--- a/demo-shell-ng2/app/components/search/search.component.html
+++ b/demo-shell-ng2/app/components/search/search.component.html
@@ -1,14 +1,14 @@
 <div class="search-results-container">
-    <h1>Search results</h1>
-    <alfresco-search
+    <div class="adf-search-title">Search results</div>
+    <adf-search
        [navigate]="false"
-        (nodeDbClick)="nodeDbClick($event)"></alfresco-search>
+        (nodeDbClick)="nodeDbClick($event)"></adf-search>
 </div>

 <div *ngIf="fileShowed">
-    <alfresco-viewer [(showViewer)]="fileShowed"
+    <adf-viewer [(showViewer)]="fileShowed"
                     [fileNodeId]="fileNodeId"
                     [overlayMode]="true">
        <md-spinner></md-spinner>
-    </alfresco-viewer>
+    </adf-viewer>
 </div>
--- a/demo-shell-ng2/app/components/search/search.component.scss
+++ b/demo-shell-ng2/app/components/search/search.component.scss
@@ -0,0 +1,20 @@
+div.search-results-container {
+    padding: 0 20px 20px 20px;
+}
+
+.adf-search-title {
+    font-size: 22px;
+    padding: 15px 0 15px 0;
+}
+
+@media screen and (max-width: 600px) {
+    :host .col-display-name {
+        min-width: 100px;
+    }
+    :host .col-modified-at, :host .col-modified-by {
+        display: none;
+    }
+    :host div.search-results-container table {
+        width: 100%;
+    }
+}
--- a/demo-shell-ng2/app/components/search/search.component.ts
+++ b/demo-shell-ng2/app/components/search/search.component.ts
@@ -21,28 +21,7 @@ import { Router } from '@angular/router';
@Component({
    selector: 'search-component',
    templateUrl: './search.component.html',
-    styles: [`
-        :host div.search-results-container {
-            padding: 0 20px 20px 20px;
-        }
-        :host h1 {
-            font-size: 22px;
-        }
-        :host tbody tr {
-            cursor: pointer;
-        }
-        @media screen and (max-width: 600px) {
-            :host .col-display-name {
-                min-width: 100px;
-            }
-            :host .col-modified-at, :host .col-modified-by {
-                display: none;
-            }
-            :host div.search-results-container table {
-                width: 100%;
-            }
-        }
-    `]
+    styleUrls: ['./search.component.scss']
 })
 export class SearchComponent {

--- a/demo-shell-ng2/app/components/tag/tag.component.html
+++ b/demo-shell-ng2/app/components/tag/tag.component.html
@@ -2,18 +2,18 @@
 <input id="nodeId" type="text" size="48" [(ngModel)]="nodeId"><br>
 <div class="adf-tag-example-area">
    <md-card>
-        <alfresco-tag-node-actions-list [nodeId]="nodeId"></alfresco-tag-node-actions-list>
+        <adf-tag-node-actions-list [nodeId]="nodeId"></adf-tag-node-actions-list>
    </md-card>
 </div>
 <div class="adf-tag-example-area">
    <md-card>
        <div class="adf-tag-example-title">List Tags Content Services</div>
-        <alfresco-tag-list></alfresco-tag-list>
+        <adf-tag-list></adf-tag-list>
    </md-card>
 </div>
 <div class="adf-tag-example-area">
    <md-card>
        <div class="adf-tag-example-title">Tag list By Node ID</div>
-        <alfresco-tag-node-list [nodeId]="nodeId"></alfresco-tag-node-list>
+        <adf-tag-node-list [nodeId]="nodeId"></adf-tag-node-list>
    </md-card>
 </div>
--- a/ng2-components/ng2-alfresco-search/src/components/search-control.component.html
+++ b/ng2-components/ng2-alfresco-search/src/components/search-control.component.html
@@ -7,7 +7,7 @@
            class="adf-search-button">
            <md-icon aria-label="search button">search</md-icon>
        </button>
-        <div class="search-field">
+        <div class="adf-search-field">
            <md-input-container>
                <input
                    mdInput
--- a/ng2-components/ng2-alfresco-search/src/components/search-control.component.scss
+++ b/ng2-components/ng2-alfresco-search/src/components/search-control.component.scss
@@ -19,8 +19,8 @@
            display: flex;
            align-items: center;

-            .search-field {
-                width: 260px;
+            .adf-search-field {
+                max-width: 260px;
                padding-top: 6px;

                .mat-input-container {
@@ -36,20 +36,10 @@
                }
            }

-            .search-field .mat-input-infix {
-                padding: 0px;
+            .adf-search-field .mat-input-infix {
+                padding: 0;
            }

-            @media only screen and (max-width: 400px) {
-                .search-field {
-                    width: 200px;
-                }
-            }
-            @media only screen and (max-width: 320px) {
-                .search-field {
-                    width: 160px;
-                }
-            }
        }

        &-search-form{