Skip to content

Change layout depending on available space #454

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Jan 12, 2018
Merged

Change layout depending on available space #454

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2d7daed
Allow the user to change layout of panels.
Nov 12, 2017
719aeca
use media query instead of button
Dec 29, 2017
4663bae
remove extras
Dec 29, 2017
72e3f44
remove dangling comma
Dec 29, 2017
dfb7962
remove unused class, make refresh regular button
Dec 29, 2017
bae80d9
Support dragging in horizontal mode
Dec 30, 2017
dbeafb3
Fix missing Refresh label
Dec 30, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 20 additions & 2 deletions src/devtools/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,10 @@
<span class="pane-name">Events</span>
<span class="event-count" v-if="newEventCount > 0">{{ newEventCount }}</span>
</a>
<a class="button refresh"
<a class="button refresh icon-only"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why setting icon only here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed the button that toggles the layout and that had it as well. I can change this to a specific class and remove this more utilitarian class.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I mean, we can make the Refresh button normal (by removing this class) now that you removed the other icon.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All right. It's been removed along with the extra class.

@click="refresh"
title="Force Refresh">
<i class="material-icons" ref="refresh">refresh</i>
<span class="pane-name">Refresh</span>
</a>
<span class="active-bar"></span>
</div>
Expand Down Expand Up @@ -67,6 +66,7 @@ export default {
computed: mapState({
message: state => state.message,
tab: state => state.tab,
view: state => state.view,
newEventCount: state => state.events.newEventCount
}),
methods: {
Expand All @@ -86,6 +86,12 @@ export default {
refreshIcon.style.animation = 'rotate 1s'
})
},
switchView (mediaQueryEvent) {
this.$store.commit(
'SWITCH_VIEW',
mediaQueryEvent.matches ? 'vertical' : 'horizontal'
)
},
updateActiveBar () {
const activeButton = this.$el.querySelector('.button.active')
const activeBar = this.$el.querySelector('.active-bar')
Expand All @@ -94,11 +100,16 @@ export default {
}
},
mounted () {
this.mediaQuery = window.matchMedia('(min-width: 685px)')
this.switchView(this.mediaQuery)
this.mediaQuery.addListener(this.switchView)

this.updateActiveBar()
window.addEventListener('resize', this.updateActiveBar)
},
destroyed () {
window.removeEventListener('resize', this.updateActiveBar)
this.mediaQuery.removeListener(this.switchView)
},
watch: {
tab () {
Expand Down Expand Up @@ -141,6 +152,10 @@ export default {
.message-container
height 1em
cursor default
display none
@media (min-width: $wide - 300px)
display block


.message
color $active-color
Expand All @@ -160,6 +175,9 @@ export default {
.app.dark &
background-color $dark-background-color

&.icon-only
padding 0 5px

&:hover
color #555

Expand Down
56 changes: 47 additions & 9 deletions src/devtools/components/SplitPane.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,48 @@
@mousemove="dragMove"
@mouseup="dragEnd"
@mouseleave="dragEnd"
:class="{ dragging: dragging }">
<div class="left" :style="{ width: split + '%' }">
:class="classes">
<div class="left top" :style="leftStyles">
<slot name="left"></slot>
<div class="dragger" @mousedown.prevent="dragStart">
</div>
<div class="dragger" @mousedown.prevent="dragStart"></div>
</div>
<div class="right" :style="{ width: (100 - split) + '%' }">
<div class="right bottom" :style="rightStyles">
<slot name="right"></slot>
</div>
</div>
</template>

<script>
import { mapState } from 'vuex'

export default {
data () {
return {
split: 50,
dragging: false
}
},
computed: {
...mapState([
'view'
]),
leftStyles () {
return this.view === 'vertical'
? { width: `${this.split}%` }
: 'auto'
},
rightStyles () {
return this.view === 'vertical'
? { width: `${100 - this.split}%` }
: 'auto'
},
classes () {
return [
{ dragging: this.dragging },
this.view
]
}
},
methods: {
dragStart (e) {
this.dragging = true
Expand All @@ -49,16 +71,32 @@ export default {
.split-pane
display flex
height 100%
&.horizontal
flex-direction column
.top, .bottom
height 50%

&.dragging
cursor ew-resize

.left, .right
position relative

.left
border-right 1px solid $border-color
.app.dark &
border-right 1px solid $dark-border-color
&.horizontal
.dragger
pointer-events none

.bottom
box-shadow 0 -2px 10px rgba(0, 0, 0, 0.1)
border-top 1px solid $border-color
.app.dark &
border-top 1px solid $dark-border-color

&.vertical
.left
border-right 1px solid $border-color
.app.dark &
border-right 1px solid $dark-border-color

.dragger
position absolute
Expand Down
6 changes: 5 additions & 1 deletion src/devtools/store/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ Vue.use(Vuex)
const store = new Vuex.Store({
state: {
message: '',
tab: 'components'
tab: 'components',
view: 'vertical'
},
mutations: {
SHOW_MESSAGE (state, message) {
Expand All @@ -18,6 +19,9 @@ const store = new Vuex.Store({
SWITCH_TAB (state, tab) {
state.tab = tab
},
SWITCH_VIEW (state, view) {
state.view = view
},
RECEIVE_INSTANCE_DETAILS (state, instance) {
state.message = 'Instance selected: ' + instance.name
}
Expand Down
1 change: 0 additions & 1 deletion src/devtools/views/components/ComponentInstance.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,6 @@ export default {
position relative
overflow hidden
z-index 2
background-color $background-color
transition background-color .1s ease
border-radius 3px
font-size 14px
Expand Down