linear-react-components-ui 0.4.76-rc.10-beta → 0.4.76-rc.14

package/.tool-versions

@@ -0,0 +1 @@
+nodejs 10.16.0

package/.vscode/settings.json

@@ -1,7 +1,6 @@
 {
   "files.exclude": {
-    "__error": "Not found",
-    "config": false,
+    "config": true,
     "coverage": true,
     "node_modules": true,
     "scripts": true,

package/README.md

@@ -36,6 +36,39 @@ Compilar para publicação:
 
 `npm run demo:prod`
 
+### Publicação da lib no NPM
+A princípio precisaremos fazer o login no npm para isso rode o comando abaixo:
+
+  `npm login`
+
+Para gerar uma build nova e fazer a publicação no npm rode os comandos a seguir:
+
+  `npm version <versão>`
+
+  `npm run publish:npm`
+
+Caso queira gerar uma build com versão beta e fazer a publicação no npm rode os comandos da seguinte forma:
+
+  `npm version <versão>`
+
+  `npm run publish:npm --tag beta`
+
+Caso queira gerar uma build com versão candidata e fazer a publicação no npm rode os comandos da seguinte forma:
+
+  `npm version <versão>`
+
+  `npm run publish:npm --tag rc`
+
+no local onde esta denominado o campo versão, você deverá colocar a nova versão do pacote, alguns exemplos para o campo versão:
+ - release: 0.4.75
+ - beta: 0.4.75-beta.0
+ - candidata: 0.4.75-rc.0
+ 
+ficando da seguinte maneira:
+
+  `npm version 0.4.75`
+
+
 ### Publicar versão de demonstração no Heroku
 
     

package/lib/assets/styles/dropdown.scss

@@ -76,12 +76,12 @@
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
     animation: revealelement 0.3s forwards ease-in-out;
     margin-right: 7px;
-    > .floatmenulink {
+    > .floatmenuitem {
       text-decoration: none;
       color: #666666;
       text-align: center;
     }
-    > .floatmenulink .-items {
+    > .floatmenuitem .-items {
       border: solid 1px $default-hover-color;
       margin: 0 5px 5px 0;
       font-size: 12px;
@@ -106,6 +106,32 @@
       transition: all 0.2s ease-in-out;
       &:hover {
         background: $default-hover-color;
+
+        > .floatmenudropdown {
+          visibility: visible;
+          pointer-events: initial;
+          opacity: 1;
+        }
+      }
+      > .floatmenudropdown {
+        position: absolute;
+        padding: 0;
+        top: 5px;
+        right: 5px;
+        visibility: hidden;
+        opacity: 0;
+        pointer-events: none;
+      }
+      > .floatmenulink {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        flex: 1;
+        width: 100%;
+        text-decoration: none;
+        color: #666666;
+        text-align: center;
       }
       &.iconcontainer {
         padding-bottom: 10px;

package/lib/assets/styles/effects.scss

@@ -2,9 +2,11 @@
 @keyframes slideInFromTop {
   0% {
     transform: translateY(-60%);
+    -webkit-font-smoothing: subpixel-antialiased;
   }
   30% {
     transform: translateY(0);
+    -webkit-font-smoothing: subpixel-antialiased;
   }
 }
 
@@ -719,3 +721,13 @@
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
 }
+
+// SlideWithPosition
+@keyframes slideWithPositionFromLeft {
+  from {
+    left: -100%;
+  }
+  to {
+    left: 100%;
+  }
+}

package/lib/assets/styles/floatMenu.scss

@@ -15,4 +15,3 @@
     }
   }
 }
-

package/lib/assets/styles/multiSelect.scss

@@ -0,0 +1,105 @@
+@import "commons.scss";
+@import "effects.scss";
+.multiSelect-component {
+  width: 100%;
+  display: block;
+  .selectwrapper {
+    height: auto;
+
+    > .multiselect {
+      flex-wrap: wrap;
+      position: relative;
+      > .textinput {
+        order: 1;
+        display: inline-block;
+      }
+      > .selecteditem {
+        font-size: 14px;
+        position: absolute;
+        top: 50%;
+        left: 10px;
+        transform: translateY(-50%);
+      }
+    }
+
+    > .actionbutton {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      margin: 0 3px;
+      padding: 0 3px;
+
+      > svg {
+        margin: 0;
+      }
+    }
+  }
+}
+
+.multiSelect-component > .dropdown {
+  animation: 0.5s ease-in 0s 1 slideDown;
+  background-color: #fff;
+  border: $component-border-color;
+  @extend %component-menu-dropdown;
+  display: grid;
+  grid-template-rows: auto;
+  height: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: absolute;
+  z-index: 9999;
+  > .filtercontainer {
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr 20px;
+    border: 1px solid $component-border-color;
+    margin: 4px;
+    > .filterinput {
+      border: 0;
+      font-size: 13px;
+      text-indent: 4px;
+      padding: 10px 5px;
+    }
+    > .filtericon {
+      position: absolute;
+      right: 5px;
+      top: 10px;
+    }
+  }
+  > .listcontainer > .item {
+    margin: 0;
+    padding: 6px 10px;
+    display: flex;
+    cursor: pointer;
+    justify-content: stretch;
+    border-bottom: solid 1px #e1e1e1;
+    &:last-child {
+      border-bottom: none;
+    }
+    &:hover {
+      background-color: $default-hover-color;
+    }
+    &.-selected {
+      background-color: $default-hover-color;
+    }
+    .menubutton {
+      background-color: transparent;
+      border: 0;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      > .checkboxicon {
+        margin-right: 5px;
+      }
+      > .label {
+        flex-grow: 1;
+      }
+      > .menuicon {
+        margin-right: 5px;
+      }
+    }
+  }
+}

package/lib/assets/styles/panel.scss

@@ -48,7 +48,6 @@
   }
   > .panel-content {
     height: auto;
-    overflow: auto;
     padding: 15px;
   }
 }

package/lib/assets/styles/periodpicker.scss

@@ -0,0 +1,65 @@
+@import "commons.scss";
+@import "effects.scss";
+.periodpicker-component {
+  height: auto;
+  position: relative;
+  display: flex;
+  border-radius: 2px;
+  border: 1px solid #dae1e8;
+
+  .inputwrapper {
+      border: none;
+  }
+
+  .separation_icon {
+    font-size: 16px;
+    flex: 0 0 10px;
+  }
+
+  .calendar-button {
+    flex: 0 0 20px;
+    padding: 4px;
+    border: none;
+  }
+ 
+  .input-base-component {
+    flex: 1;
+  }
+
+}
+
+.dropdown-period>.item {
+  margin: 0;
+  padding: 6px 10px;
+  display: flex;
+  cursor: pointer;
+  justify-content: stretch;
+  border-bottom: solid 1px #e1e1e1;
+
+  &:hover {
+    background-color: $default-hover-color;
+  }
+  &.-selected {
+    background-color: $default-hover-color;
+  }
+  &.-disabled {
+    @extend %component-menu-disabled;
+    &:hover {
+      background-color: transparent;
+    }
+  }
+}
+
+.dropdown-period {
+  width: 100%;
+  /* animation: 0.5s ease-in 0s 1 slideDown; */
+  background-color: #FFF;
+  border: #dae1e8;
+  display: grid;
+  grid-template-rows: auto;
+  height: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
+  /* margin-top: 2px; */
+  z-index: 99999999999;
+}

package/lib/assets/styles/progress.scss

@@ -1,14 +1,15 @@
 @import "colors.scss";
 @import "commons.scss";
+
 .container-progress {
   display: flex;
   overflow: hidden;
-  height: 24px;
   margin-bottom: 20px;
   background-color: #f5f5f5; 
   border-radius: 4px;
   -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
   box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
+  position: relative;
 }
 
 .bar {
@@ -50,6 +51,12 @@
     -o-animation: progress-bar-stripes 2s linear infinite;
     animation: progress-bar-stripes 2s linear infinite;
   }
+  &.-indeterminate {
+    animation: slideWithPositionFromLeft infinite;
+    position: absolute;
+    left: -100%;
+    top: 0;
+  }
   >.progressbar-label {
     display: flex;
     align-items: center;

package/lib/assets/styles/select.scss

@@ -3,6 +3,7 @@
 .select-component {
   width: 100%;
   display: block;
+  position: relative;
   .selectwrapper {
     height: auto;
   }

package/lib/assets/styles/table.scss

@@ -1,5 +1,11 @@
 @import "colors.scss";
 @import "effects.scss";
+
+.table-component,
+.innertable {
+  contain: strict;
+}
+
 .table-component {
   width: 100%;
   max-width: 100%;
@@ -8,7 +14,8 @@
   font-size: 14px;
   max-height: 20em;
   position: relative;
-  > .headercontainer, .bodycontainer {
+  > .headercontainer,
+  .bodycontainer {
     width: 100%;
     .innertable {
       width: 100%;
@@ -31,7 +38,8 @@
     vertical-align: middle;
     border-bottom: 1px solid $component-border-color-soft;
     line-height: 18px;
-    > .hidden, > .rowhover { 
+    > .hidden,
+    > .rowhover {
       display: none;
       animation: revealelement 0.2s forwards ease-in-out;
     }
@@ -39,7 +47,7 @@
       border-bottom: 0;
     }
   }
-  
+
   > .bodycontainer > .innertable > .tbody > .trow,
   > .tbody > .trow {
     &.-selected {
@@ -48,7 +56,7 @@
     }
     &:hover {
       > .rowcolumn > .rowhover {
-        display: table
+        display: table;
       }
     }
   }
@@ -84,7 +92,7 @@
       background: $header-container-bg;
     }
     > .headercontainer > .innertable > .theader,
-    > .theader { 
+    > .theader {
       background: $header-container-bg;
     }
   }

package/lib/assets/styles/tabs.scss

@@ -1,4 +1,29 @@
 @import "colors.scss";
+%tab-closepanel {
+  background-color: transparent;
+  border: 0;
+  height: 20px;
+  margin-right: 5px;
+  padding: 0;
+  text-shadow: 0 1px 0 $font-color-second;
+  width: 20px;
+  visibility: hidden;
+  transition: all 0.2s ease-in-out;
+  border-radius: 4px;
+  &:after {
+    content: "×";
+    font-size: 20px;
+    text-shadow: none;
+    color: $font-color-soft;
+    transition: all 0.2s ease-in-out;
+  }
+  &:hover {
+    background-color: $color-light-dark;
+    &:after {
+      color: $font-color-second;
+    }
+  }
+}
 %tab-component-menus {
   .menu {
     -webkit-box-shadow: 0px -1px 0px $component-border-color inset;
@@ -7,22 +32,26 @@
     display: flex;
     flex-wrap: nowrap;
     justify-content: center;
-    flex-grow: 1;
+    flex: 1;
     &.-firsttabident > .menuitem:first-child {
       margin-left: 15px;
     }
   }
-  .menu  > .menuitem {
+  .menu > .menuitem {
     border-bottom: 0;
-    border-radius: 5px 5px 0px 0px; 
-    -moz-border-radius: 5px 5px 0px 0px; 
-    -webkit-border-radius: 5px 5px 0px 0px; 	
+    border-radius: 5px 5px 0px 0px;
+    -moz-border-radius: 5px 5px 0px 0px;
+    -webkit-border-radius: 5px 5px 0px 0px;
     text-shadow: 0 1px $font-color-second;
     cursor: pointer;
     line-height: 20px;
     margin-right: 1px;
     padding: 0;
     width: auto;
+    min-width: 100px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     &.selected {
       border: 1px solid $component-border-color;
       background: $font-color-second;
@@ -31,40 +60,22 @@
       box-shadow: 0;
       font-weight: bold; /* z-index: 2; */
     }
-    &.selected > .closepanel, &:hover > .closepanel {
+    &.selected > .closepanel,
+    &:hover > .closepanel {
       visibility: visible;
     }
   }
-  .menu  > .menuitem > .menubutton {
+  .menu > .menuitem > .menubutton {
+    white-space: nowrap;
+    text-overflow: ellipsis;
     background: transparent;
     border: 0;
   }
-  .menu  > .menuitem > .closepanel {
-    background-color: transparent;
-    border: 0;
-    float: right;
-    height: 20px;
-    margin: 5px 5px 0 0;
-    padding: 0;
-    text-shadow: 0 1px 0 $font-color-second;
-    width: 20px;
-    visibility: hidden;
-    transition: all 0.2s ease-in-out;
-    border-radius: 4px;
-    &:after {
-      content: "×";
-      font-size: 20px;
-      text-shadow: none;
-      color: $font-color-soft;
-      transition: all 0.2s ease-in-out;
-    }
-    &:hover {
-      background-color: $color-light-dark;
-      &:after {
-        color: $font-color-second;
-      }
-    }
+
+  .menu > .menuitem > .closepanel {
+    @extend %tab-closepanel;
   }
+
   .menubar {
     width: auto;
     border-bottom: 1px solid #dae1e8;
@@ -77,15 +88,19 @@
 
 .tabs-component {
   display: grid;
-  grid-template-rows: auto 1fr;
   width: 100%;
   height: 100%;
   @extend %tab-component-menus;
   > .menucontainer {
     display: flex;
     flex-wrap: nowrap;
-    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
     @extend %tab-component-menus;
+    > .dropdownbutton {
+      border-bottom: 1px solid $component-border-color;
+      padding: 0 0.8rem;
+    }
   }
   > .panel {
     background-color: $font-color-second;
@@ -111,9 +126,9 @@
     justify-content: center;
   }
   > .menu > .menuitem {
-    border-radius: 5px 0px 0px 5px; 
-    -moz-border-radius: 5px 0px 0px 5px; 
-    -webkit-border-radius: 5px 0px 0px 5px; 
+    border-radius: 5px 0px 0px 5px;
+    -moz-border-radius: 5px 0px 0px 5px;
+    -webkit-border-radius: 5px 0px 0px 5px;
     &.selected {
       border: 1px solid $component-border-color;
       border-right: 1px solid $font-color-second;
@@ -121,8 +136,8 @@
       width: 100%;
     }
   }
-  > .menu  > .menuitem > .closepanel {
-    float: left
+  > .menu > .menuitem > .closepanel {
+    float: left;
   }
   > .panel {
     border-top: 1px solid $component-border-color;
@@ -139,9 +154,9 @@
     box-shadow: 0 1px 1px 0px $component-border-color inset;
   }
   > .menu > .menuitem {
-    border-radius: 0px 0px 5px 5px; 
-    -moz-border-radius: 0px 0px 5px 5px; 
-    -webkit-border-radius: 0px 0px 5px 5px; 
+    border-radius: 0px 0px 5px 5px;
+    -moz-border-radius: 0px 0px 5px 5px;
+    -webkit-border-radius: 0px 0px 5px 5px;
     &.selected {
       border: 1px solid $component-border-color;
       border-top: 1px solid $font-color-second;
@@ -167,9 +182,9 @@
     justify-content: center;
   }
   > .menu > .menuitem {
-    border-radius: 0px 5px 5px 0px; 
-    -moz-border-radius: 0px 5px 5px 0px; 
-    -webkit-border-radius: 0px 5px 5px 0px; 
+    border-radius: 0px 5px 5px 0px;
+    -moz-border-radius: 0px 5px 5px 0px;
+    -webkit-border-radius: 0px 5px 5px 0px;
     &.selected {
       border: 1px solid $component-border-color;
       border-left: 1px solid $font-color-second;
@@ -182,3 +197,22 @@
     border-right: 0;
   }
 }
+
+/*
+  Dropdown hide tabs
+*/
+.dropdown-hide-tabs .menuitem {
+  cursor: pointer;
+  line-height: 20px;
+  margin-right: 1px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 50px;
+  > .closepanel {
+    @extend %tab-closepanel;
+  }
+  &:hover > .closepanel {
+    visibility: visible;
+  }
+}

package/lib/assets/styles/treeview.scss

@@ -42,6 +42,25 @@
   animation: revealelement 0.3s forwards ease-in-out;
   > .label {
     width: auto;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    >.node-menu {
+      animation: revealelement 0.3s forwards ease-in-out;
+      margin-left: 10px;
+    }
+    >.node-rightelements {
+      animation: revealelement 0.3s forwards ease-in-out;
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+    }
+    >.node-toolbarelements {
+      animation: revealelement 0.3s forwards ease-in-out;
+      width: auto;
+      height: 100%;
+      margin-left: 10px;
+    }
     &:hover {
       background-color: rgb(209, 209, 209);
     }
@@ -53,3 +72,16 @@
     float: left;
   }
 }
+
+.nodelist > .treeviewitem > .label > .node-rightelements  > .element,
+.treeview-component > .treeviewcontainer > .treeviewitem > .label > .node-rightelements > .element {
+  margin-left: 10px;
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.nodelist > .treeviewitem > .label > .node-toolbarelements > .toolbar-group > .buttonbar,
+.treeview-component > .treeviewcontainer > .treeviewitem > .label > .node-toolbarelements > .toolbar-group > .buttonbar {
+  border: none;
+}