Reuse styles for filters

CartoDB · Apr 29, 2015 · 68d6652 · 68d6652
1 parent 9cbd2d0
commit 68d6652
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 76 deletions.
diff --git a/app/assets/stylesheets/new_common/change-privacy.css.scss b/app/assets/stylesheets/new_common/change-privacy.css.scss
@@ -49,66 +49,18 @@
   margin-right: 120px;
 }
 .Dialog-body.ChangePrivacy-ShareDialog-body {
-  padding-top: 20px;
+  padding-top: 0px;
 }
-.ChangePrivacy-shareSearchItem {
+.ChangePrivacy-ShareDialog-body {
   @include display-flex();
-  @include justify-content(space-between, justify);
   @include align-items(center);
-  border-bottom: 1px solid $cStructure-mainLine;
-  padding-bottom: $sMargin-element;
+  @include flex-direction(column);
+}
+.ChangePrivacy-ShareDialog-body .u-inner {
   width: 620px;
-  margin: 0 auto;
 }
-.ChangePrivacy-shareSearchList {
-  @include flex(1);
-  @include display-flex();
-  @include justify-content(flex-start, start);
-  @include align-items(center, center);
-}
-.ChangePrivacy-shareSearchListLabelItem {
-  padding-right: 20px;
-  margin-right: 20px;
-  border-right: 1px solid $cStructure-mainLine;
-}
-.ChangePrivacy-shareSearchListFormItem {
-  @include flex(1);
-}
-.ChangePrivacy-shareSearchLabel {
-  color: $cTypography-secondary;
-  font-weight: $sFontWeight-lighter;
-}
-.ChangePrivacy-shareSearchForm {
-  position: relative;
-}
-.ChangePrivacy-shareSearchInput {
-  width:100%;
-  padding-left:5px;
-  outline:none;
-  border:none;
-  background:none;
-  color: $cTypography-secondary;
-  font-size: $sFontSize-large;
-  font-weight: $sFontWeight-lighter;
-}
-.ChangePrivacy-shareCleanSearch {
-  position:absolute;
-  top:-4px;
-  right:0;
-  width:29px;
-  height:29px;
-  border-radius: 29px;
-  border:1px solid $cNavButton-default;
-  color: $cNavButton-default;
-  text-align: center;
-  line-height:31px;
-  background: transparent;
-  outline: none;
-
-  &:hover {
-    border:1px solid $cNavButton-active;
-    color: $cNavButton-active;
-  }
+.ChangePrivacy-ShareFilters{
+  border-bottom: 1px solid $cStructure-mainLine;
 }
 .ChangePrivacy-shareListItem {
   @include display-flex();
@@ -117,7 +69,6 @@
   padding-bottom: $sMargin-element;
   padding-top: $sMargin-element;
   margin: 0 auto;
-  width: 620px;
 }
 .ChangePrivacy-shareListItem:not(:nth-child(2)) {
   border-top: 1px solid $cStructure-mainLine;

diff --git a/app/assets/stylesheets/new_common/filters.css.scss b/app/assets/stylesheets/new_common/filters.css.scss
@@ -267,7 +267,10 @@ a.Filters-cleanSearch { line-height:32px }
   .Filters-orderItem,
   .Button--positive { display:none }
 
-  .Filters-searchEnabler { display:inline }
+  .Filters-searchEnabler {
+    display:inline;
+    min-width: 65px;
+  }
   .Filters-searchItem { display:inherit }
 }
 .Filters-progress {

diff --git a/lib/assets/javascripts/cartodb/new_common/dialogs/change_privacy/share_view.js b/lib/assets/javascripts/cartodb/new_common/dialogs/change_privacy/share_view.js
@@ -12,6 +12,7 @@ module.exports = cdb.core.View.extend({
 
   events: {
     'click .js-save': '_onClickSave',
+    'click .js-search-link': '_onSearchClick',
     'click .js-clean-search': '_onCleanSearchClick',
     'keydown .js-search-input': '_onKeyDown',
     'submit .js-search-form': 'killEvent'
@@ -89,6 +90,11 @@ module.exports = cdb.core.View.extend({
     $searchInput.focus().val($searchInput.val());
   },
 
+  _onSearchClick: function(e) {
+    if (e) this.killEvent(e);
+    this.$('.js-search-input').focus();
+  },
+
   _onClickSave: function(ev) {
     this.killEvent(ev);
     this._viewModel.save();

diff --git a/lib/assets/javascripts/cartodb/new_common/dialogs/change_privacy/share_view/template.jst.ejs b/lib/assets/javascripts/cartodb/new_common/dialogs/change_privacy/share_view/template.jst.ejs
@@ -1,22 +1,30 @@
-<div class="u-inner ChangePrivacy-ShareDialog-body Dialog-body Dialog-body--withoutBorder Dialog-body--expanded is-expandedWithSubFooter js-permissions">
-  <div class="ChangePrivacy-shareSearchItem">
-    <ul class="ChangePrivacy-shareSearchList">
-      <li class="ChangePrivacy-shareSearchListLabelItem">
-        <label class="ChangePrivacy-shareSearchLabel" for="searchInput">
-          <i class="Filters-searchLinkIcon iconFont iconFont-Lens"></i>Search
-        </label>
-      </li>
-      <li class="ChangePrivacy-shareSearchListFormItem">
-        <form class="ChangePrivacy-shareSearchForm js-search-form" action="#">
-          <input class="ChangePrivacy-shareSearchInput js-search-input" type="text" value="<%= q %>" id="searchInput"/>
-          <% if (q) { %>
-            <a href="#" class="ChangePrivacy-shareCleanSearch js-clean-search">
-              <i class="iconFont iconFont-Close"></i>
-            </a>
-          <% } %>
-        </form>
-      </li>
-    </ul>
+<div class="ChangePrivacy-ShareDialog-body Dialog-body Dialog-body--withoutBorder Dialog-body--expanded is-expandedWithSubFooter">
+  <div class="u-inner js-permissions">
+    <div class="ChangePrivacy-ShareFilters Filters is-relative">
+      <div class="Filters-inner search--enabled">
+        <div class="Filters-row">
+          <div class="Filters-type">
+            <ul class="Filters-list">
+              <li class="Filters-typeItem Filters-searchEnabler">
+                <a href="#/search" class="Filters-searchLink js-search-link">
+                  <i class="Filters-searchLinkIcon iconFont iconFont-Lens"></i>Search
+                </a>
+              </li>
+              <li class="Filters-typeItem Filters-searchItem">
+                <form class="Filters-searchForm js-search-form" action="#">
+                  <input class="Filters-searchInput js-search-input" type="text" value="<%= q %>" placeholder="" />
+                  <% if (q) { %>
+                    <a href="#" class="Filters-cleanSearch js-clean-search">
+                      <i class="iconFont iconFont-Close"></i>
+                    </a>
+                  <% } %>
+                </form>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>