@vitrosoftware/common-ui-ts 1.1.15 → 1.1.17

package/css/common.css

@@ -6,7 +6,7 @@
 @import url('@vitrosoftware/common-ui-ts/css/third-party/jquery-contextMenu/jquery.contextMenu.min.css');
 @import url('@vitrosoftware/common-ui-ts/css/third-party/jquery-svg/jquery.svg.css');
 @import url('@vitrosoftware/common-ui-ts/css/third-party/sweetalert2/sweetalert2.css');
-@import url('@vitrosoftware/common-ui-ts/css/white/controls/pdf-viewer/pdf-viewer.css');
+@import url('@vitrosoftware/common-ui-ts/css/std/controls/pdf-viewer/pdf-viewer.css');
 
 :global(.vitro-opacity-low) {
     opacity: .3;

package/css/std/controls/action-handler/action-handler.css

@@ -92,6 +92,12 @@
     overflow: hidden;
 }
 
+.vitro-action-handler-dialog-confirm {
+    top: 0;
+    left: 0;
+    box-sizing: border-box !important;
+}
+
 .vitro-content-container {
     padding: 16px;
     flex: 1 1;
@@ -125,6 +131,7 @@
     box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.16), 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
     display: flex;
     flex-direction: column;
+    box-sizing: border-box;
 }
 
 .vitro-action-handler-dialog {
@@ -168,12 +175,16 @@
 }
 
 .vitro-small {
+    display: inline-block;
     color: #4A556C;
     font-size: 14px;
     line-height: 150% !important;
-    margin-left: 59px;
-    flex: 1 1;
+    padding-left: 59px;
     margin-top: -5px;
+    max-width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .vitro-button-close {
@@ -191,8 +202,8 @@
 .vitro-success .vitro-button-close,
 .vitro-warning .vitro-button-close,
 .vitro-error .vitro-button-close {
-    /* close.svg URL-encoder for SVG */
     margin-left: 8px;
+    /* close.svg URL-encoder for SVG */
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='iconoir:cancel'%3E%3Cpath id='Vector' d='M6.75781 17.2438L12.0008 12.0008L17.2438 17.2438M17.2438 6.75781L11.9998 12.0008L6.75781 6.75781' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
 }
 

package/css/std/controls/avatar/avatar.css

@@ -8,6 +8,9 @@
     height: 24px;
     min-width: 24px;
     text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     font-size: 12px;
     line-height: 24px;
 }

package/css/std/controls/command-menu/command-menu-dropdown-button.css

@@ -37,7 +37,7 @@
     position: absolute;
     z-index: 1150;
     top: calc(100% + 6px);
-    right: -18px;
+    left: -20px;
 }
 
 .vitro-dropdown-button-container :global(.dropdown-toggle):after,
@@ -54,7 +54,7 @@
     background-size: 100%;
     background-repeat: no-repeat;
     position: absolute;
-    right: 26px;
+    left: 24px;
     top: -11px;
     /* dropdown-arrow.svg URL-encoder for SVG */
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.31554 1.65838L0.382812 11H15.6249L9.69214 1.65838C8.90651 0.421336 7.10117 0.421335 6.31554 1.65838Z' fill='white'/%3E%3C/svg%3E%0A");
@@ -64,8 +64,12 @@
     left: 0;
 }
 
-.vitro-dropdown-button-container:first-child :global(.dropdown-menu::before) {
-    left: 20px;
+.vitro-dropdown-button-container:last-child :global(.dropdown-menu) {
+    right: -20px;
+}
+
+.vitro-dropdown-button-container:last-child :global(.dropdown-menu::before) {
+    right: 25px;
 }
 
 .vitro-dropdown-button-container :global(.dropdown-item) {
@@ -87,6 +91,7 @@
 }
 
 .vitro-dropdown-button-container :global(.dropdown-item):hover,
+.vitro-dropdown-button-container :global(.dropdown-item):focus,
 .vitro-dropdown-button-container :global(.dropdown-item):active {
     background: #F3F8FF;
 }

package/css/std/controls/dropdown-button/dropdown-button.css

@@ -0,0 +1,126 @@
+.vitro-dropdown-button {
+    display: flex;
+    align-items: center;
+    font-family: 'InterRegular';
+}
+
+.vitro-dropdown-button button,
+.vitro-dropdown-button button:hover,
+.vitro-dropdown-button button:active,
+.vitro-dropdown-button button:focus {
+    padding: 0 !important;
+    margin: 0 !important;
+    background-color: transparent !important;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    outline: none;
+    box-shadow: none !important;
+    color: #E0E0E0;
+    font-family: inherit !important;
+    font-size: inherit !important;
+    font-weight: normal !important;
+    width: 24px;
+    height: 24px;
+}
+
+.vitro-dropdown-button button::after {
+    display: none;
+}
+
+.vitro-dropdown-icon {
+    height: 24px;
+    width: 24px;
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    /* more.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11.5' cy='6' r='1.5' fill='%23222D44'/%3E%3Ccircle cx='11.5' cy='12' r='1.5' fill='%23222D44'/%3E%3Ccircle cx='11.5' cy='18' r='1.5' fill='%23222D44'/%3E%3C/svg%3E%0A");
+}
+
+.vitro-dropdown-button .vitro-text {
+    font-size: 14px;
+}
+
+.vitro-dropdown-button-item-overflow {
+    cursor: pointer;
+    white-space: nowrap;
+    display: flex;
+    font-size: 14px;
+    color: #4A556C;
+}
+
+.vitro-icon {
+    width: 20px;
+    height: 20px;
+    background-size: 20px;
+    margin-right: 12px;
+}
+
+.vitro-dropdown-button :global(.dropdown-menu) {
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
+    background: #fff;
+    border-radius: 4px;
+    border: none !important;
+    outline: none;
+    min-width: 241px;
+    width: -moz-fit-content;
+    width: -webkit-fit-content;
+    width: fit-content;
+    font-size: 14px;
+    padding: 0px;
+    font-weight: 400;
+    box-sizing: border-box;
+    -webkit-transform: none !important;
+    transform: none !important;
+    position: absolute;
+    z-index: 1150;
+    top: calc(100% + 6px) !important;
+    right: -4px !important;
+}
+
+.vitro-dropdown-button :global(.dropdown-menu)::before {
+    content: '';
+    display: block;
+    height: 11px;
+    width: 16px;
+    background-position: center;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    position: absolute;
+    right: 8px;
+    top: -11px;
+    background-image: url(data:image/svg+xml,%3Csvg viewBox=%270 0 16 11%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cpath d=%27M6.31554 1.65838L0.382812 11H15.6249L9.69214 1.65838C8.90651 0.421336 7.10117 0.421335 6.31554 1.65838Z%27 fill=%27white%27/%3E%3C/svg%3E%0A);
+}
+
+.vitro-dropdown-button :global(.dropdown-item) {
+    display: flex;
+    align-items: center;
+    height: 37px;
+    padding: 8px 12px;
+    border: none;
+    box-shadow: none;
+    outline: none;
+    box-sizing: border-box;
+}
+
+.vitro-dropdown-button :global(.dropdown-item):first-child {
+    border-radius: 4px 4px 0 0;
+}
+
+.vitro-dropdown-button :global(.dropdown-item):last-child {
+    border-radius: 0 0 4px 4px;
+}
+
+.vitro-dropdown-button :global(.dropdown-menu) :global(.dropdown-item):hover,
+.vitro-dropdown-button :global(.dropdown-menu) :global(.dropdown-item):focus,
+.vitro-dropdown-button :global(.dropdown-menu) :global(.dropdown-item):active {
+    background: #F3F8FF;
+}
+
+.dropdown-item:global(.dropdown-item-empty) {
+    background: #fff;
+    color: #bdbdbd;
+    cursor: default;
+}

package/css/std/controls/issue-tile/issue-tile-footer.css

@@ -0,0 +1,31 @@
+.vitro-issue-tile-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 6px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #E4E6EC;
+}
+
+.vitro-issue-tile-status {
+    display: flex;
+    align-items: center;
+}
+
+.vitro-status-color {
+    margin-right: 8px;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+}
+
+.vitro-button-more {
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    /* more-detail.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='icon_line/maximize'%3E%3Cpath id='Vector' d='M7.62169 16.6641H3.33594M3.33594 16.6641V12.3783M3.33594 16.6641L8.33596 11.6641' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath id='Vector_2' d='M12.4974 3.33594H16.664M16.664 3.33594V7.5026M16.664 3.33594L11.6641 8.33594' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A") !important;
+}

package/css/std/controls/issue-tile/issue-tile-header.css

@@ -0,0 +1,62 @@
+.vitro-issue-tile-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 22px;
+}
+
+.vitro-link {
+    padding: 4px 8px;
+    background: rgba(228, 230, 236, 0.50);
+    font-size: 14px;
+    line-height: 16px;
+    color: #326AD6;
+    border-radius: 4px;
+}
+
+.vitro-user-info {
+    display: flex;
+    align-items: center;
+    margin-left: 16px;
+}
+
+.vitro-user-info::after {
+    content: '';
+    display: block;
+    width: 4px;
+    height: 4px;
+    border-radius: 50%;
+    background: #4A556C;
+    margin-left: 16px;
+    margin-right: 16px;
+}
+
+.vitro-user-info > div:last-child {
+    display: flex;
+    flex-direction: column;
+}
+
+.vitro-avatar {
+    width: 28px;
+    height: 28px;
+    min-width: 28px;
+    line-height: 28px;
+    font-size: 14px;
+    margin-right: 8px;
+}
+
+.vitro-user-info > div span:last-child {
+    color: #4A556C;
+    font-size: 11px;
+    line-height: 11px;
+}
+
+.vitro-user-info > div span:first-child {
+    color: #222D44;
+    font-size: 14px;
+    line-height: 14px;
+    margin-bottom: 3px;
+}
+
+.vitro-dropdown-button {
+    margin-left: auto;
+}

package/css/std/controls/issue-tile/issue-tile.css

@@ -0,0 +1,24 @@
+.vitro-issue-tile {
+    cursor: pointer;
+    width: 100%;
+    padding: 20px 16px 0 16px;
+    box-sizing: border-box !important;
+}
+
+.vitro-control {
+    margin: 0;
+    padding: 0;
+}
+
+.vitro-control textarea {
+    box-sizing: border-box !important;
+}
+
+.vitro-issue-tile:global(.vitro-active) {
+    background: #F3F8FF;
+}
+
+.vitro-issue-tile:global(.vitro-active) .vitro-control div,
+.vitro-issue-tile:global(.vitro-active) .vitro-control textarea {
+    background: #F3F8FF;
+}

package/css/std/controls/lookup-picker/lookup-picker.css

@@ -76,12 +76,10 @@
 }
 
 .vitro-button-copy {
-    height: 16px;
-    width: 16px;
+    height: 24px;
+    width: 20px;
     display: inline-block;
-    position: absolute;
-    right: 8px;
-    top: calc(50% - 8px);
+    right: 0;
     /* copy.svg URL-encoder for SVG */
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='copy-icon'%3E%3Cpath id='Vector' d='M4.33594 4.14517V3.27214C4.33594 2.0877 4.75567 1.66797 5.9401 1.66797H12.7318C13.9162 1.66797 14.3359 2.0877 14.3359 3.27214V10.0638C14.3359 11.2482 13.9162 11.668 12.7318 11.668H11.8414' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath id='Vector_2' d='M10.0599 4.33203H3.26823C2.0838 4.33203 1.66406 4.75176 1.66406 5.9362V12.7279C1.66406 13.9123 2.0838 14.332 3.26823 14.332H10.0599C11.2443 14.332 11.6641 13.9123 11.6641 12.7279V5.9362C11.6641 4.75176 11.2443 4.33203 10.0599 4.33203Z' stroke='%238E98A3' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
     background-repeat: no-repeat;

package/css/std/controls/pdf-viewer/compare-side-by-side.css

@@ -0,0 +1,260 @@
+.pixelcompare-wrapper.pixelcompare-horizontal {
+  height: 100% !important;
+}
+.pixelcompare-horizontal .pixelcompare-handle:before, .pixelcompare-horizontal .pixelcompare-handle:after, .pixelcompare-vertical .pixelcompare-handle:before, .pixelcompare-vertical .pixelcompare-handle:after {
+  content: "";
+  display: block;
+  background: #fff;
+  position: absolute;
+  z-index: 30; 
+}
+img.pixelcompare-before, img.pixelcompare-after {
+  height: 100%;
+  object-fit: cover;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+}
+
+.pixelcompare-before-label, .pixelcompare-after-label, .pixelcompare-overlay {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%; 
+}
+
+.pixelcompare-before-label, .pixelcompare-after-label, .pixelcompare-overlay {
+  transition-duration: 0.5s; 
+}
+
+.pixelcompare-before-label, .pixelcompare-after-label {
+  transition-property: opacity; 
+}
+
+.pixelcompare-horizontal .pixelcompare-before-label:before, .pixelcompare-horizontal .pixelcompare-after-label:before {
+  top: 50%;
+  margin-top: -19px; 
+}
+
+.pixelcompare-vertical .pixelcompare-before-label:before, .pixelcompare-vertical .pixelcompare-after-label:before {
+  left: 50%;
+  margin-left: -45px;
+  text-align: center;
+  width: 90px; 
+}
+
+.pixelcompare-left-arrow, .pixelcompare-right-arrow, .pixelcompare-up-arrow, .pixelcompare-down-arrow {
+  width: 0;
+  height: 0;
+  border: 6px inset transparent;
+  position: absolute; 
+}
+
+.pixelcompare-left-arrow, .pixelcompare-right-arrow {
+  top: 50%;
+  margin-top: -6px;
+}
+
+.pixelcompare-up-arrow, .pixelcompare-down-arrow {
+  left: 50%;
+  margin-left: -6px; 
+}
+
+.pixelcompare-container {
+  box-sizing: content-box;
+  z-index: 0;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+}
+.pixelcompare-container img {
+  max-width: 100%;
+  position: absolute;
+  top: 0;
+  display: block; 
+}
+/* .pixelcompare-container.active .pixelcompare-overlay,
+.pixelcompare-container.active :hover.pixelcompare-overlay {
+  background: transparent; 
+} */
+.pixelcompare-container.active .pixelcompare-overlay .pixelcompare-before-label,
+.pixelcompare-container.active .pixelcompare-overlay .pixelcompare-after-label,
+.pixelcompare-container.active :hover.pixelcompare-overlay .pixelcompare-before-label,
+.pixelcompare-container.active :hover.pixelcompare-overlay .pixelcompare-after-label {
+  opacity: 0; 
+}
+.pixelcompare-container * {
+  box-sizing: content-box; 
+}
+
+.pixelcompare-before-label {
+  opacity: 0; 
+}
+.pixelcompare-before-label:before {
+  content: attr(data-content); 
+}
+
+.pixelcompare-after-label {
+  opacity: 0; 
+}
+.pixelcompare-after-label:before {
+  content: attr(data-content); 
+}
+
+.pixelcompare-horizontal .pixelcompare-before-label:before {
+  left: 10px; 
+}
+
+.pixelcompare-horizontal .pixelcompare-after-label:before {
+  right: 10px; 
+}
+
+.pixelcompare-vertical .pixelcompare-before-label:before {
+  top: 10px; 
+}
+
+.pixelcompare-vertical .pixelcompare-after-label:before {
+  bottom: 10px; 
+}
+
+.pixelcompare-overlay {
+  transition-property: background;
+  background: transparent;
+  z-index: 25; 
+}
+.pixelcompare-overlay:hover, 
+.pixelcompare-container.active .pixelcompare-overlay, 
+.pixelcompare-handle:hover + .pixelcompare-overlay {
+  background: rgba(0, 0, 0, 0.5); 
+}
+.pixelcompare-overlay:hover .pixelcompare-after-label {
+  opacity: 1; 
+}
+.pixelcompare-overlay:hover .pixelcompare-before-label {
+  opacity: 1; 
+}
+
+.pixelcompare-before {
+  z-index: 20; 
+}
+
+.pixelcompare-after {
+  z-index: 10; 
+}
+
+.pixelcompare-vertical .pixelcompare-handle {
+  background-color: rgba(247, 237, 237, 0.71);
+  height: 20px;
+  width: 65px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -19px;
+  margin-top: -10px;
+  border-radius: 1000px;
+  box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);
+  z-index: 40;
+  cursor: pointer;
+}
+
+.pixelcompare-horizontal .pixelcompare-handle {
+  /*background-color: rgba(247, 237, 237, 0.71);*/
+  /*height: 65px;*/
+  height: 100%;
+  width: 20px;
+  position: absolute;
+  left: calc(50% - 10px);
+  top: 0;
+  bottom: 0;
+  /*margin-top: -19px;*/
+  /*margin-left: -10px;*/
+  border-radius: 0;
+  /*box-shadow: 0px 0px 12px rgba(51, 51, 51, 0.5);*/
+  box-shadow: none;
+  z-index: 40;
+  /*cursor: pointer;*/
+  cursor: col-resize;
+}
+
+.pixelcompare-horizontal .pixelcompare-handle:before {
+  bottom: 0;
+  top: 0;
+  left: -1px;
+  /*bottom: 50%;*/
+  /*height: 799px;*/
+  height: 100%;
+  /*margin-bottom: 33px;*/
+  /*margin-left: 10px;*/
+  background: none;
+  position: absolute;
+  z-index: 999;
+  /*border-right: 1px dashed rgba(255, 255, 255, 0.5);*/
+  border-right: 2px solid #74A9E5;
+}
+
+/*.pixelcompare-horizontal .pixelcompare-handle:after {*/
+/*  top: 50%;*/
+/*  height: 257px;*/
+/*  margin-top: 33px;*/
+/*  margin-left: 10px;*/
+/*  background: none;*/
+/*  position: absolute;*/
+/*  z-index: 999;*/
+/*  !*border-right: 1px dashed rgba(255, 255, 255, 0.5);*!*/
+/*  border-right: 2px solid #74A9E5;*/
+/*}*/
+
+
+.pixelcompare-vertical .pixelcompare-handle:before {
+  margin-top: 10px;
+  margin-left: 11px;
+  width: 100vw;
+  background: none;
+  position: absolute;
+  z-index: 999;
+  border-top: 2px dashed rgba(255, 255, 255, 0.5);
+  right: 50%;
+  margin-right: 33px;
+}
+
+.pixelcompare-vertical .pixelcompare-handle:after {
+  margin-top: 10px;
+  width: 100vw;
+  background: none;
+  position: absolute;
+  z-index: 999;
+  border-top: 1px dashed rgba(255, 255, 255, 0.5);
+  left: 50%;
+  margin-left: 33px;
+}
+
+.pixelcompare-left-arrow {
+  border-right: 6px solid rgba(247, 237, 237, 0.71);
+  left: calc(50% - 26px);
+  /*margin-left: -13px;*/
+}
+
+.pixelcompare-right-arrow {
+  border-left: 6px solid rgba(247, 237, 237, 0.71);
+  right: calc(50% - 6px);
+  /*margin-right: -13px; */
+}
+
+.pixelcompare-up-arrow { 
+  border-bottom: 6px solid rgba(247, 237, 237, 0.71);
+  top: 50%;
+  margin-top: -13px;
+}
+
+.pixelcompare-down-arrow {
+  border-top: 6px solid rgba(247, 237, 237, 0.71);
+  bottom: 50%;
+  margin-bottom: -13px;
+}