moleculemaker · GalMunGral · Jul 22, 2024 · Jul 22, 2024 · Jul 22, 2024 · Jul 22, 2024
diff --git a/src/app/app-build/app-build.component.html b/src/app/app-build/app-build.component.html
@@ -8,35 +8,6 @@
 
 <div class="canvas_container" dfDropZone (drop)="dropped($event)">
   <div class="canvas_toolbar">
-    <div class="button button_undo" disabled>
-      <svg
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M11.9133 5.4265H3.24663L6.95329 1.7665C7.07971 1.64008 7.15073 1.46862 7.15073 1.28983C7.15073 1.11105 7.07971 0.939584 6.95329 0.813164C6.82687 0.686744 6.65541 0.615723 6.47663 0.615723C6.29784 0.615723 6.12638 0.686744 5.99996 0.813164L0.666626 6.0865L5.99996 11.3332C6.1255 11.4578 6.29541 11.5275 6.47232 11.5269C6.64923 11.5262 6.81864 11.4554 6.94329 11.3298C7.06794 11.2043 7.13762 11.0344 7.137 10.8575C7.13637 10.6806 7.0655 10.5112 6.93996 10.3865L3.23996 6.75983H11.9066C13.5086 6.75095 15.0488 7.37748 16.1897 8.50214C17.3307 9.6268 17.9792 11.1579 17.9933 12.7598C17.9856 13.8702 17.6699 14.9566 17.0814 15.8982C16.4929 16.8399 15.6547 17.5997 14.66 18.0932C14.4955 18.1763 14.3708 18.3213 14.3133 18.4963C14.2849 18.583 14.2737 18.6744 14.2806 18.7654C14.2874 18.8564 14.3121 18.9451 14.3533 19.0265C14.3944 19.1079 14.4512 19.1804 14.5204 19.2399C14.5896 19.2994 14.6698 19.3447 14.7564 19.3731C14.9315 19.4306 15.1222 19.4163 15.2866 19.3332C16.7647 18.5873 17.9469 17.3632 18.6409 15.86C19.3349 14.3569 19.4998 12.6631 19.1088 11.0543C18.7178 9.44553 17.7939 8.01638 16.4875 6.9994C15.181 5.98242 13.5688 5.43745 11.9133 5.45317V5.4265Z"
-          fill="currentColor"
-        />
-      </svg>
-    </div>
-    <div class="button button_redo" disabled>
-      <svg
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M14 0.813337C13.8745 0.688685 13.7045 0.619008 13.5276 0.619633C13.3507 0.620258 13.1813 0.691135 13.0567 0.81667C12.932 0.942206 12.8623 1.11212 12.863 1.28903C12.8636 1.46594 12.9345 1.63535 13.06 1.76L16.7667 5.42H8.09999C6.43097 5.38531 4.80007 5.92111 3.47681 6.93885C2.15355 7.95659 1.21713 9.39536 0.822311 11.0174C0.427493 12.6394 0.597906 14.3476 1.30539 15.8596C2.01287 17.3717 3.21508 18.5971 4.71332 19.3333C4.87422 19.4156 5.06119 19.4305 5.2331 19.3749C5.40501 19.3192 5.54777 19.1976 5.62999 19.0367C5.71221 18.8758 5.72714 18.6888 5.6715 18.5169C5.61587 18.345 5.49422 18.2022 5.33332 18.12C4.33862 17.6265 3.50036 16.8667 2.91186 15.9251C2.32335 14.9835 2.00768 13.897 1.99999 12.7867C2.01408 11.1847 2.66263 9.65364 3.80354 8.52898C4.94444 7.40432 6.48465 6.77779 8.08666 6.78667H16.7533L13.06 10.44C12.9848 10.5697 12.9556 10.7208 12.9769 10.8692C12.9982 11.0175 13.0689 11.1543 13.1775 11.2575C13.2862 11.3608 13.4264 11.4244 13.5756 11.4382C13.7248 11.4519 13.8743 11.415 14 11.3333L19.3333 6.06L14 0.813337Z"
-          fill="currentColor"
-        />
-      </svg>
-    </div>
-
     <div class="button button_cart" *ngIf="!isGuest" (click)="toggleCartPanel()">
       <svg
         width="20"

diff --git a/src/app/app-header/app-header.component.html b/src/app/app-header/app-header.component.html
@@ -47,6 +47,7 @@
     My Groups
   </div>
   <div (click)="goToBlockLibrary()">Block Library</div>
+  <div (click)="this.tutorialCompleted = false">Tutorial</div>
   <div>
     <a href="https://moleculemaker.org/dmm-help/">Help</a>
   </div>
@@ -75,3 +76,5 @@
     </div>
   </p-dialog>
 </div>
+
+<tutorial [completed]="tutorialCompleted" (onClose)="tutorialCompleted = true"></tutorial>
diff --git a/src/app/app-header/app-header.component.ts b/src/app/app-header/app-header.component.ts
@@ -23,6 +23,24 @@ export class AppHeaderComponent implements OnInit {
     this.menuOpen = false;
   }
 
+  tutorialCompletedLocalStorageKey = 'dmm-tutorial-completed';
+  _tutorialCompleted = Boolean(
+    localStorage.getItem(this.tutorialCompletedLocalStorageKey),
+  );
+
+  get tutorialCompleted() {
+    return this._tutorialCompleted;
+  }
+
+  set tutorialCompleted(completed: boolean) {
+    this._tutorialCompleted = completed;
+    if (completed) {
+      localStorage.setItem(this.tutorialCompletedLocalStorageKey, '1');
+    } else {
+      localStorage.removeItem(this.tutorialCompletedLocalStorageKey);
+    }
+  }
+
   constructor(
     private userService: UserService,
     private workspaceService: WorkspaceService,

diff --git a/src/app/app-sidebar/app-sidebar.component.html b/src/app/app-sidebar/app-sidebar.component.html
@@ -1,31 +1,4 @@
 <div class="sidebar_container">
-  <!-- todo: change to data driven toggle structure -->
-  <!--
-  <div class="toggle"
-    [class.select_0]="currentToggle == 'build'"
-    [class.select_1]="currentToggle == 'preset'"
-  >
-    <div class="button" [class.selected]="currentToggle == 'build'" (click)="onChangeToggle('build')">Build your own</div>
-    <div class="button" [class.selected]="currentToggle == 'preset'" (click)="onChangeToggle('preset')">Presets</div>
-  </div>
-  -->
-  <div class="sidebar_toggle" (click)="toggleSidebar()">
-    <svg
-      width="9"
-      height="27"
-      viewBox="0 0 9 27"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        fill-rule="evenodd"
-        clip-rule="evenodd"
-        d="M7.44795 26.3975C7.21084 26.5163 6.93625 26.536 6.68458 26.4524C6.43291 26.3687 6.22477 26.1886 6.10595 25.9515L0.10595 13.9515C0.0362665 13.8124 -1.69969e-05 13.659 -1.69833e-05 13.5035C-1.69697e-05 13.3479 0.0362665 13.1945 0.10595 13.0555L6.10595 1.05546C6.16416 0.937015 6.24524 0.831266 6.34451 0.744308C6.44379 0.65735 6.55929 0.590902 6.68437 0.548796C6.80945 0.506689 6.94162 0.489757 7.07327 0.498976C7.20492 0.508194 7.33345 0.543381 7.45143 0.602507C7.56942 0.661632 7.67454 0.743526 7.76073 0.843472C7.84691 0.943417 7.91246 1.05943 7.9536 1.18483C7.99474 1.31023 8.01064 1.44253 8.00041 1.57411C7.99017 1.70568 7.95399 1.83393 7.89395 1.95146L2.11995 13.5035L7.89395 25.0555C8.01276 25.2926 8.03251 25.5672 7.94887 25.8188C7.86523 26.0705 7.68505 26.2786 7.44795 26.3975Z"
-        fill="currentColor"
-      />
-    </svg>
-  </div>
-
   <div class="tabs">
     <div
       class="tab"

diff --git a/src/app/app-sidebar/app-sidebar.component.scss b/src/app/app-sidebar/app-sidebar.component.scss
@@ -47,12 +47,6 @@ $sidebar_width: 500px;
     .sidebar_container {
       @include translate(-$sidebar_width, 0%);
     }
-
-    .sidebar_toggle {
-      svg {
-        @include rotate(180deg);
-      }
-    }
   }
 }
 
@@ -86,45 +80,6 @@ $sidebar_width: 500px;
     }
   }
 
-  .sidebar_toggle {
-    cursor: pointer;
-
-    position: absolute;
-    left: 100%;
-    top: $padding;
-    z-index: get_index(interface);
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    min: {
-      height: 5rem;
-    }
-
-    background: {
-      color: color_variable("background");
-    }
-
-    margin: {
-      left: 4px; //don't cover up the border
-    }
-    padding: ($padding * 0.5) ($padding * 0.65);
-
-    border: 1px solid color_variable("interface_border");
-    border: {
-      left: 0px;
-    }
-
-    @include border-right-radius($border_radius * 2);
-
-    &:hover {
-      background: {
-        color: color_variable("interface_hover");
-      }
-    }
-  }
-
   .tabs {
     display: flex;
 
@@ -437,6 +392,20 @@ $sidebar_width: 500px;
         y: scroll;
       }
 
+      &::-webkit-scrollbar {
+        --webkit-appearance: none;
+        width: 16px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: #eeeeee;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        border-radius: 8px;
+        background-color: rgba(0, 0, 0, 0.5);
+      }
+
       padding: {
         top: $padding;
         right: $padding * 0.5;

diff --git a/src/app/app-sidebar/app-sidebar.component.ts b/src/app/app-sidebar/app-sidebar.component.ts
@@ -119,8 +119,6 @@ export class AppSidebarComponent implements OnInit {
     this.applyFilters();
   }
 
-  isSidebarExpanded = true;
-
   molecule: Molecule | null = null;
   functionModeEnabled = true;
 
@@ -158,13 +156,6 @@ export class AppSidebarComponent implements OnInit {
     return this.moleculeSearch.length == 0 ? this.searchPlaceholder : '';
   }
 
-  //********************************************
-  toggleSidebar(override?: boolean) {
-    this.isSidebarExpanded =
-      typeof override != 'undefined' ? override : !this.isSidebarExpanded;
-    this.sidebarClasses = this.isSidebarExpanded ? 'expanded' : 'collapsed';
-  }
-
   //********************************************
   onClickType(type: string) {
     if (type == 'all') {

diff --git a/src/app/block-library/block-library.component.html b/src/app/block-library/block-library.component.html
@@ -54,5 +54,3 @@
     </div>
   </div>
 </div>
-
-<tutorial></tutorial>
diff --git a/src/app/block-library/block-library.component.scss b/src/app/block-library/block-library.component.scss
@@ -1,4 +1,8 @@
 :host {
+  display: block;
+  height: 100%;
+  overflow-y: scroll;
+
   .title {
     margin: 32px;
     text-align: center;

diff --git a/src/app/group-cart/group-cart.component.scss b/src/app/group-cart/group-cart.component.scss
@@ -60,10 +60,10 @@
       font-size: 24px;
       display: flex;
       justify-content: flex-end;
+      position: sticky;
+      bottom: 76px;
 
       ::ng-deep button {
-        width: 388px;
-        height: 85px;
         background: #31509e;
         border: 1px solid #31509e;
         border-radius: 8px;

diff --git a/src/app/molecule-detail/molecule-detail.component.html b/src/app/molecule-detail/molecule-detail.component.html
@@ -10,15 +10,6 @@
           : 'none'
       "
     >
-      <div class="carousel-item" (click)="requestFullscreen($event)">
-        <svg
-          *ngIf="hasSvgAndMol2"
-          width="100%"
-          height="100%"
-          [attr.data-src]="svgUrl"
-        ></svg>
-      </div>
-
       <div class="carousel-item blocks-view">
         <svg viewBox="-300 -150 600 300" width="100%" height="100%">
           <g
@@ -40,6 +31,15 @@
         </svg>
       </div>
 
+      <div class="carousel-item" (click)="requestFullscreen($event)">
+        <svg
+          *ngIf="hasSvgAndMol2"
+          width="100%"
+          height="100%"
+          [attr.data-src]="svgUrl"
+        ></svg>
+      </div>
+
       <div class="carousel-item" (click)="requestFullscreen($event)">
         <div #3dmol *ngIf="hasSvgAndMol2" class="mol-container"></div>
       </div>

diff --git a/src/app/molecule-detail/molecule-detail.component.ts b/src/app/molecule-detail/molecule-detail.component.ts
@@ -32,7 +32,7 @@ export class MoleculeDetailComponent implements OnChanges {
   @Input()
   blockSet!: BlockSet;
 
-  carouselIndex = 1;
+  carouselIndex = 0;
 
   get hasSvgAndMol2() {
     return (

diff --git a/src/app/tutorial/tutorial.component.html b/src/app/tutorial/tutorial.component.html
@@ -1,4 +1,4 @@
-<div class="tutorial" *ngIf="currentStep">
+<div class="tutorial" *ngIf="!completed">
   <div
     class="step"
     [class]="[

diff --git a/src/app/tutorial/tutorial.component.ts b/src/app/tutorial/tutorial.component.ts
@@ -1,13 +1,25 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
   selector: 'tutorial',
   templateUrl: './tutorial.component.html',
   styleUrls: ['./tutorial.component.scss'],
 })
-export class TutorialComponent implements OnInit {
-  currentStep: any | null = null; //if null, the tutorial will not show
-  steps: any[] = [];
+export class TutorialComponent {
+  steps = [
+    { id: 'welcome', class: '' },
+    { id: 'videos', class: 'wide' },
+
+    // { id: 'workspace', class: '' },
+    // { id: 'blocks', class: '' },
+
+    // { id: 'build', class: '' },
+    // { id: 'build_002', class: 'wide' },
+    // { id: 'build_003', class: 'wide' },
+    // { id: 'build_004', class: 'wide' },
+
+    { id: 'finish', class: '' },
+  ];
 
   videos = [
     {
@@ -71,63 +83,36 @@ export class TutorialComponent implements OnInit {
     },
   ];
 
-  currentVideoIndex = 0;
-  readonly videoCount = 10;
-
-  //********************************************
-  ngOnInit(): void {
-    this.steps = [
-      { id: 'welcome', class: '' },
-      { id: 'videos', class: 'wide' },
-
-      // { id: 'workspace', class: '' },
-      // { id: 'blocks', class: '' },
-
-      // { id: 'build', class: '' },
-      // { id: 'build_002', class: 'wide' },
-      // { id: 'build_003', class: 'wide' },
-      // { id: 'build_004', class: 'wide' },
+  index = 0;
 
-      { id: 'finish', class: '' },
-    ];
-
-    //start tutorial right away?
-    this.start();
+  get currentStep() {
+    return this.steps[this.index]!;
   }
 
-  //********************************************
-  ngAfterViewInit() {}
+  currentVideoIndex = 0;
+  readonly videoCount = 10;
 
-  //********************************************
-  start() {
-    this.currentStep = this.steps[0];
-  }
+  @Input()
+  completed!: boolean;
 
-  //********************************************
-  close() {
-    this.currentStep = null;
-  }
+  @Output()
+  onClose = new EventEmitter<void>();
 
-  //********************************************
-  getCurrentStepIndex() {
-    return this.steps.findIndex((item, index) => {
-      return item == this.currentStep;
-    });
+  close() {
+    this.index = 0;
+    this.onClose.emit();
   }
 
-  //********************************************
   previousStep() {
-    let index = this.getCurrentStepIndex();
-    this.currentStep = index > 0 ? this.steps[index - 1] : 0;
+    if (this.index > 0) {
+      this.index--;
+    }
   }
 
-  //********************************************
   nextStep() {
-    let index = this.getCurrentStepIndex();
-    this.currentStep =
-      index <= this.steps.length - 1
-        ? this.steps[index + 1]
-        : this.steps[this.steps.length - 1];
+    if (this.index < this.steps.length - 1) {
+      this.index++;
+    }
   }
 
   previousVideo() {
-Original file line number
+Diff line change
@@ Expand Up / @@ -54,5 +54,3 @@ @@
         </div>
       </div>
     </div>
-    <tutorial></tutorial>