Skip to content

Commit

Permalink
fix: switch to ext-components
Browse files Browse the repository at this point in the history 
Update dependencies and redo action popup layout
  • Loading branch information
dessant committed Jan 2, 2018
1 parent 41f5992 commit df65bac
Show file tree
Hide file tree
Showing 11 changed files with 1,796 additions and 676 deletions.
68 changes: 34 additions & 34 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,66 +17,66 @@
"exec": "yarn run build && yarn run start",
"exec:prod": "yarn run build:prod && yarn run start",
"zip": "web-ext build -s dist/ -a artifacts/",
"start":
"web-ext run --bc --url 'about:debugging' --url 'about:addons' -s dist/",
"inspect":
"webpack --profile --json > report.json; webpack-bundle-analyzer report.json --mode static && sleep 6 && rm report.{json,html}",
"start": "web-ext run --bc --url 'about:debugging' --url 'about:addons' -s dist/",
"inspect": "webpack --profile --json > report.json; webpack-bundle-analyzer report.json --mode static && sleep 6 && rm report.{json,html}",
"update": "ncu --upgrade --upgradeAll && yarn",
"push": "git push --follow-tags origin master",
"release": "standard-version && yarn run push"
},
"browserslist": ["Chrome >= 55", "Firefox >= 53", "Opera >= 42"],
"browserslist": [
"Chrome >= 55",
"Firefox >= 53",
"Opera >= 42"
],
"dependencies": {
"@material/checkbox": "^0.4.7",
"@material/form-field": "^0.2.16",
"@material/list": "^0.2.19",
"@material/menu": "^0.4.7",
"@material/ripple": "^0.8.7",
"@material/select": "^0.3.17",
"@material/switch": "^0.1.14",
"@material/theme": "^0.3.1",
"@material/list": "^0.27.0",
"@material/ripple": "^0.27.0",
"@material/theme": "^0.27.0",
"@material/typography": "^0.3.0",
"ext-components": "dessant/ext-components#^0.1.1",
"lodash": "^4.17.4",
"storage-versions": "dessant/storage-versions#^0.1.1",
"vue": "^2.4.4",
"vuedraggable": "^2.14.1",
"webextension-polyfill": "^0.1.1"
"vue": "^2.5.13",
"vue-resize": "^0.4.3",
"vuedraggable": "^2.16.0",
"webextension-polyfill": "^0.2.1"
},
"devDependencies": {
"autoprefixer": "^7.1.4",
"autoprefixer": "^7.2.4",
"babel-loader": "^7.1.2",
"babel-minify-webpack-plugin": "^0.2.0",
"babel-plugin-lodash": "^3.2.11",
"babel-preset-env": "^1.6.0",
"babel-plugin-lodash": "^3.3.2",
"babel-preset-env": "^1.6.1",
"babel-preset-minify": "^0.2.0",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.7",
"cssnano": "^3.10.0",
"del": "^3.0.0",
"extract-text-webpack-plugin": "^3.0.0",
"fs-extra": "^4.0.2",
"extract-text-webpack-plugin": "^3.0.2",
"fs-extra": "^5.0.0",
"gulp": "^3.9.1",
"gulp-babel": "^7.0.0",
"gulp-htmlmin": "^3.0.0",
"gulp-htmlmin": "^4.0.0",
"gulp-if": "^2.0.2",
"gulp-imagemin": "^3.3.0",
"gulp-imagemin": "^4.1.0",
"gulp-jsonmin": "^1.1.0",
"gulp-merge-json": "^1.2.0",
"gulp-postcss": "^7.0.0",
"gulp-sequence": "^0.4.6",
"gulp-merge-json": "^1.2.1",
"gulp-postcss": "^7.0.1",
"gulp-sequence": "^1.0.0",
"gulp-svgmin": "^1.2.4",
"lodash-webpack-plugin": "^0.11.4",
"node-sass": "^4.5.3",
"npm-check-updates": "^2.12.1",
"node-sass": "^4.7.2",
"npm-check-updates": "^2.14.0",
"recursive-readdir": "^2.2.1",
"sass-loader": "^6.0.6",
"standard-version": "^4.2.0",
"svg2png": "^4.1.1",
"typeface-roboto": "^0.0.35",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"web-ext": "^2.0.0",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0"
"typeface-roboto": "^0.0.45",
"vue-loader": "^13.6.2",
"vue-template-compiler": "^2.5.13",
"web-ext": "^2.2.2",
"webpack": "^3.10.0",
"webpack-bundle-analyzer": "^2.9.1"
},
"private": true
}
164 changes: 119 additions & 45 deletions src/action/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,65 +4,72 @@
<div class="title">
{{ getText('extensionName') }}
</div>
<img class="settings-icon" src="/src/icons/misc/settings.svg"
@click="showSettings = !showSettings"/>
<div class="header-buttons">
<img class="settings-icon" src="/src/icons/misc/settings.svg"
@click="showSettings = !showSettings"/>
</div>
</div>

<transition name="settings">
<transition name="settings"
@after-enter="handleSizeChange"
@after-leave="handleSizeChange">
<div class="settings" v-if="showSettings">
<v-select v-model="clearSince" :options="selectOptions.clearSinceAction">
</v-select>
</div>
</transition>

<ul class="mdc-list">
<li class="mdc-list-item ripple-surface"
v-if="clearAllDataTypes"
<div class="list-padding-top"></div>
<ul class="mdc-list list list-bulk-button" v-if="clearAllDataTypes">
<li class="mdc-list-item list-item ripple-surface"
@click="selectItem('allDataTypes')">
<img class="mdc-list-item__start-detail"
<img class="mdc-list-item__start-detail list-item-icon"
src="/src/icons/dataTypes/allDataTypes.svg">
{{ getText('menuItemTitle_allDataTypes') }}
</li>
<li role="separator" class="mdc-list-divider"
v-if="clearAllDataTypes || dataTypes.length > 8">
</li>
<div class="items-wrap">
<div class="items">
<li class="mdc-list-item ripple-surface"
v-for="dataType in dataTypes"
:key="dataType.id"
@click="selectItem(dataType)">
<img class="mdc-list-item__start-detail"
:src="`/src/icons/dataTypes/${dataType}.svg`">
{{ getText(`menuItemTitle_${dataType}`) }}
</li>
</div>
</div>
</ul>
<ul class="mdc-list list list-separator"
v-if="clearAllDataTypes || hasScrollBar">
<li role="separator" class="mdc-list-divider"></li>
</ul>
<div class="list-items-wrap" ref="items" :class="listClasses">
<resize-observer @notify="handleSizeChange"></resize-observer>
<ul class="mdc-list list list-items">
<li class="mdc-list-item list-item ripple-surface"
v-for="dataType in dataTypes"
:key="dataType.id"
@click="selectItem(dataType)">
<img class="mdc-list-item__start-detail list-item-icon"
:src="`/src/icons/dataTypes/${dataType}.svg`">
{{ getText(`menuItemTitle_${dataType}`) }}
</li>
</ul>
</div>
</div>
</template>

<script>
import browser from 'webextension-polyfill';
import {ResizeObserver} from 'vue-resize';
import {Select} from 'ext-components';
import storage from 'storage/storage';
import {getEnabledDataTypes, getSelectOptionLabels} from 'utils/app';
import {getEnabledDataTypes, getOptionLabels} from 'utils/app';
import {getText} from 'utils/common';
import {optionKeys} from 'utils/data';
import Select from 'components/Select';
export default {
components: {
[Select.name]: Select
[Select.name]: Select,
[ResizeObserver.name]: ResizeObserver
},
data: function() {
return {
dataLoaded: false,
showSettings: false,
selectOptions: getSelectOptionLabels({
selectOptions: getOptionLabels({
clearSinceAction: [
'1hour',
'3hours',
Expand All @@ -72,13 +79,23 @@ export default {
'epoch'
]
}),
hasScrollBar: false,
isPopup: false,
dataTypes: [],
clearAllDataTypes: false,
clearSince: ''
};
},
computed: {
listClasses: function() {
return {
'list-items-max-height': this.isPopup
};
}
},
methods: {
getText: getText,
Expand All @@ -87,11 +104,32 @@ export default {
id: 'actionPopupSubmit',
item
});
window.close();
this.closeAction();
},
closeAction: async function() {
if (!this.isPopup) {
browser.tabs.remove((await browser.tabs.getCurrent()).id);
} else {
window.close();
}
},
handleSizeChange: function() {
const items = this.$refs.items;
this.hasScrollBar = items.scrollHeight > items.clientHeight;
}
},
created: async function() {
const currentTab = await browser.tabs.getCurrent();
this.isPopup = !currentTab || currentTab instanceof Array;
if (!this.isPopup) {
document.documentElement.style.height = '100%';
document.body.style.minWidth = 'initial';
}
const options = await storage.get(optionKeys, 'sync');
const enDataTypes = await getEnabledDataTypes(options);
Expand All @@ -116,29 +154,50 @@ $mdc-theme-primary: #1abc9c;
@import '@material/typography/mixins';
@import "@material/ripple/mixins";
@import 'vue-resize/dist/vue-resize';
body,
#app {
height: 100%;
}
#app {
display: flex;
flex-direction: column;
}
body {
margin: 0;
min-width: 300px;
min-height: 362px;
min-width: 413px;
overflow: hidden;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
white-space: nowrap;
padding-top: 16px;
padding-left: 16px;
padding-right: 16px;
}
.title {
padding-right: 48px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@include mdc-typography('title');
@include mdc-theme-prop('color', 'text-primary-on-light');
}
.header-buttons {
display: flex;
align-items: center;
margin-left: 32px;
@media (min-width: 413px) {
margin-left: 56px;
}
}
.settings-icon {
cursor: pointer;
}
Expand All @@ -164,36 +223,51 @@ body {
opacity: 0;
}
.items-wrap {
max-height: 392px;
overflow-y: auto;
.list {
padding: 0 !important;
}
.items {
.list-padding-top {
margin-bottom: 8px;
}
.mdc-list {
padding-left: 0 !important;
padding-right: 0 !important;
.list-bulk-button {
height: 48px;
}
.mdc-list-item {
.list-separator {
height: 1px;
}
.list-items-wrap {
overflow-y: auto;
}
.list-items-max-height {
max-height: 392px;
}
.list-items {
padding-bottom: 8px !important;
}
.list-item {
padding-left: 16px;
padding-right: 48px;
white-space: nowrap;
cursor: pointer;
}
.mdc-list-item__start-detail {
.list-item-icon {
margin-right: 16px !important;
}
.ripple-surface {
@include mdc-ripple-base;
@include mdc-ripple-bg((pseudo: "::before"));
@include mdc-ripple-fg((pseudo: "::after"));
@include mdc-ripple-surface;
@include mdc-states;
@include mdc-ripple-radius;
position: sticky;
outline: none;
overflow: hidden;
}
</style>
Loading

0 comments on commit df65bac

Please sign in to comment.