Adds new activities SVG icon propsed by design team.

This commit is contained in:
Mateus Machado Luna 2018-06-04 14:50:25 -03:00
parent bbbe56378e
commit a190bdcc80
4 changed files with 62 additions and 17 deletions

View File

@ -69,9 +69,7 @@
tag="a" tag="a"
to="/events" to="/events"
:class="activeRoute == 'EventsPage' ? 'is-active':''"> :class="activeRoute == 'EventsPage' ? 'is-active':''">
<b-icon <activities-icon />
size="is-small"
icon="flash"/>
<span class="menu-text">{{ $i18n.get('events') }}</span> <span class="menu-text">{{ $i18n.get('events') }}</span>
</router-link> </router-link>
</li> </li>
@ -81,12 +79,16 @@
</template> </template>
<script> <script>
import ActivitiesIcon from '../other/activities-icon.vue';
export default { export default {
name: 'PrimaryMenu', name: 'PrimaryMenu',
props: { props: {
isMenuCompressed: false, isMenuCompressed: false,
activeRoute: '/collections' activeRoute: '/collections'
} },
components: {
ActivitiesIcon
},
} }
</script> </script>
@ -121,10 +123,19 @@
border-radius: 0px; border-radius: 0px;
-webkit-transition: padding 0.2s linear; /* Safari */ -webkit-transition: padding 0.2s linear; /* Safari */
transition: padding 0.2s linear; transition: padding 0.2s linear;
.activities-icon {
fill: white;
} }
}
a:hover, a.is-active { a:hover, a.is-active {
background-color: $primary; background-color: $primary;
color: $tertiary; color: $tertiary;
.activities-icon {
fill: $tertiary;
}
} }
a:focus { a:focus {
box-shadow: none; box-shadow: none;

View File

@ -83,9 +83,7 @@
:to="{ path: $routerHelper.getCollectionEventsPath(id) }" :to="{ path: $routerHelper.getCollectionEventsPath(id) }"
:class="activeRoute == 'CollectionEventsPage' ? 'is-active':''" :class="activeRoute == 'CollectionEventsPage' ? 'is-active':''"
:aria-label="$i18n.get('label_collection_events')"> :aria-label="$i18n.get('label_collection_events')">
<b-icon <activities-icon />
size="is-small"
icon="flash"/>
<br> <br>
<span class="menu-text">{{ $i18n.get('events') }}</span> <span class="menu-text">{{ $i18n.get('events') }}</span>
</router-link> </router-link>
@ -97,6 +95,7 @@
<script> <script>
import { mapActions, mapGetters } from 'vuex'; import { mapActions, mapGetters } from 'vuex';
import ActivitiesIcon from '../other/activities-icon.vue';
export default { export default {
name: 'TainacanSubheader', name: 'TainacanSubheader',
@ -109,6 +108,9 @@ export default {
activeRouteName: '', activeRouteName: '',
} }
}, },
components: {
ActivitiesIcon
},
props: { props: {
id: Number, id: Number,
}, },

View File

@ -0,0 +1,32 @@
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
x="0px"
y="0px"
width="20"
height="20"
viewBox="0 0 24 24"
class="activities-icon"
xml:space="preserve">
<path
d="M20,11c0,1-0.2,2.1-0.5,3h-2.2c0.4-0.9,0.7-1.9,0.7-3c0-3.9-3.1-7-7-7s-7,3.1-7,7c0,3.5,2.6,6.5,6,6.9v2
c-4.5-0.5-8-4.3-8-8.9c0-5,4-9,9-9S20,6,20,11z M14,22h-2v-2h2V22z M14,18h-2v-2h2V18z M22,22h-6v-2h6V22z M22,18h-6v-2h6V18z M12,6
h-2l0,6l2.7,2H16l-4-3V6z"/>
</svg>
</template>
<script>
export default {
name: 'ActivitiesIcon'
}
</script>
<style type="text/scss">
svg.activities-icon {
margin-bottom: -5px;
fill:#1E2F56;
}
</style>

View File

@ -241,8 +241,8 @@
</div> </div>
<!-- ADVANCED SEARCH --> <!-- ADVANCED SEARCH
<advanced-search /> <advanced-search /> -->
<!-- --------------- --> <!-- --------------- -->
@ -332,7 +332,7 @@
import ItemsList from '../../components/lists/items-list.vue'; import ItemsList from '../../components/lists/items-list.vue';
import FiltersItemsList from '../../components/search/filters-items-list.vue'; import FiltersItemsList from '../../components/search/filters-items-list.vue';
import Pagination from '../../components/search/pagination.vue' import Pagination from '../../components/search/pagination.vue'
import AdvancedSearch from '../../components/advanced-search/advanced-search.vue'; // import AdvancedSearch from '../../components/advanced-search/advanced-search.vue';
import { mapActions, mapGetters } from 'vuex'; import { mapActions, mapGetters } from 'vuex';
export default { export default {
@ -396,7 +396,7 @@
ItemsList, ItemsList,
FiltersItemsList, FiltersItemsList,
Pagination, Pagination,
AdvancedSearch, // AdvancedSearch,
}, },
watch: { watch: {
tableFields() { tableFields() {