tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds option to display view mode options inline.

This commit is contained in:
Mateus Machado Luna 2020-01-28 16:56:45 -03:00
parent 20cb14a6a4
commit 7ab3957b2f
2 changed files with 30 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/views/theme-search/pages/theme-items-page.vue
View File

@ -232,11 +232,12 @@
</label>
<label
class="label is-hidden-widescreen"
style="margin-right: -10px;">
:style="{ marginRight: showInlineViewModeOptions ? '' : '-10px'}">
{{ $i18n.get('label_view_on') + ':&nbsp; ' }}
</label>
<b-dropdown
@change="onChangeViewMode($event)"
:inline="showInlineViewModeOptions"
:mobile-modal="true"
position="is-bottom-left"
:aria-label="$i18n.get('label_view_mode')"
@ -265,9 +266,24 @@
v-if="showFullscreenWithViewModes || (registeredViewModes[viewModeOption] != undefined && registeredViewModes[viewModeOption].full_screen == false)"
aria-role="listitem">
<span
v-if="!showInlineViewModeOptions"
class="gray-icon"
v-html="registeredViewModes[viewModeOption].icon"/>
<span>{{ registeredViewModes[viewModeOption].label }}</span>
<span
v-else
v-tooltip="{
delay: {
show: 500,
hide: 300,
},
content: registeredViewModes[viewModeOption].label,
autoHide: false,
placement: 'auto-start',
classes: ['tooltip', isRepositoryLevel ? 'repository-tooltip' : '']
}"
class="gray-icon"
v-html="registeredViewModes[viewModeOption].icon"/>
<span v-if="!showInlineViewModeOptions">{{ registeredViewModes[viewModeOption].label }}</span>
</b-dropdown-item>
</b-dropdown>
</b-field>

12
src/views/theme-search/theme-search.vue
View File

@ -95,6 +95,18 @@ export default {
.autocomplete .dropdown-trigger .button .icon {
align-items: center;
}
.dropdown.is-inline .dropdown-content {
display: flex;
border: none;
.dropdown-item {
padding: 0.125rem 0.5rem !important;
.gray-icon {
padding: 0;
}
}
}
.b-radio.radio {
input[type="radio"] + .check {