@vitrosoftware/common-ui-ts 1.1.13 → 1.1.15

package/dist/index.css

@@ -18,7 +18,7 @@
 
 .vitro-title {
     font-size: 20px;
-    font-family: 'InterRegular';
+    font-family: 'InterMedium';
     line-height: 24px;
     margin-right: 24px;
     margin-bottom: 14px;
@@ -40,6 +40,12 @@
         padding-bottom: 8px;
         font-size: 18px;
         line-height: 27px;
+        margin: 0;
+    }
+
+    .pane > .vitro-flex {
+        flex-direction: column;
+        align-items: flex-start;
     }
 }
 ._breadcrumbs_vitro-breadcrumbs_3r4NcQY {
@@ -395,7 +401,7 @@
 
 #TableView {
     height: auto;
-    flex: 1 1 100%;
+    flex: 1 0 auto;
 }
 
 ._table-view_vitro-table-view_1tTs32D {
@@ -754,6 +760,11 @@
     flex: unset;
 }
 
+._uploader_vitro-uploader_237vX7T .k-upload-action {
+    min-width: 24px;
+    justify-content: flex-start;
+}
+
 #TableViewContainer .splitter:last-child > .pane.primary:has(._uploader_vitro-uploader_237vX7T) {
     position: relative;
 }
@@ -881,6 +892,8 @@
 ._uploader_vitro-uploader_237vX7T .k-progressbar {
     height: 32px !important;
     width: 32px !important;
+    min-width: 32px;
+    min-height: 32px;
     border-radius: 50% !important;
     display: flex;
     align-items: center !important;
@@ -892,8 +905,10 @@
 }
 
 ._uploader_vitro-uploader_237vX7T .k-progressbar > span {
-    height: 27px !important;
-    width: 27px !important;
+    height: 28px !important;
+    width: 28px !important;
+    min-width: 28px;
+    min-height: 28px;
     border-radius: 50% !important;
     background: #fff !important;
     display: block;
@@ -2510,6 +2525,19 @@
 ._lookup-picker-selected-item_vitro-selected-item_hw-euth {
     display: inline;
     margin: 0 6px 0 0;
+    display: flex;
+    align-items: center;
+}
+
+._lookup-picker-html-value_vitro-item-html-value_2QBoTey {
+    height: -moz-fit-content;
+    height: fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 8px;
 }
 ._lookup-picker-value-list_vitro-value-list_LSdCMjq {
     position: absolute;
@@ -2527,22 +2555,39 @@
     padding-right: 0 !important;
 }
 
-._lookup-picker-value-list_vitro-value-list_LSdCMjq div._lookup-picker-value-list_vitro-item_7yZBz5u {
+._lookup-picker-value-list_vitro-value-list_LSdCMjq > .ps > div:first-child {
+    padding: 0 !important;
+}
+
+._lookup-picker-value-list_vitro-value-list_LSdCMjq ._lookup-picker-value-list_vitro-item_7yZBz5u {
     padding: 8px 12px;
     cursor: pointer;
     border-radius: 0px;
+    display: flex;
+    align-items: center;
 }
 
-._lookup-picker-value-list_vitro-value-list_LSdCMjq div:last-child {
+._lookup-picker-value-list_vitro-value-list_LSdCMjq ._lookup-picker-value-list_vitro-item_7yZBz5u:last-child {
     border-radius: 0 0 4px 4px;
 }
 
-._lookup-picker-value-list_vitro-value-list_LSdCMjq div:first-child {
+._lookup-picker-value-list_vitro-value-list_LSdCMjq ._lookup-picker-value-list_vitro-item_7yZBz5u:first-child {
     border-radius: 4px 4px 0 0;
     padding: 0 !important;
 }
 
-._lookup-picker-value-list_vitro-value-list_LSdCMjq div._lookup-picker-value-list_vitro-item_7yZBz5u:hover {
+._lookup-picker-value-list_vitro-value-list_LSdCMjq ._lookup-picker-value-list_vitro-item_7yZBz5u > ._lookup-picker-value-list_vitro-item-html-value_1yl9tXx {
+    height: -moz-fit-content;
+    height: fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 8px;
+}
+
+._lookup-picker-value-list_vitro-value-list_LSdCMjq ._lookup-picker-value-list_vitro-item_7yZBz5u:hover {
     background: #F3F8FF;
 }
 
@@ -2750,6 +2795,16 @@
     width: 24px;
     height: 24px;
     margin-right: 4px;
+}
+
+@media (max-width: 800px) {
+    ._command-menu-button_vitro-command-menu-button_2IiXVbP ._command-menu-button_vitro-icon_1xB4d09 + div {
+        display: none;
+    }
+
+    ._command-menu-button_vitro-command-menu-button_2IiXVbP {
+        min-width: 40px !important;
+    }
 }
 ._command-menu-item_vitro-item_2pVhk23 {
     display: flex;
@@ -2969,12 +3024,31 @@ li:first-child ._command-menu-item_vitro-item_2pVhk23:hover {
 .vitro-button-context:hover,
 .vitro-button-context:active {
     border-color: #fff !important;
+}
+
+@media (max-width: 800px) {
+    ._command-menu-dropdown-button_vitro-command-menu-dropdown-button_2ImIuc3 ._command-menu-dropdown-button_vitro-icon_36InzPx + div {
+        display: none;
+    }
+
+    ._command-menu-dropdown-button_vitro-command-menu-dropdown-button_2ImIuc3 {
+        min-width: 40px !important;
+    }
+
+    li:first-child ._command-menu-dropdown-button_vitro-icon_36InzPx + div {
+        display: block;
+    }
+
+    .vitro-button-context {
+        min-width: 32px !important;
+        width: 32px;
+    }
 }
-a._sidebar-item_vitro-active_7p5iOhY {
+._sidebar-item_vitro-active_7p5iOhY {
     background-color: #DCEEFF;
 }
 
-ul > li:last-child > ul > li:last-child a._sidebar-item_vitro-active_7p5iOhY {
+ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     background-color: transparent;
 }
 
@@ -2993,33 +3067,95 @@ ul > li:last-child > ul > li:last-child a._sidebar-item_vitro-active_7p5iOhY {
     display: none;
 }
 
-a:hover ._sidebar-item_vitro-icon-text_3ROhyLK, a:hover ._sidebar-item_vitro-item-text_1kK_aIZ, a._sidebar-item_vitro-active_7p5iOhY ._sidebar-item_vitro-icon-text_3ROhyLK, a._sidebar-item_vitro-active_7p5iOhY ._sidebar-item_vitro-item-text_1kK_aIZ {
+._sidebar-item_vitro-active_7p5iOhY ._sidebar-item_vitro-icon-text_3ROhyLK,
+._sidebar-item_vitro-active_7p5iOhY ._sidebar-item_vitro-item-text_1kK_aIZ {
     color: #326AD6;
     font-weight: 500;
     font-family: 'InterMedium';
 }
 
-._sidebar-item_vitro-icon_2B88tow > .vitro-icon-hover {
-    display: none;
+._sidebar-item_vitro-icon_2B88tow {
+    width: 24px;
+    height: 24px;
+}
+
+.toggled.pinned ._sidebar-item_vitro-item_1BR_7F0 a {
+    width: 100%;
+}
+
+._sidebar-item_vitro-item_1BR_7F0 a > div {
+    display: flex;
+    width: -moz-fit-content;
+    width: fit-content;
+    align-items: center;
 }
 
-._sidebar-item_vitro-icon_2B88tow:hover > .vitro-icon-hover {
+._sidebar-item_vitro-item_1BR_7F0 a {
+    text-decoration: none;
+    height: 40px;
+    width: 40px;
+    border-radius: 8px;
+    padding: 8px;
+    cursor: pointer;
+    margin-bottom: 8px;
     display: block;
 }
 
-._sidebar-item_vitro-icon_2B88tow:hover > .vitro-icon-default {
-    display: none;
+._sidebar-item_vitro-active_7p5iOhY {
+    background-color: #DCEEFF;
 }
 
-._sidebar-item_vitro-icon_2B88tow {
-    width: 24px;
-    height: 24px;
+.vitro-bottom-menu ._sidebar-item_vitro-item-text_1kK_aIZ {
+    display: block;
+    color: #4A556C;
+    font-size: 12px;
+    line-height: 12px;
+    text-align: center;
 }
 
-.vitro-display-none {
+.vitro-bottom-menu ._sidebar-item_vitro-icon-text_3ROhyLK {
     display: none;
+}
+
+.vitro-bottom-menu ._sidebar-item_vitro-active_7p5iOhY {
+    background: transparent;
+    position: relative;
+}
+
+.vitro-bottom-menu ._sidebar-item_vitro-active_7p5iOhY::after {
+    content: '';
+    display: block;
+    position: absolute;
+    height: 2px;
+    border-radius: 2px;
+    background: #4292F7;
+    width: 32px;
+    bottom: -8px;
+}
+
+._sidebar-item_vitro-active_7p5iOhY ._sidebar-item_vitro-item-text_1kK_aIZ {
+    color: #4A556C;
+    font-family: 'InterRegular' !important;
+}
+
+._sidebar-item_vitro-item_1BR_7F0 {
+    display: flex;
+    justify-content: center;
+}
+
+.vitro-bottom-menu ._sidebar-item_vitro-item_1BR_7F0 > a {
+    background: transparent;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    width: -moz-fit-content;
+    width: fit-content;
+    height: 100%;
+    padding: 0;
+    margin-bottom: 0;
 }
-
 ._sidebar_vitro-sidebar_1IxGYiU {
     height: 100%;
     position: fixed;
@@ -3057,21 +3193,6 @@ a:hover ._sidebar-item_vitro-icon-text_3ROhyLK, a:hover ._sidebar-item_vitro-ite
     justify-content: space-between;
 }
 
-._sidebar_vitro-sidebar_1IxGYiU a {
-    text-decoration: none;
-    height: 40px;
-    width: 40px;
-    border-radius: 8px;
-    padding: 8px;
-    cursor: pointer;
-    margin-bottom: 8px;
-    display: block;
-}
-
-._sidebar_vitro-sidebar_1IxGYiU a:hover {
-    background-color: #DCEEFF;
-}
-
 ._sidebar_vitro-sidebar_1IxGYiU ul > li:last-child > ul > li:last-child a {
     margin-bottom: 0;
 }
@@ -3089,15 +3210,55 @@ a:hover ._sidebar-item_vitro-icon-text_3ROhyLK, a:hover ._sidebar-item_vitro-ite
     font-weight: 400 !important;
 }
 
-.toggled.pinned ._sidebar_vitro-sidebar_1IxGYiU a {
+.vitro-bottom-menu {
     width: 100%;
+    z-index: 10000;
+    flex-direction: row;
+    height: 60px;
+    padding: 0 21px !important;
+    background: #fff;
+    bottom: 0;
+    top: initial;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
+    border-radius: 4px 4px 0 0;
 }
 
-._sidebar_vitro-sidebar_1IxGYiU a > div {
+.vitro-bottom-menu ul {
     display: flex;
-    width: -moz-fit-content;
-    width: fit-content;
-    align-items: center;
+    flex-direction: row;
+    height: 100%;
+}
+
+._sidebar_vitro-scroll-container_3K-iJy8 {
+    height: 100%;
+    flex: 0 1 auto;
+    overflow: hidden;
+    padding: 8px 0;
+}
+
+._sidebar_vitro-scroll-container_3K-iJy8 > ul {
+    transition: 1s all ease;
+}
+
+._sidebar_vitro-button-more_3s9oZY9 {
+    display: block;
+    width: 40px;
+    height: 40px;
+    min-width: 40px;
+    border: none;
+    background-color: #fff;
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    /* bottom-menu-button-more.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 41 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10.5' cy='20' r='2.5' transform='rotate(-90 10.5 20)' fill='%234A556C'/%3E%3Ccircle cx='20.5' cy='20' r='2.5' transform='rotate(-90 20.5 20)' fill='%234A556C'/%3E%3Ccircle cx='30.5' cy='20' r='2.5' transform='rotate(-90 30.5 20)' fill='%234A556C'/%3E%3C/svg%3E%0A");
+}
+
+._sidebar_vitro-button-more_3s9oZY9:hover,
+._sidebar_vitro-button-more_3s9oZY9:active {
+    border: none;
+    background-color: #fff;
+    outline: none;
 }
 ._task-tile_vitro-task-tile_35bZu48 {
     position: relative;
@@ -3493,4 +3654,106 @@ a:hover ._sidebar-item_vitro-icon-text_3ROhyLK, a:hover ._sidebar-item_vitro-ite
     position: absolute;
     bottom: 0;
     right: 0;
+}
+._avatar_vitro-avatar_P2tU-_r {
+    position: relative;
+    border-radius: 50%;
+    border: 0;
+    background: #76AFF8;
+    color: #fff !important;
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    text-align: center;
+    font-size: 12px;
+    line-height: 24px;
+}
+
+._avatar_vitro-avatar_P2tU-_r._avatar_vitro-avatar-big_pEmlX3a {
+    width: 32px;
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 16px;
+}
+
+._user-profile_vitro-user-profile_11XpBoQ span {
+    margin-right: 10px;
+    color: #5F6276;
+    font-size: 14px;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+._user-profile_vitro-user-profile_11XpBoQ > button > div {
+    display: flex;
+    align-items: center;
+}
+
+._user-profile_vitro-user-profile_11XpBoQ .dropdown-toggle {
+    background-color: transparent !important;
+    border: none;
+    padding: 0;
+}
+
+._user-profile_vitro-user-profile_11XpBoQ .dropdown-toggle::after {
+    display: none;
+}
+
+._user-profile_vitro-user-profile_11XpBoQ .dropdown-toggle:active, 
+._user-profile_vitro-user-profile_11XpBoQ .dropdown-toggle:hover {
+    background: transparent;
+    border: none;
+    outline: none;
+}
+
+._user-profile_vitro-user-profile_11XpBoQ .dropdown-menu {
+    background: #fff;
+    width: -moz-fit-content;
+    width: fit-content;
+    border-radius: 4px;
+    padding: 0;
+    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.10);
+    inset: calc(100% + 5px) 0px auto auto !important;
+}
+
+._user-profile_vitro-user-profile_11XpBoQ .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;
+    /* 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");
+}
+
+._user-profile_vitro-dropdown-item_dSErsta {
+    cursor: pointer;
+    background: #fff;
+    padding: 8px 12px;
+    font-size: 14px;
+    line-height: 16px;
+}
+
+._user-profile_vitro-dropdown-item_dSErsta:first-child {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+}
+
+._user-profile_vitro-dropdown-item_dSErsta:last-child {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+._user-profile_vitro-dropdown-item_dSErsta:hover,
+._user-profile_vitro-dropdown-item_dSErsta:active {
+    background: #DCEEFF;
 }

package/dist/index.d.ts

@@ -49,6 +49,9 @@ import * as ALERT from './controls/Alert/AlertConstants';
 import { Dialog } from './controls/Dialog/Dialog';
 import { DialogContent } from './controls/Dialog/DialogContent';
 import { DialogFooter } from './controls/Dialog/DialogFooter';
+import { Avatar } from './controls/Avatar/Avatar';
+import { UserProfile } from './controls/UserProfile/UserProfile';
+import { UserLookupPicker } from './controls/UserLookupPicker/UserLookupPicker';
 export { Breadcrumbs };
 export { TopLevelMenu };
 export { TreeView, TreeViewContext, TREE_VIEW };
@@ -73,3 +76,6 @@ export { Sidebar, SidebarItem, SidebarSection };
 export { TaskTile };
 export { Alert, ALERT };
 export { Dialog, DialogContent, DialogFooter };
+export { Avatar };
+export { UserProfile };
+export { UserLookupPicker };