Merge pull request #7803 from qmonmert/tikui/Landscape

Refactoring: Landscape.vue
jhipster · Oct 22, 2023 · 3e59087 · 3e59087
2 parents c153806 + 83366ee
commit 3e59087
Show file tree

Hide file tree

Showing 11 changed files with 381 additions and 225 deletions.
diff --git a/src/main/style/organism/_organism.scss b/src/main/style/organism/_organism.scss
@@ -5,5 +5,6 @@
 @import 'module-properties/module-properties';
 @import 'side-menu/side-menu';
 @import 'vertical-space/vertical-space';
+@import 'landscape/landscape';
 @import 'landscape-loader/landscape-loader';
 @import 'landscape-minimap/landscape-minimap';
diff --git a/src/main/style/organism/landscape/_landscape.scss b/src/main/style/organism/landscape/_landscape.scss
@@ -0,0 +1,169 @@
+$jhlite-landscape-padding: 20px;
+$jhlite-landscape-line-color: $jhlite-global-line-color;
+$jhlite-landscape-box-radius: $jhlite-global-box-radius;
+$jhlite-landscape-primary-color: $jhlite-global-primary-color;
+$jhlite-landscape-color-text-light: $jhlite-global-color-text-light;
+$jhlite-landscape-selectable-highlight-animation: $jhlite-global-selectable-highlight-animation;
+$jhlite-landscape-not-selectable-highlight-animation: $jhlite-global-not-selectable-highlight-animation;
+$jhlite-landscape-valid-highlight-end-color: $jhlite-global-valid-highlight-end-color;
+$jhlite-landscape-primary-alternative-color: $jhlite-global-primary-alternative-color;
+
+.jhipster-landscape, .jhlite-landscape-minimap {
+  .jhipster-landscape-map {
+    position: relative;
+    padding: $jhlite-landscape-padding;
+  }
+
+  .jhipster-landscape-modes-selection {
+    position: absolute;
+    top: $jhlite-landscape-padding;
+    left: $jhlite-landscape-padding;
+    z-index: 3;
+    border: 1px dotted $jhlite-landscape-line-color;
+    border-radius: $jhlite-landscape-box-radius;
+    background: var(--jhlite-chip-bg-color);
+    padding: 10px;
+
+    &--modes {
+      border: 1px solid $jhlite-landscape-line-color;
+      border-radius: 1.5em;
+    }
+
+    &--modes-switch {
+      border: 0;
+      border-radius: 1.5em;
+      background-color: transparent;
+      cursor: pointer;
+      padding: 7px 15px;
+      color: var(--jhlite-global-color-text);
+
+      &.-selected {
+        background-color: $jhlite-landscape-primary-color;
+        color: $jhlite-landscape-color-text-light;
+      }
+    }
+  }
+
+  .jhipster-landscape-connectors {
+    position: absolute;
+    top: $jhlite-landscape-padding;
+    left: $jhlite-landscape-padding;
+    z-index: 1;
+
+    &--line {
+      stroke: $jhlite-landscape-line-color;
+      stroke-opacity: 0.7;
+      stroke-width: 1px;
+      stroke-dasharray: 2 2;
+      fill: none;
+
+      &.-selectable-highlighted,
+      &.-not-selectable-highlighted,
+      &.-highlighted-unselection,
+      &.-selected {
+        stroke-dasharray: none;
+        stroke-width: 3px;
+        stroke-opacity: 1;
+      }
+
+      &.-selected {
+        stroke: $jhlite-landscape-primary-color;
+      }
+
+      &.-selectable-highlighted {
+        animation: $jhlite-landscape-selectable-highlight-animation;
+      }
+
+      &.-not-selectable-highlighted,
+      &.-highlighted-unselection {
+        animation: $jhlite-landscape-not-selectable-highlight-animation;
+      }
+    }
+  }
+
+  .jhipster-landscape-levels {
+    display: grid;
+    position: relative;
+    place-items: center;
+    z-index: 2;
+
+    &--level {
+      grid-row: 1;
+      padding: 0;
+
+      &.-compacted {
+        margin-right: 20px;
+        min-width: 150px;
+      }
+
+      &.-extended {
+        margin-right: 30px;
+        min-width: 250px;
+      }
+    }
+  }
+
+  .jhipster-landscape-feature {
+    border: 2px dotted $jhlite-landscape-line-color;
+    border-radius: $jhlite-landscape-box-radius;
+    background: rgba($color: $jhlite-landscape-primary-alternative-color, $alpha: 30%);
+
+    &--title {
+      text-align: center;
+      color: var(--jhlite-global-color-text);
+      font-size: 1em;
+      font-weight: bold;
+
+      &.-extended {
+        margin: 5px;
+      }
+
+      &.-compacted {
+        margin: 1px 3px;
+      }
+    }
+
+    &--modules {
+      padding: 0;
+    }
+
+    &--module {
+      list-style-type: none;
+    }
+
+    &.-extended {
+      padding: 10px 5px 0;
+    }
+
+    &.-compacted {
+      padding: 1px 3px 0;
+    }
+
+    &.-selectable-highlighted {
+      animation: $jhlite-landscape-selectable-highlight-animation;
+      color: $jhlite-landscape-color-text-light;
+    }
+
+    &.-not-selectable-highlighted,
+    &.-highlighted-unselection {
+      animation: $jhlite-landscape-not-selectable-highlight-animation;
+      color: $jhlite-landscape-color-text-light;
+    }
+  }
+
+  .jhipster-landscape-element {
+    list-style-type: none;
+
+    &.-compacted {
+      margin-bottom: 5px;
+    }
+
+    &.-extended {
+      margin-bottom: 15px;
+    }
+  }
+}
+
+.jhipster-landscape {
+  position: relative;
+}
diff --git a/src/main/style/organism/landscape/landscape.code.pug b/src/main/style/organism/landscape/landscape.code.pug
@@ -0,0 +1,3 @@
+include landscape.mixin.pug
+
++jhlite-landscape
diff --git a/src/main/style/organism/landscape/landscape.md b/src/main/style/organism/landscape/landscape.md
@@ -0,0 +1 @@
+## Landscape
diff --git a/src/main/style/organism/landscape/landscape.mixin.pug b/src/main/style/organism/landscape/landscape.mixin.pug
@@ -0,0 +1,151 @@
+include /organism/module-properties/module-properties.mixin.pug
+
+mixin jhlite-landscape
+  .jhipster-landscape.jhlite-menu-content-template
+    .jhipster-landscape-modes-selection
+      .jhipster-landscape-modes-selection--modes
+        button.jhipster-landscape-modes-selection--modes-switch.-selected Compacted
+        button.jhipster-landscape-modes-selection--modes-switch Extended
+    .jhipster-landscape-map.jhlite-menu-content-template--content
+      .jhipster-landscape-levels
+        ul.jhipster-landscape-levels--level.-compacted
+          li.jhipster-landscape-element.-compacted
+            //LandscapeModuleVue
+            .jhlite-chip.-selectable.-compacted
+              .jhlite-chip--title.-selectable.-compacted github-codespaces
+              .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
+        ul.jhipster-landscape-levels--level.-compacted
+          li.jhipster-landscape-element.-compacted
+            //LandscapeModuleVue
+            .jhlite-chip.-selectable.-compacted
+              .jhlite-chip--title.-selectable.-compacted github-codespaces
+              .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
+            //LandscapeModuleVue
+            .jhlite-chip.-selectable.-compacted
+              .jhlite-chip--title.-selectable.-compacted github-codespaces
+              .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
+            //LandscapeModuleVue
+            .jhlite-chip.-selectable.-compacted
+              .jhlite-chip--title.-selectable.-compacted github-codespaces
+              .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
+        ul.jhipster-landscape-levels--level.-compacted
+          li.jhipster-landscape-element.-compacted
+            //LandscapeModuleVue
+            .jhlite-chip.-selectable.-compacted
+              .jhlite-chip--title.-selectable.-compacted github-codespaces
+              .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
+            //LandscapeModuleVue
+            .jhlite-chip.-selectable.-compacted
+              .jhlite-chip--title.-selectable.-compacted github-codespaces
+              .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
+            //LandscapeModuleVue
+            .jhlite-chip.-selectable.-compacted
+              .jhlite-chip--title.-selectable.-compacted github-codespaces
+              .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
+            //LandscapeModuleVue
+            .jhlite-chip.-selectable.-compacted
+              .jhlite-chip--title.-selectable.-compacted github-codespaces
+              .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
+            //LandscapeModuleVue
+            .jhlite-chip.-selectable.-compacted
+              .jhlite-chip--title.-selectable.-compacted github-codespaces
+              .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
+            //LandscapeModuleVue
+            .jhlite-chip.-selectable.-compacted
+              .jhlite-chip--title.-selectable.-compacted github-codespaces
+              .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
+            //LandscapeModuleVue
+            .jhlite-chip.-selectable.-compacted
+              .jhlite-chip--title.-selectable.-compacted github-codespaces
+              .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
+            //LandscapeModuleVue
+            .jhlite-chip.-selectable.-compacted
+              .jhlite-chip--title.-selectable.-compacted github-codespaces
+              .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
+            //LandscapeModuleVue
+            .jhlite-chip.-selectable.-compacted
+              .jhlite-chip--title.-selectable.-compacted github-codespaces
+              .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
+            //LandscapeModuleVue
+            .jhlite-chip.-selectable.-compacted
+              .jhlite-chip--title.-selectable.-compacted github-codespaces
+              .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
+            //LandscapeModuleVue
+            .jhlite-chip.-selectable.-compacted
+              .jhlite-chip--title.-selectable.-compacted github-codespaces
+              .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
+            //LandscapeModuleVue
+            .jhlite-chip.-selectable.-compacted
+              .jhlite-chip--title.-selectable.-compacted github-codespaces
+              .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
+            //LandscapeModuleVue
+            .jhlite-chip.-selectable.-compacted
+              .jhlite-chip--title.-selectable.-compacted github-codespaces
+              .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
+            //LandscapeModuleVue
+            .jhlite-chip.-selectable.-compacted
+              .jhlite-chip--title.-selectable.-compacted github-codespaces
+              .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
+            //LandscapeModuleVue
+            .jhlite-chip.-selectable.-compacted
+              .jhlite-chip--title.-selectable.-compacted github-codespaces
+              .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
+            //LandscapeModuleVue
+            .jhlite-chip.-selectable.-compacted
+              .jhlite-chip--title.-selectable.-compacted github-codespaces
+              .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
+            //LandscapeModuleVue
+            .jhlite-chip.-selectable.-compacted
+              .jhlite-chip--title.-selectable.-compacted github-codespaces
+              .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
+            //LandscapeModuleVue
+            .jhlite-chip.-selectable.-compacted
+              .jhlite-chip--title.-selectable.-compacted github-codespaces
+              .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
+            //LandscapeModuleVue
+            .jhlite-chip.-selectable.-compacted
+              .jhlite-chip--title.-selectable.-compacted github-codespaces
+              .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
+            //LandscapeModuleVue
+            .jhlite-chip.-selectable.-compacted
+              .jhlite-chip--title.-selectable.-compacted github-codespaces
+              .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
+            //LandscapeModuleVue
+            .jhlite-chip.-selectable.-compacted
+              .jhlite-chip--title.-selectable.-compacted github-codespaces
+              .jhlite-chip--description.-selectable.-compacted Init GitHub Codespaces configuration files
+      svg.jhipster-landscape-connectors(style='width: 800px; height: 724px;')
+        path.jhipster-landscape-connectors--line.-selectable.-compacted(d='M 212 412 l 138 0')
+        path.jhipster-landscape-connectors--line.-selectable.-compacted(d='M 503 412 l 142 0')
+    .jhlite-menu-content-template--menu
+      .jhlite-side-menu
+        .jhlite-side-menu--slot.-expand
+          .jhlite-vertical-space.-paragraph
+            .jhlite-vertical-space--line
+              +jhlite-module-properties
+        .jhlite-side-menu--slot
+          // TODO: ProjectActionsVue
+          .jhipster-side-form--actions
+            .jhlite-vertical-space.-paragraph
+              // SLOT
+              .jhlite-vertical-space--line
+                button.jhlite-button.-block
+                  // TODO: IconVue
+                  em.jhlite-icon.jhlite-icon-play-circled
+                  span &nbsp;Apply new
+              .jhlite-vertical-space--line
+                button.jhlite-button.-block
+                  // TODO: IconVue
+                  em.jhlite-icon.jhlite-icon-play-circled
+                  span &nbsp;Apply selected
+              // END SLOT
+              .jhlite-vertical-space--line
+                button.jhlite-button.-block
+                  // TODO: IconVue
+                  em.jhlite-icon.jhlite-icon-play-circled
+                  span &nbsp;Format
+              .jhlite-vertical-space--line
+                button.jhlite-button.-block
+                  // TODO: IconVue
+                  em.jhlite-icon.jhlite-icon-play-circled
+                  span &nbsp;Download
diff --git a/src/main/style/organism/landscape/landscape.render.pug b/src/main/style/organism/landscape/landscape.render.pug
@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include landscape.code.pug
diff --git a/src/main/style/organism/organism.pug b/src/main/style/organism/organism.pug
@@ -14,6 +14,8 @@ block content
       include /documentation/atomic-design/quote/organism
     .tikui-vertical-spacing--line
       include:componentDoc(height=70) header/header.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=890) landscape/landscape.md
     .tikui-vertical-spacing--line
       include:componentDoc(height=320) landscape-loader/landscape-loader.md
     .tikui-vertical-spacing--line