nuxeo-development-framework 3.0.9 → 3.1.2

package/src/lib/assets/scss/mixins.scss

@@ -0,0 +1,38 @@
+// Small Screens
+@mixin small-screen {
+  @media only screen and (max-width: 576px) {
+    @content;
+  }
+}
+
+// Medium Screens
+@mixin medium-screen {
+  @media only screen and (max-width: 768px) {
+    @content;
+  }
+}
+
+// Normal Screens
+@mixin normal-screen {
+  @media (max-width: 992px) {
+    @content;
+  }
+}
+
+// Large Screens
+@mixin large-screen {
+  @media (max-width: 1200px) {
+    @content;
+  }
+}
+
+// Extra Large Screens
+@mixin xlarge-screen {
+  @media only screen and (max-width: 1680px) {
+    @content;
+  }
+}
+
+// @include media-breakpoint-up(lg) {
+//   @content;
+// }

package/src/lib/assets/scss/myApp.scss

@@ -0,0 +1,487 @@
+@import "variables";
+@import "mixins";
+
+.activity-line-wrapper {
+  h3 {
+    // font-size: 8px;
+  }
+
+  .link {
+    // color: blue;
+  }
+}
+
+.bi {
+  margin: 0px !important;
+}
+
+.memo-sorting-wrapper {
+  width: 265px;
+  margin: 0px 10px;
+  height: 100%;
+  display: flex;
+
+  .sorting-direction {
+    width: 65px;
+    height: 40px;
+    background-color: #465573;
+    color: white;
+    font-size: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    i {}
+  }
+
+  .memo-sorting-trigger {
+    width: calc(100% - 65px);
+    height: 100%;
+    background-color: transparent;
+    border: 1px solid lightgrey;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0px 15px;
+    font-size: 14px;
+
+    i {
+      font-size: 16px;
+      color: gray;
+    }
+  }
+}
+
+.memo-sorting-menu {
+  width: 200px;
+
+  .memo-sorting-item {}
+}
+
+.my-button {
+  border: 1px solid #465573;
+  color: #465573;
+  border-radius: 5px;
+  background-color: transparent;
+  font-weight: bold;
+  min-width: 80px;
+  height: 40px;
+
+  &.reset {
+    border: none;
+  }
+}
+
+.my-button:hover {
+  color: white;
+  background-color: #465573;
+
+  &.reset {
+    color: #465573;
+    border: 1px solid #465573;
+    background-color: white;
+  }
+}
+
+.app-property-value {
+  .app-input-wrapper {
+    label {
+      color: #646f85;
+      font-size: 13px;
+      margin-bottom: 5px;
+
+      .text-danger {
+        font-size: 16px;
+        line-height: 14px;
+        margin: 0 5px !important;
+      }
+    }
+
+    .form-control {
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      background-color: rgba(143, 152, 170, 0.1);
+      height: 40px;
+    }
+
+    .form-control:disabled {
+      background-color: #e9ecef !important;
+    }
+
+    .form-control:focus {
+      border: $outline;
+      box-shadow: $focus-shadow;
+    }
+
+    .app-textitem-editable-error {
+      .error-containers {
+        list-style: none;
+        padding: 0px;
+        margin: 0px;
+        font-size: 14px;
+
+        .error {
+          margin-top: 5px;
+        }
+      }
+    }
+  }
+}
+
+.autocomplete-container .input-container input:focus,
+hijri-gregorian-datepicker .form-group .input-group .form-control:focus,
+.ng-select.ng-select-focused .ng-select-container {
+  border: $outline !important;
+  box-shadow: $focus-shadow;
+}
+
+input::placeholder {
+  font-size: 12px;
+}
+
+.form-control:focus {
+  box-shadow: none !important;
+}
+
+.mat-stepper-horizontal {
+  margin-top: -25px;
+
+  .mat-horizontal-stepper-header-container {
+    .mat-step-header {
+      &.cdk-program-focused {
+        background-color: transparent;
+      }
+
+      .mat-step-icon-selected {
+        background-color: transparent;
+        color: #fff;
+        background-image: $wrapper-gradient;
+      }
+
+      .mat-step-label {
+        .mat-step-text-label {
+          @include small-screen {
+            white-space: pre-wrap;
+            overflow: visible;
+          }
+        }
+      }
+    }
+  }
+
+  .mat-horizontal-content-container {
+    overflow: visible;
+
+    @include medium-screen {
+      padding: 0px 0px 24px;
+    }
+  }
+
+  &.rtl {
+
+    .mat-horizontal-stepper-header:first-child::after,
+    .mat-horizontal-stepper-header:last-child::before {
+      display: none;
+    }
+
+    .mat-horizontal-stepper-header:first-child::before {
+      border-top-width: 1px;
+      border-top-style: solid;
+      content: "";
+      display: inline-block;
+      height: 0;
+      position: absolute;
+      width: calc(50% - 20px);
+      left: 0;
+    }
+
+    .mat-horizontal-stepper-header:last-child::after {
+      border-top-width: 1px;
+      border-top-style: solid;
+      content: "";
+      display: inline-block;
+      height: 0;
+      position: absolute;
+      width: calc(50% - 20px);
+      right: 0;
+    }
+  }
+}
+
+.form-wrapper {
+  padding: 30px 15px;
+  border: 1px solid $light-gray;
+
+  .buttons-wrapper {
+    display: flex;
+    justify-content: space-between;
+
+    .action-buttons-wrapper {
+      display: flex;
+    }
+
+    button {
+      background-image: $wrapper-gradient;
+      height: 40px;
+      color: $white;
+      border: none;
+      width: 125px;
+      margin-top: 20px;
+      border-radius: 5px;
+    }
+
+    button:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    button:hover {
+      opacity: 0.7;
+    }
+  }
+
+  .upload-wrapper {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+
+    label {
+      color: #8f98aa;
+      font-size: 14px;
+    }
+
+    button {
+      padding: 10px;
+      border: 1px solid lightgray;
+
+      span {
+        margin: 0px 10px;
+      }
+    }
+  }
+}
+
+.renameFileComponent {
+  .form-wrapper {
+    padding: 30px 15px;
+    border:none !important;
+
+    .buttons-wrapper {
+      display: flex;
+      justify-content: space-between;
+
+      .action-buttons-wrapper {
+        display: flex;
+      }
+
+      button {
+        background-image: $wrapper-gradient;
+        height: 40px;
+        color: $white;
+        border: none;
+        width: 125px;
+        margin-top: 20px;
+        border-radius: 5px;
+      }
+
+      button:disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+
+      button:hover {
+        opacity: 0.7;
+      }
+    }
+
+    .upload-wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+
+      label {
+        color: #8f98aa;
+        font-size: 14px;
+      }
+
+      button {
+        padding: 10px;
+        border: 1px solid lightgray;
+
+        span {
+          margin: 0px 10px;
+        }
+      }
+    }
+  }
+}
+
+.my-dynamic-viewer {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  // font-weight: bold;
+  min-height: 30px;
+
+  .my-label {
+    font-size: 12px;
+    font-weight: 500;
+    width: 150px;
+    word-break: break-word;
+
+    @include normal-screen {
+      width: 50%;
+    }
+  }
+
+  .my-value {
+    width: calc(100% - 150px);
+    word-break: break-word;
+
+    // font-weight: bold;
+    @include normal-screen {
+      width: 50%;
+    }
+  }
+
+  .direction-img {
+    font-size: 14px;
+
+    .incoming {
+      display: none;
+    }
+
+    .outgoing {
+      display: none;
+    }
+
+    .internal {
+      display: none;
+    }
+  }
+
+  &.draft {
+    .my-value {
+      color: #596973;
+    }
+  }
+
+  &.inProgress {
+    .my-value {
+      color: #3c3cf0;
+    }
+  }
+
+  &.registered {
+    .my-value {
+      color: #4f008c;
+    }
+  }
+
+  &.archived {
+    .my-value {
+      color: #fbb62c;
+    }
+  }
+
+  &.closed {
+    .my-value {
+      color: #00dca5;
+    }
+  }
+
+  &.approved {
+    .my-value {
+      color: $green-600;
+    }
+  }
+
+  &.assigned {
+    .my-value {
+      color: #fd6670;
+    }
+  }
+
+  &.sent {
+    .my-value {
+      color: #3c3cf0;
+    }
+  }
+
+  &.published {
+    .my-value {
+      color: #00dca5;
+    }
+  }
+
+  &.Outgoing {
+    .my-value {
+      display: flex;
+
+      .direction-img {
+        .outgoing {
+          color: #fbb62c;
+          margin: 1px 5px;
+          display: flex;
+        }
+      }
+
+      .text {
+        margin: 0px 5px;
+      }
+    }
+  }
+
+  &.Internal {
+    .my-value {
+      display: flex;
+
+      .direction-img {
+        .internal {
+          color: #3c3cf0;
+          margin: 1px 5px;
+          display: flex;
+        }
+      }
+
+      .text {
+        margin: 0px 5px;
+      }
+    }
+  }
+
+  &.Incoming {
+    .my-value {
+      display: flex;
+
+      .direction-img {
+        .incoming {
+          color: #00dca5;
+          display: flex;
+        }
+      }
+
+      .text {
+        margin: 0px 5px;
+        margin-top: -3px;
+      }
+    }
+  }
+
+  &.vertical {
+    display: block;
+
+    .my-label {
+      width: auto;
+    }
+
+    .my-value {
+      width: auto;
+    }
+  }
+
+  &.with-out-label {
+    width: 100% !important;
+  }
+}

package/src/lib/assets/scss/variables.scss

@@ -0,0 +1,62 @@
+$sideBar-gradient: linear-gradient(to bottom, #0dbab5, #2e62df);
+$wrapper-gradient: linear-gradient(to right, #0dbab5, #1a96c6);
+$wrapper-gradient-rtl: linear-gradient(to left, #0dbab5, #1a96c6);
+$border-shadow: 0px 1px 10px 2px rgba(0, 0, 0, 0.33);
+$hover-shadow: 0px 1px 5px 2px rgba(0, 0, 0, 0.13);
+$side-menu-color:rgba(204, 248, 237 , 1);
+$side-menu-border:rgb(180, 186, 198);
+$outline: 1px solid #1a96c6 !default;
+$focus-shadow: 0px 0px 4px 0px rgba(121,195,194,0.42) !important;
+$text-xl:24px;
+$text-lg:20px;
+$text-md:18px;
+$text-base: 16px;
+$text-sm:12px;
+$text-xs:10px;
+$blue: #2e62df;
+$green: #0dbab5;
+$white: #ffffff;
+$red: #ff375e;
+$light-gray: #dde0e2;
+
+$red-500: #ff375e;
+
+$red-400: #fd6670;
+$red-50: #f6858d;
+
+$black-400: #192841;
+$black-300: #465266;
+$black-200: #757e8d;
+$black-100: #a3a9b3;
+$black-50: #d1d4d9;
+
+$yellow-400: #f17205;
+$yellow-300: #eca15f;
+$yellow-200: #ebb98e;
+$yellow-50: #fbd5b5;
+
+$gray-500: #465573;
+$gray-400: #6a768e;
+$gray-300: #8f98aa;
+$gray-200: #b4bac6;
+$gray-100: #d9dce2;
+$gray-50: #f5f6f8;
+
+$cyan-50: #0dbab5;
+$cyan-100: #1a96c6;
+$cyan-200: #2e62df;
+
+$blue-400: #3c3cf0;
+$blue-300: #6363f3;
+$blue-200: #8a8af6;
+$blue-100: #b1b1f9;
+$blue-50: #d8d8fc;
+
+$green-600: #06a57e;
+$green-400: #00dca5;
+$green-300: #33e3b7;
+$green-200: #66eac9;
+$green-100: #99f1db;
+$green-50: #ccf8ed;
+
+$purple-200: #d8d8fc;

package/src/lib/components/activities-log/activities-log/activities-log.component.html

@@ -0,0 +1,11 @@
+<div class="viewer-loader pb-2">
+  <mat-progress-bar *ngIf="isFetching" mode="indeterminate"></mat-progress-bar>
+</div>
+<div class="activity-body">
+  <div class="activity-area">
+    <div *ngFor="let item of activitylog; let i = index">
+      <cts-single-activity [item]="item" [documentTitle]="documentTitle">
+      </cts-single-activity>
+    </div>
+  </div>
+</div>

package/src/lib/components/activities-log/activities-log/activities-log.component.scss

@@ -0,0 +1,12 @@
+.activity-body {
+    padding: 14px 10px;
+    overflow: auto;
+    height: 100%;
+    overflow-x: hidden;
+    .activity-area {
+      // padding: 0 12px 0 20px;
+      padding-inline-start: 20px;
+      padding-inline-end: 12px;
+      border-inline-start: 2px solid #d9dce2;
+    }
+  }

package/src/lib/components/activities-log/activities-log/activities-log.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ActivitiesLogComponent } from './activities-log.component';
+
+describe('ActivitiesLogComponent', () => {
+  let component: ActivitiesLogComponent;
+  let fixture: ComponentFixture<ActivitiesLogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ActivitiesLogComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ActivitiesLogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});