search input styling and clear input

OSU-Sustainability-Office · Sep 14, 2023 · da0d1b2 · da0d1b2
1 parent 5484c39
commit da0d1b2
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git a/src/components/building_list/building_list.vue b/src/components/building_list/building_list.vue
@@ -7,8 +7,14 @@
  <el-col :span="24" class="top_col">
  <el-row class="search_row">
  <el-col :span="24" class="search_col">
- <el-input v-model="search">
- <i class="el-icon-search el-input__icon" slot="prefix"></i>
+ <el-input v-model="search" class="searchInput" placeholder="Search for buildings">
+ <i class="el-icon-search el-input__icon" slot="prefix"></i
+ ><i
+ class="el-icon-close el-input__icon"
+ slot="suffix"
+ @click="resetSearchInput()"
+ v-if="this.search != ''"
+ ></i>
  </el-input>
  </el-col>
  </el-row>
@@ -177,6 +183,9 @@ export default {
  this.$store.dispatch( 'modalController/openModal', {
  name: 'edit_view'
  } )
+ },
+ resetSearchInput () {
+ this.search = ''
  }
  }
 }
@@ -248,4 +257,10 @@ export default {
  width: 100%;
  text-align: center;
 }
+.el-icon-close {
+ cursor: pointer;
+}
+::v-deep .el-input__icon {
+ color: #d73f09;
+}
 </style>
diff --git a/src/components/map/map.vue b/src/components/map/map.vue
@@ -21,6 +21,12 @@
  </div>
  <el-input v-model="search" class="searchMapInput" placeholder="Search for buildings">
  <i class="el-icon-search el-input__icon" slot="prefix"></i>
+ <i
+ class="el-icon-close el-input__icon"
+ slot="suffix"
+ @click="resetSearchInput()"
+ v-if="this.search != ''"
+ ></i>
  </el-input>
  <switchButtons :titles="['Category', 'Energy Trend']" v-model="grouping" />
  <el-menu-item-group v-if="grouping === 'Category'">
@@ -301,6 +307,9 @@ export default {
  .bindTooltip( searchResult.feature.properties.name, { permanent: true, fillColor: '#000', color: '#000' } )
  .openTooltip()
  },
+ resetSearchInput () {
+ this.search = ''
+ },
  removeAllMarkers: function () {
  for ( let marker of this.compareMarkers ) {
  this.map.removeLayer( marker )
@@ -814,7 +823,9 @@ $sideMenu-width: 250px;
  opacity: 1;
  justify-content: center;
  z-index: 500;
- cursor: pointer;
+}
+::v-deep .el-input__icon {
+ color: #d73f09;
 }
 ::v-deep .el-input__inner {
  font-size: 16px;
@@ -842,6 +853,9 @@ $sideMenu-width: 250px;
  font-size: 16px;
  margin-bottom: -15px;
 }
+.el-icon-close {
+ cursor: pointer;
+}
 .searchResultDiv {
  margin-top: 10px;
  margin-bottom: 10px;