@genexus/genexus-ide-ui 2.0.0 → 2.1.0

package/dist/collection/components/ww-images/ww-images.css

@@ -1,313 +1,159 @@
-/* - - - - - - - - - - - - - - - - -
-New classes for Chameleon + Mercury
-- - - - - - - - - - - - - - - - - */
+/*@container queries*/
+/* hiChar styles
+Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
+*/
 :host {
+  container-type: inline-size;
   display: grid;
   block-size: 100%;
+  overflow: auto;
+  grid-template-rows: max-content 1fr max-content;
 }
 
-.opacity-0 {
-  opacity: 0;
+.section {
+  display: contents;
 }
 
-.gxi-hidden {
-  display: none !important;
+.header {
+  grid-template-areas: "name module-folder" "advanced-filter-accordion advanced-filter-accordion";
+  grid-template-columns: 1fr 1fr;
+  grid-auto-rows: max-content max-content;
 }
 
-.align-center {
-  display: flex;
-  align-items: center;
+.name {
+  grid-area: name;
 }
 
-.align-end {
-  display: flex;
-  align-items: end;
+.module-folder {
+  grid-area: module-folder;
 }
 
-.overflow-auto {
-  overflow: auto;
+.advanced-filter-accordion {
+  grid-area: advanced-filter-accordion;
 }
 
-/*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
-:host(.gx-ide-component) {
-  height: 100% !important;
-  display: flex !important;
-  flex-direction: column !important;
+.main {
+  --sidebar-width: 400px;
+  display: grid;
+  grid-template-columns: 1fr var(--sidebar-width);
+  overflow: auto;
+  padding-block-start: var(--size-16);
 }
 
-/* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */
-.gx-ide-main-wrapper {
-  color: var(--gx-ide-component-text-color);
-  font-weight: var(--font-style-regular);
-  font-size: var(--font-size-body-m);
-  font-family: var(--font-family-body);
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  box-sizing: border-box;
+.main__grid {
+  overflow: auto;
+  position: relative;
 }
 
-/* - - - - - - - - - - - - - - - - - -
-New : For Mercury
-- - - - - - - - - - - - - - - - - - */
-.buttons-container {
-  display: flex;
-  gap: var(--spacing-gap-m);
+.tabular-grid-ww-images {
+  overflow: auto;
+  border-inline-end: var(--section-common-border);
 }
 
-/* - - - - - - - - - - - - - - - - - -
-Pill
-- - - - - - - - - - - - - - - - - - */
-.giu-static-pill-icon-and-text, .giu-static-pill {
-  background-color: var(--elevation-background-color, var(--color-accent-surface-elevation-1));
-  padding-inline: var(--spacing-padding-m);
-  color: var(--color-text-neutral-default);
-  font-size: var(--font-size-body-s);
-  line-height: var(--line-height-relaxed);
-  font-weight: var(--font-style-regular);
-  border-radius: 4px;
-  min-block-size: 25px;
-  display: inline-grid;
+ch-tabular-grid-rowset-empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
   align-items: center;
-  pointer-events: none;
+  justify-content: center;
+  inline-size: 100%;
+  z-index: 1;
 }
 
-.giu-static-pill-icon-and-text {
-  display: inline-grid;
-  grid-auto-flow: column;
-  grid-auto-columns: max-content;
-  gap: var(--spacing-gap-m);
+.main__aside {
+  overflow: auto;
+  display: grid;
+  grid-template-rows: max-content 1fr;
 }
 
-/* - - - - - - - - - - - - - - - - - -
-Tab
-- - - - - - - - - - - - - - - - - - */
-.tab-full-width-buttons::part(tab-list block-start),
-.tab-full-width-buttons::part(tab-list block-end) {
-  grid-auto-columns: 1fr;
+.main__filter {
+  display: grid;
+  grid-auto-rows: max-content;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-areas: "category options after" "style language user" "density layer date-time" "search-by-contents search-by-contents button-reset";
+  overflow: auto;
 }
 
-.tab-full-width-buttons::part(tab block-start) {
-  justify-content: center;
+.category {
+  grid-area: category;
 }
 
-/* - - - - - - - - - - - - - - - - - -
-Tree
-- - - - - - - - - - - - - - - - - - */
-/* Now the tree-view warning icon, looks gray on disabled items. This is a workaround to change the color to the enabled color, until this is resolved on Mercury. The solution might be to add a colorType for warning, error or success, that is static, meanning, it looks alwaws as "enabled", even if it is disabled. */
-.tree-view::part(item__header) {
-  --icon__system_warning_warning--disabled: var(
-    --icon__system_warning_warning--enabled
-  );
+.options {
+  grid-area: options;
 }
 
-/* - - - - - - - - - - - - - - - - - -
-Tabular Grid
-- - - - - - - - - - - - - - - - - - */
-.tabular-grid {
-  --focus-outline-width: 1px;
+.after-date-time {
+  grid-area: after;
 }
 
-/*@container queries*/
-/* hiChar styles
-Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
-*/
-:host {
-  display: block;
+.user {
+  grid-area: user;
 }
 
-/*--- Filter ---*/
-.module-folder::part(wrapper) {
-  padding-block: var(--spacing-padding-xxs);
-  margin-block-start: var(--gxg-label-separation-vertical);
+.date-time {
+  grid-area: date-time;
 }
 
-.filter--padding {
-  padding: var(--gx-ide-container__padding);
+.style {
+  grid-area: style;
 }
 
-.filter--gap {
-  gap: var(--spacing-gap-xl);
+.language {
+  grid-area: language;
 }
 
-.filter {
-  display: flex;
-  flex-direction: column;
-}
-.filter__first-row {
-  display: flex;
-  gap: var(--spacing-gap-l);
-}
-.filter__first-row .name,
-.filter__first-row .module-folder {
-  flex: 1;
-}
-.filter__first-row .filter-btn {
-  flex: none;
-}
-.filter__first-row .second-column {
-  display: flex;
-  flex-direction: row;
-  align-items: end;
-  gap: var(--spacing-gap-l);
-}
-.filter__first-row > * {
-  flex: 1;
-}
-.filter .checkboxes-label-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-}
-.filter .checkboxes-wrapper {
-  display: flex;
-  gap: var(--spacing-gap-l);
-  border-radius: var(--border-radius-sm);
-  height: var(--gxg-form-text-height);
-  box-sizing: border-box;
-  align-items: center;
-  padding-inline-start: var(--spacing-padding-xs);
-}
-.filter .user {
-  max-inline-size: 100% !important;
+.density {
+  grid-area: density;
 }
 
-/*Filter*/
-.filters-outer-wrapper {
-  display: grid;
-  grid-template-rows: 1fr;
-  transition: grid-template-rows 200ms;
-}
-.filters-outer-wrapper--hidden {
-  grid-template-rows: 0fr;
+.layer {
+  grid-area: layer;
 }
 
-.filters-inner-wrapper {
-  padding-block-start: var(--gx-ide-container__padding);
-  display: grid;
-  overflow: hidden;
-  grid-template-columns: repeat(12, 1fr);
-  grid-template-rows: repeat(3, 1fr);
-}
-.filters-inner-wrapper .search-contents {
-  grid-area: 1/1/2/5;
-}
-.filters-inner-wrapper .category {
-  grid-area: 1/5/2/9;
-}
-.filters-inner-wrapper .options {
-  grid-area: 1/9/2/13;
-}
-.filters-inner-wrapper .date-time {
-  grid-area: 2/1/3/5;
-}
-.filters-inner-wrapper .after-date-time {
-  grid-area: 2/5/3/9;
-}
-.filters-inner-wrapper .user {
-  grid-area: 2/9/3/13;
-}
-.filters-inner-wrapper .style {
-  grid-area: 3/1/4/4;
-}
-.filters-inner-wrapper .language {
-  grid-area: 3/4/4/7;
-}
-.filters-inner-wrapper .density {
-  grid-area: 3/7/4/10;
-}
-.filters-inner-wrapper .layer {
-  grid-area: 3/10/4/13;
+.search-by-contents {
+  grid-area: search-by-contents;
 }
 
-gxg-date-picker {
-  position: absolute;
-  inline-size: calc(33% - 16px);
-}
-
-gxg-date-picker::part(input) {
-  block-size: 24px;
+.button-reset {
+  grid-area: button-reset;
+  align-self: end;
+  justify-self: end;
 }
 
-.master-wrapper {
-  block-size: 100%;
-  position: relative;
+.main__images-container {
   display: grid;
-  grid-template-rows: auto 1fr;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--size-8);
+  position: relative;
+  z-index: 1;
 }
-
-/*--- Grid/Images Container ---*/
-.grid-images-container {
+.main__images-container .figure {
+  margin: 0;
+  background-color: var(--color-accent-surface-elevation-2);
   display: grid;
-  grid-template-columns: 1fr 220px;
-  grid-column-gap: 0;
-  grid-row-gap: 0;
-  overflow: auto;
-}
-
-.images-information__header {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-gap-l);
-}
-.images-information__header-title {
-  flex: none;
-}
-
-/* Objects Table */
-.images-grid {
-  grid-template-columns: repeat(2, 1fr);
-  grid-column-gap: 0;
-}
-.images-grid > :nth-child(1) {
-  grid-area: 1/1/1/3;
-}
-
-.images-container .image-item {
-  display: inline-block;
-  inline-size: 50%;
-  block-size: 128px;
+  gap: var(--size-4);
+  padding: var(--size-8);
+  border-radius: var(--size-4);
+  opacity: 0;
+  animation: fadeIn 300ms forwards;
 }
-.images-container .image-item__container {
-  padding: var(--gx-ide-container__padding);
+.main__images-container .figure__picture {
+  object-fit: contain;
 }
-.images-container .image-item__container img {
+.main__images-container .figure__img {
+  block-size: auto;
   inline-size: 100%;
-  block-size: 100%;
-  object-fit: scale-down;
 }
-.images-container .image-item__name {
-  overflow: hidden;
+.main__images-container .figure__figcaption {
+  text-align: center;
+  font-size: var(--font-size-body-xs);
   white-space: nowrap;
+  overflow: hidden;
   text-overflow: ellipsis;
-  text-align: center;
   inline-size: 100%;
-  display: block;
-  font-size: var(--font-size-body-xs);
-  padding-block: var(--spacing-padding-xs);
-  padding-inline: var(--spacing-padding-m);
-  box-sizing: border-box;
-  background-color: var(--color-accent-surface-surface);
-}
-.images-container .image-item:nth-child(odd) .image-item__name {
-  border-inline-end: 1px solid var(--color-border-surface-on-elevation-1);
 }
 
-.objects-count {
-  grid-template-columns: repeat(2, 1fr);
-}
-.objects-count *:nth-child(2) {
-  justify-content: flex-end;
-  align-items: flex-start;
-}
-
-.hiChar {
-  color: var(--color-text-primary-default);
-  filter: brightness(1.3);
-}
-
-.tabular-grid-ww-images ch-tabular-grid-cell:is(:nth-child(4)) {
+.tabular-grid-ww-images ch-tabular-grid-cell:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7)) {
   align-items: start;
   justify-content: start;
   display: inline-block;
@@ -315,4 +161,36 @@ gxg-date-picker::part(input) {
   overflow: hidden;
   text-overflow: ellipsis;
   min-inline-size: 0;
+}
+@keyframes fadeIn {
+  to {
+    opacity: 1;
+  }
+}
+@container (max-width: 992px) {
+  .main {
+    --sidebar-width: 300px;
+  }
+
+  .main__images-container {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+@container (max-width: 768px) {
+  .main {
+    --sidebar-width: 200px;
+  }
+
+  .main__images-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@container (max-width: 640px) {
+  .main {
+    --sidebar-width: 100px;
+  }
+
+  .main__images-container {
+    grid-template-columns: 1fr;
+  }
 }