New SearchBar component

[janmichek]

fixes https://github.com/keboola/indigo-ui/issues/240

[ujovlado]

@janmichek nespravil by si rebase? Nejako sa to tu nakopilo aj so zmenami co uz su v mastri.

[janmichek]

Rebase jsem spravil tesne nad tvym komentarem (hned po cistce stylu) nebo?

[janmichek]

Este ty snapshoty, ten comment patri sem https://github.com/keboola/kbc-ui/pull/1945#issuecomment-418153513 nicmene porad nevim jak novou komponentu zaregistrrovat aby si ji jest vsiml.

[ujovlado]

Idem sa do toho pustit.

[ujovlado]

Rebasnute, pls ak by si chcel nieco pridat, natiahni si tuto branch.

[ujovlado]

@janmichek chcem to nasadit, zaujimaju ma 2 veci:

• ovplyvnia tie csska nejako existujuci markup? (t.j. ci to nieco nerozbije ... co som narychlo pozeral tak tie custom classy v shame.less vlastne este neexistuju v kbc-ui)
• nie je nahodou v sidebar.less pridane to co sme nedavno mazali? (konkretne commit 911ce00)

Ten searchbar-actions div som nakoniec dal dnu, tak ako som ti spominal + som tam fixol par detailov.

[ujovlado]

ok, spravil som si diff ale som z toho trosku jelen. kukni to pls.

• nedavno sme mergli do mastra toto: https://github.com/keboola/indigo-ui/pull/241/commits/ce861699c77b0e1c45240ac7e9b872f2f5ad0ba4
• v tomto PR to pridavas s5 ale so zmenami: https://github.com/keboola/indigo-ui/commit/911ce0091d883e4a99a20c5cc1bc4d0679d13000

Tu je rozdiel medzi tym pridanim a potom odobranim

--- scratch_2.less  2018-09-06 11:29:20.545088129 +0200
+++ scratch_3.less  2018-09-06 11:30:40.072938739 +0200
@@ -21,41 +21,37 @@
     font-size: 16px;
     font-weight: 400;
     width: 100%;
-    button {
+    .dropdown-toggle {
       padding: 3px 2px 0;
       border: none;
       background: #22262f;
       color: @link-color !important;
-      width: 99.5%;
+      width: 100%;
       text-align: left;
       font-size: 16px;
       &:focus {
         outline: none;
         background: #22262F;
       }
-      > span {
+      > .kbc-project-name {
         display: block;
         border: solid 2px #22262f;
         border-bottom: none;
-        padding: 16px 12px;
-        > .kbc-project-name {
-          display: block;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
+        padding: 16px 32px 16px 12px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
       }
       > .icon {
-        position: relative;
-        top: 20px;
+        position: absolute;
+        top: 24px;
         right: 20px;
         @media all and (max-height: 750px) {
-          top: 12px;
+          top: 18px;
+          right: 16px;
         }
       }
-      .kbc-icon-pickerDouble {
-        float: right;
-      }
     }
     .dropdown-menu {
       background: #303541;
@@ -83,15 +79,16 @@
         &.dropdown-header {
           padding: 3px 0;
           > a, span.disabled {
+            padding: 5px 10px;
             color: #a7bac2;
             font-size: 12px;
             font-style: normal;
           }
         }
         a, span.disabled {
+          padding: 5px 10px 5px 18px;
           display: block;
           text-decoration: none;
-          padding: 5px 10px;
           font-weight: 300;
           color: #fff;
           font-size: 15px;
@@ -122,6 +119,9 @@
           font-size: 130%;
           color: #96d130;
         }
+        a {
+          padding: 5px 10px;
+        }
       }
     }
     &.open {
@@ -200,8 +200,8 @@
   .kbc-user img {
     display: none;
   }
-  .kbc-sidebar .kbc-project-select > button > span {
-    padding: 10px 12px;
+  .kbc-sidebar .kbc-project-select > .dropdown-toggle > .kbc-project-name {
+    padding: 10px 36px 10px 12px;
   }
 }
 .kbc-user-links {

[ujovlado]

Chapem to ale tak, ze by tam tie co sme odobrali proste nemali byt a v 911ce00 je chyba

[ujovlado]

Tu mam na to nachystanu opravu https://github.com/keboola/indigo-ui/commit/21f2dade6de0ce87c06049605a35ae290c92bc6c (zatial som to ale force-pushol bez toho)

[janmichek]

Ok, dostanu se k tomu a checknu to. Zatim jsem porad seklej na predani refs.

[ujovlado]

Na tie refs sa imho mozes zatial vykaslat, poriesime to potom. Ja som to stejne z tohto PR vyhodil. Chcem to dostat cim skor do libky, nech mozeme riesit kbc-ui uz s realnou komponentou.

[janmichek]

yees, refs jsem nakonec rozseknul.

[janmichek]

Ten layout jsem nakonec vyresil obalkou s temato styly. Zatim presne nevim, ale v budoucnu si to sedne lip az budu vymyslet layoutovy classy

[janmichek]

ted jdu zcheckovat prechodny reseni

[janmichek]

nie je nahodou v sidebar.less pridane to co sme nedavno mazali? (konkretne commit 911ce00)

Prave ze tam byly zmeny. Proto jsem cekal az do masteru zapadne cistka stylu a mohl jsem udelat temp reseni znovu z aktualizovanych stylu.

[janmichek]

Jinak diky za tem rebase (nejak jsem to netrefil) a taky to reseni additional actions je top. Nevedel jsem ze to jde i takhle easy

[janmichek]

jeste jsem upravil dokumentaci, lip vysvetlil to predani pole

[janmichek]

Snapshoty uz koukam fici

[janmichek]

Fajn, zchecknul jsem prechodny reseni - nove styly + stary markup. Nikde se to nerozbiji. Za me je to ready k mergnuti

[ujovlado]

Trosku mi to nedalo, takze som si to diffol:

--- scratch_1.less  2018-09-07 14:36:02.830918623 +0200
+++ scratch_2.less  2018-09-07 14:36:28.210851957 +0200
@@ -1,7 +1,8 @@
+//TEMP STYLES
 /*
  * Sidebar
  */
-
+/* stylelint-disable no-duplicate-selectors */
 .kbc-sidebar {
   background: #282d38;
   color: #fff;
@@ -68,6 +69,24 @@
       padding: 6px;
       width: 98%;

+
+
+      .kbc-search {
+        color: #7f8188;
+
+        .kbc-icon-search {
+          top: 10px;
+        }
+
+        input {
+          background: #292d38;
+          color: #FFFFFF;
+          border-color: #252933;
+          box-shadow: @box-shadow-dark;
+          margin-bottom: 12px;
+        }
+      }
+
       li {

         &.dropdown-header {
@@ -110,10 +129,6 @@
         overflow-y: scroll;
       }

-      .kbc-project-select-results {
-        margin-top: 12px;
-      }
-
       .kbc-project-select-new {
         margin: 0 -8px;
         padding: 10px 8px 0;

Staci teda pridat tie styles okolo .kbc-search ... zvysok vyhodim, je to blbost.

[ujovlado]

tak nakoniec zmeny v sidebar.less neboli potrebne ziadne ... moc nerozumiem ako mohol vzniknut taky bordel.