Skip to content

Minor adjustments #495

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 5 commits into from
Jan 14, 2018
Merged

Minor adjustments #495

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
60e72d2
Minor adjustments
anteriovieira Jan 13, 2018
115c2b7
Style + tooltip tweaks
Jan 14, 2018
c2ced87
Remove title pointer
Jan 14, 2018
0bf608f
Hide button if no file
Jan 14, 2018
df5b22a
Remove unecessary if
Jan 14, 2018
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
5 changes: 5 additions & 0 deletions src/devtools/global.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,11 @@ $arrow-color = #444
.mono
font-family Menlo, Consolas, monospace

.green
&,
.material-icons
color $green

.input-example
background $white
color $green
Expand Down
33 changes: 23 additions & 10 deletions src/devtools/views/components/ComponentInspector.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,33 @@
<template>
<scroll-pane>
<action-header v-show="hasTarget" slot="header">
<span class="title" @click="onTitleClick">
<span class="title">
<span class="title-bracket">&lt;</span>
<span v-tooltip="titleTooltip">{{ targetName }}</span>
<span>{{ targetName }}</span>
<span class="title-bracket">&gt;</span>
</span>
<a v-if="$isChrome" class="button inspect" @click="inspectDOM" v-tooltip="'Inspect DOM'">
<i class="material-icons">find_in_page</i>
<span>Inspect DOM</span>
</a>
<div class="search">
<i class="material-icons">search</i>
<input placeholder="Filter inspected data" v-model.trim="filter">
</div>
<a
v-if="$isChrome"
class="button inspect"
v-tooltip="'Inspect DOM'"
@click="inspectDOM"
>
<i class="material-icons">code</i>
<span>Inspect DOM</span>
</a>
<a
v-if="target.file"
Copy link
Contributor Author

@anteriovieira anteriovieira Jan 14, 2018 •
edited
Loading

Choose a reason for hiding this comment

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

@Akryum in this case could remove condition if in theopenInEditor function.

class="button"
v-tooltip="openEditorTooltip"
@click="openInEditor"
>
<i class="material-icons">launch</i>
<span>Open in editor</span>
</a>
</action-header>
<template slot="scroll">
<section v-if="!hasTarget" class="notice">
Expand Down Expand Up @@ -68,8 +82,8 @@ export default {
}, this.filter)
})), 'type')
},
titleTooltip () {
return this.target.file && `Open <i class="material-icons">insert_drive_file</i> <span class="mono">${this.target.file}</span>`
openEditorTooltip () {
return this.target.file && `Open <span class="mono green"><i class="material-icons">insert_drive_file</i>${this.target.file}</span> in editor`
}
},
methods: {
Expand All @@ -83,7 +97,7 @@ export default {
window.alert('DOM inspection is not supported in this shell.')
}
},
onTitleClick () {
openInEditor () {
const file = this.target.file
if (file) {
const src = `fetch('/__open-in-editor?file=${file}').then(response => {
Expand Down Expand Up @@ -113,7 +127,6 @@ export default {

<style lang="stylus" scoped>
.title
cursor pointer
white-space nowrap
</style>