michael/enrecipes
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

new appbar

Browse source
This commit is contained in:
vishnuraghavb 2021-03-23 15:29:00 +05:30
parent 12cd254616
commit 9dc8270709
10 changed files with 140 additions and 173 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

104
app/app.scss
View file

@ -54,7 +54,6 @@ Page {
ActionBar, ActionBar,
ListPicker, ListPicker,
Page, Page,
SearchBar,
TabStripItem, TabStripItem,
Tabs { Tabs {
color: $gray9; color: $gray9;
@ -107,7 +106,7 @@ Page {
MDProgress { MDProgress {
progress-background-color: $gray4; progress-background-color: $gray4;
} }
MDFloatingActionButton { .fab {
color: $gray0; color: $gray0;
} }
.emptyState .icon { .emptyState .icon {
@ -119,7 +118,6 @@ Page {
ActionBar, ActionBar,
ListPicker, ListPicker,
Page, Page,
SearchBar,
TabStripItem, TabStripItem,
Tabs { Tabs {
color: $gray2; color: $gray2;
@ -172,7 +170,7 @@ Page {
MDProgress { MDProgress {
progress-background-color: $gray5; progress-background-color: $gray5;
} }
MDFloatingActionButton { .fab {
color: $gray9; color: $gray9;
} }
.emptyState .icon { .emptyState .icon {
@ -198,10 +196,9 @@ TextView {
ListPicker { ListPicker {
width: 25%; width: 25%;
} }
SearchBar { TextField.searchBar {
font-family: "Inter-Regular"; margin: 0;
font-size: 14; border-color: transparent;
text-field-hint-color: $gray5;
} }
TabView { TabView {
tab-text-color: $gray5; tab-text-color: $gray5;
@ -237,27 +234,6 @@ Switch {
off-background-color: $gray5; off-background-color: $gray5;
} }
// ----------------------------- // -----------------------------
// ActionBar
ActionBar {
height: 64;
margin: 0;
padding: 0 8;
GridLayout {
padding: 0;
margin: 0;
}
MDButton.er {
padding: 0;
margin: 0;
}
.title {
@extend .tb;
padding: 0 0 0 12;
text-align: left;
font-size: 18;
}
}
// -----------------------------
// Side Drawer // Side Drawer
.sd { .sd {
padding: 8 0; padding: 8 0;
@ -675,18 +651,41 @@ CollectionView {
} }
} }
// ----------------------------- // -----------------------------
// FAB // APPBAR
#btnFabContainer { .appbar {
z-index: 100; z-index: 99;
width: 100%;
height: 100%;
}
MDFloatingActionButton {
width: 56;
height: 56; height: 56;
margin: 16; margin: 8;
background: $orange; padding: 0;
ripple-color: $fabRipple; border-radius: 99;
background: $gray0;
elevation: 16;
android-elevation: 16;
GridLayout {
padding: 0;
margin: 0;
}
.er {
padding: 0;
margin: 4 4 4 0;
&.menu {
margin: 4;
}
}
.fab {
width: 56;
height: 56;
margin: 0;
background: $orange;
ripple-color: $fabRipple;
}
.title {
@extend .tb;
padding: 0 0 0 8;
text-align: left;
vertical-align: center;
font-size: 18;
}
} }
// ----------------------------- // -----------------------------
// EDIT RECIPE // EDIT RECIPE
@ -877,9 +876,8 @@ MDActivityIndicator {
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
} }
.bounce-leave-active { .bounce-leave-active {
animation-name: bounce-out; transform: scale(0);
animation-duration: 0.25s; opacity: 0;
animation-fill-mode: forwards;
} }
@keyframes bounce-in { @keyframes bounce-in {
0% { 0% {
@ -887,25 +885,13 @@ MDActivityIndicator {
opacity: 0; opacity: 0;
} }
25% { 25% {
transform: scale(1.2); transform: scale(1);
opacity: 1; opacity: 1;
} }
50% { 55% {
transform: scale(0.9); transform: scale(0.8);
} }
75% { 80% {
transform: scale(1.1);
}
100% {
transform: scale(1); transform: scale(1);
} }
} }
@keyframes bounce-out {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
opacity: 0;
}
}

2
app/components/App.vue
View file

@ -7,7 +7,7 @@
<Drawer <Drawer
@loaded="drawerLoad" @loaded="drawerLoad"
:gestureEnabled="gestures" :gestureEnabled="gestures"
leftSwipeDistance="128" leftSwipeDistance="32"
> >
<GridLayout ~leftDrawer rows="*, auto" columns="*" width="280" class="sd"> <GridLayout ~leftDrawer rows="*, auto" columns="*" width="280" class="sd">
<StackLayout row="0"> <StackLayout row="0">

4
app/components/EditRecipe.vue
View file

@ -46,7 +46,7 @@
:text="icon.img" :text="icon.img"
/> />
</StackLayout> </StackLayout>
<transition :name="recipeContent.imageSrc ? 'null' : 'bounce'"> <!-- <transition :name="recipeContent.imageSrc ? 'null' : 'bounce'">
<MDFloatingActionButton <MDFloatingActionButton
v-if="showFab" v-if="showFab"
:top="screenWidth - 44" :top="screenWidth - 44"
@ -55,7 +55,7 @@
src="res://cam" src="res://cam"
@tap="imageHandler" @tap="imageHandler"
/> />
</transition> </transition> -->
</AbsoluteLayout> </AbsoluteLayout>
<StackLayout margin="0 16 24"> <StackLayout margin="0 16 24">
<StackLayout class="inputField"> <StackLayout class="inputField">

170
app/components/EnRecipes.vue
View file

@ -1,66 +1,8 @@
<template> <template>
<Page @loaded="onPageLoad" @unloaded="onPageUnload"> <Page @loaded="onPageLoad" @unloaded="onPageUnload" actionBarHidden="true">
<ActionBar flat="true"> <GridLayout rows="*, auto" columns="*">
<GridLayout
v-if="showSearch"
columns="auto, *"
verticalAlignment="center"
>
<MDButton
class="er"
:text="icon.back"
variant="text"
automationText="Back"
col="0"
@tap="closeSearch"
/>
<SearchBar
col="1"
:hint="'ser' | L"
@textChange="updateList($event.value)"
@clear="clearSearch"
/>
</GridLayout>
<GridLayout v-else columns="auto, *, auto, auto">
<MDButton
class="er"
col="0"
variant="text"
@tap="selectMode ? clearSelection() : showDrawer()"
:text="selectMode ? icon.x : icon.menu"
/>
<Label
v-if="selectMode"
class="title tb"
:text="`${selection.length} ${$options.filters.L('sltd')}`"
col="1"
/>
<Label
v-else
class="title tb"
:text="`${currentComponent}` | L"
col="1"
/>
<MDButton
v-if="recipes.length && !selectMode"
class="er"
:text="selectMode ? icon.export : icon.sear"
variant="text"
col="2"
@tap="selectMode ? exportSelection() : openSearch()"
/>
<MDButton
v-if="recipes.length"
class="er"
:text="selectMode ? icon.del : icon.sort"
variant="text"
col="3"
@tap="selectMode ? deleteSelection() : sortDialog()"
/>
</GridLayout>
</ActionBar>
<AbsoluteLayout>
<CollectionView <CollectionView
rowSpan="2"
width="100%" width="100%"
height="100%" height="100%"
for="recipe in filteredRecipes" for="recipe in filteredRecipes"
@ -68,9 +10,11 @@
:itemTemplateSelector="getLayout" :itemTemplateSelector="getLayout"
:colWidth="layout == 'grid' ? '50%' : '100%'" :colWidth="layout == 'grid' ? '50%' : '100%'"
> >
<v-template name="header">
<StackLayout> <Label text="Title" textWrap="true" /> </StackLayout>
</v-template>
<v-template name="detailed"> <v-template name="detailed">
<GridLayout class="recipeContainer" :class="getItemPos(recipe.id)"> <GridLayout class="recipeContainer" :class="getItemPos(recipe.id)">
<!-- elevation="1" -->
<GridLayout <GridLayout
class="recipeItem layout1 mdr" class="recipeItem layout1 mdr"
rows="96" rows="96"
@ -154,7 +98,6 @@
</v-template> </v-template>
<v-template name="simple"> <v-template name="simple">
<GridLayout class="recipeContainer" :class="getItemPos(recipe.id)"> <GridLayout class="recipeContainer" :class="getItemPos(recipe.id)">
<!-- elevation="1" -->
<GridLayout <GridLayout
class="recipeItem layout1 layout2 mdr" class="recipeItem layout1 layout2 mdr"
rows="auto" rows="auto"
@ -187,7 +130,6 @@
<Label <Label
v-for="(tag, index) in recipe.tags" v-for="(tag, index) in recipe.tags"
:key="index" :key="index"
v-if="tag"
class="tag" class="tag"
:text="tag" :text="tag"
/> />
@ -198,7 +140,6 @@
</v-template> </v-template>
<v-template name="grid"> <v-template name="grid">
<GridLayout class="recipeContainer" :class="getItemPos(recipe.id)"> <GridLayout class="recipeContainer" :class="getItemPos(recipe.id)">
<!-- elevation="1" -->
<GridLayout <GridLayout
class="recipeItem layout3 mdr" class="recipeItem layout3 mdr"
rows="auto, auto" rows="auto, auto"
@ -252,7 +193,6 @@
<Label <Label
v-for="(tag, index) in recipe.tags" v-for="(tag, index) in recipe.tags"
:key="index" :key="index"
v-if="tag"
class="tag" class="tag"
:text="tag" :text="tag"
/> />
@ -262,7 +202,12 @@
</GridLayout> </GridLayout>
</v-template> </v-template>
</CollectionView> </CollectionView>
<GridLayout rows="*, auto, *, 88" columns="*" class="emptyStateContainer"> <GridLayout
rowSpan="2"
rows="*, auto, *, 88"
columns="*"
class="emptyStateContainer"
>
<StackLayout <StackLayout
row="1" row="1"
class="emptyState" class="emptyState"
@ -313,19 +258,76 @@
/> />
</StackLayout> </StackLayout>
</GridLayout> </GridLayout>
<GridLayout id="btnFabContainer" rows="*, auto" columns="*, auto"> <GridLayout
row="1"
class="appbar"
rows="auto"
columns="auto, *, auto, auto, auto"
>
<MDButton
class="er menu"
variant="text"
@tap="
showSearch
? closeSearch()
: selectMode
? clearSelection()
: showDrawer()
"
:text="showSearch ? icon.back : selectMode ? icon.x : icon.menu"
/>
<TextField
class="searchBar"
@loaded="focusField"
v-if="showSearch"
col="1"
colSpan="4"
:hint="'ser' | L"
@textChange="updateList($event.value)"
/>
<Label
v-if="selectMode"
class="title tb"
:text="`${selection.length} ${$options.filters.L('sltd')}`"
col="1"
/>
<MDButton
v-if="recipes.length && !selectMode && !showSearch"
class="er"
:text="selectMode ? icon.export : icon.sear"
variant="text"
col="2"
@tap="selectMode ? exportSelection() : openSearch()"
/>
<MDButton
v-if="recipes.length && !showSearch && !selectMode"
class="er"
:text="icon.sort"
variant="text"
col="3"
@tap="sortDialog()"
/>
<transition name="bounce"> <transition name="bounce">
<MDFloatingActionButton <MDButton
v-if="showFAB" v-if="showFAB"
row="1" class="er fab"
col="1" :text="icon.plus"
class="er fab-button" variant="text"
src="res://plus"
@tap="addRecipe" col="4"
@tap="showFAB && addRecipe()"
/> />
</transition> </transition>
<MDButton
v-if="selectMode"
class="er"
:text="icon.del"
variant="text"
col="4"
@tap="deleteSelection()"
/>
</GridLayout> </GridLayout>
</AbsoluteLayout> </GridLayout>
</Page> </Page>
</template> </template>
<script> <script>
@ -376,6 +378,7 @@ export default {
return { return {
searchQuery: "", searchQuery: "",
showSearch: false, showSearch: false,
searchBar: null,
rightAction: false, rightAction: false,
deletionDialogActive: false, deletionDialogActive: false,
showFAB: false, showFAB: false,
@ -508,28 +511,31 @@ export default {
// HELPERS // HELPERS
openSearch() { openSearch() {
this.showSearch = true;
this.showFAB = false; this.showFAB = false;
this.showSearch = true;
this.hijackLocalBackEvent(); this.hijackLocalBackEvent();
}, },
focusField(args) {
setTimeout((e) => {
args.object.focus();
setTimeout((e) => Utils.ad.showSoftInput(args.object.android), 100);
}, 100);
},
closeSearch() { closeSearch() {
this.showFAB = true;
this.searchQuery = ""; this.searchQuery = "";
Utils.ad.dismissSoftInput(); Utils.ad.dismissSoftInput();
this.showSearch = false; this.showSearch = false;
this.showFAB = true;
this.releaseLocalBackEvent(); this.releaseLocalBackEvent();
}, },
setComponent(comp) { setComponent(comp) {
this.setCurrentComponentAction(comp); this.setCurrentComponentAction(comp);
this.hijackGlobalBackEvent(); this.hijackGlobalBackEvent();
}, },
clearSearch() {
this.searchQuery = "";
},
updateList(value) { updateList(value) {
clearTimeout(typingTimer); clearTimeout(typingTimer);
typingTimer = setTimeout((e) => { typingTimer = setTimeout((e) => {
this.searchQuery = value; this.searchQuery = value.toLowerCase();
}, 750); }, 750);
}, },
formattedTotalTime(prepTime, cookTime) { formattedTotalTime(prepTime, cookTime) {
@ -753,6 +759,7 @@ export default {
if (!this.selection.length) this.clearSelection(); if (!this.selection.length) this.clearSelection();
}, },
clearSelection() { clearSelection() {
this.showFAB = true;
this.selectMode = false; this.selectMode = false;
this.$emit("selectModeOn", true); this.$emit("selectModeOn", true);
this.selection = []; this.selection = [];
@ -760,7 +767,6 @@ export default {
e.className = e.className.replace(/selected/g, ""); e.className = e.className.replace(/selected/g, "");
}); });
this.releaseLocalBackEvent(); this.releaseLocalBackEvent();
this.showFAB = true;
}, },
deleteSelection() { deleteSelection() {
this.selection.length === 1 this.selection.length === 1

4
app/components/ViewRecipe.vue
View file

@ -411,7 +411,7 @@
</TabContentItem> </TabContentItem>
</Tabs> </Tabs>
<GridLayout id="btnFabContainer" rows="*, auto" columns="*, auto"> <GridLayout id="btnFabContainer" rows="*, auto" columns="*, auto">
<transition name="bounce" appear> <!-- <transition name="bounce" appear>
<MDFloatingActionButton <MDFloatingActionButton
row="1" row="1"
col="1" col="1"
@ -419,7 +419,7 @@
@tap="shareHandler" @tap="shareHandler"
v-if="showFab" v-if="showFab"
/> />
</transition> </transition> -->
</GridLayout> </GridLayout>
</AbsoluteLayout> </AbsoluteLayout>
</Page> </Page>

4
app/components/modal/ActionDialog.vue
View file

@ -23,9 +23,7 @@
class="actionItem mdr" class="actionItem mdr"
:class="{ tb: title === 'srt' && sortType === item }" :class="{ tb: title === 'srt' && sortType === item }"
:color="title === 'srt' && sortType === item ? '#ff5200' : ''" :color="title === 'srt' && sortType === item ? '#ff5200' : ''"
:text="`${localized(item)}${ :text="`${localized(item)}`"
title === 'srt' && sortType === item ? '*' : ''
}`"
@tap="tapAction(item)" @tap="tapAction(item)"
@longPress="removeItem(item)" @longPress="removeItem(item)"
/> />

3
app/main.js
View file

@ -30,9 +30,6 @@ Vue.use(ButtonPlugin)
import ActivityIndicatorPlugin from '@nativescript-community/ui-material-activityindicator/vue' import ActivityIndicatorPlugin from '@nativescript-community/ui-material-activityindicator/vue'
Vue.use(ActivityIndicatorPlugin) Vue.use(ActivityIndicatorPlugin)
import FloatingActionButtonPlugin from '@nativescript-community/ui-material-floatingactionbutton/vue'
Vue.use(FloatingActionButtonPlugin)
import ProgressPlugin from '@nativescript-community/ui-material-progress/vue' import ProgressPlugin from '@nativescript-community/ui-material-progress/vue'
Vue.use(ProgressPlugin) Vue.use(ProgressPlugin)

4
app/resources/Android/src/main/res/values/styles.xml
View file

@ -74,10 +74,8 @@
<item name="searchHintIcon"> <item name="searchHintIcon">
@null @null
</item> </item>
<!--
<item name="closeIcon"> <item name="closeIcon">
@null @null
</item> </item>
-->
</style> </style>
</resources> </resources>

17
package-lock.json generated
View file

@ -15,7 +15,6 @@
"@nativescript-community/ui-drawer": "^0.0.24", "@nativescript-community/ui-drawer": "^0.0.24",
"@nativescript-community/ui-material-activityindicator": "^5.2.10", "@nativescript-community/ui-material-activityindicator": "^5.2.10",
"@nativescript-community/ui-material-button": "^5.2.10", "@nativescript-community/ui-material-button": "^5.2.10",
"@nativescript-community/ui-material-floatingactionbutton": "^5.2.10",
"@nativescript-community/ui-material-progress": "^5.2.10", "@nativescript-community/ui-material-progress": "^5.2.10",
"@nativescript-community/ui-material-snackbar": "^5.2.10", "@nativescript-community/ui-material-snackbar": "^5.2.10",
"@nativescript/core": "7.3.0", "@nativescript/core": "7.3.0",
@ -1358,14 +1357,6 @@
"@nativescript/hook": "~2.0.0" "@nativescript/hook": "~2.0.0"
} }
}, },
"node_modules/@nativescript-community/ui-material-floatingactionbutton": {
"version": "5.2.10",
"resolved": "https://registry.npmjs.org/@nativescript-community/ui-material-floatingactionbutton/-/ui-material-floatingactionbutton-5.2.10.tgz",
"integrity": "sha512-x3aQNS9k1oYs763jXgMchQOnOIg87k2KQA/96VX0kemUl0Oco9p21uQexsbab5BQkk1wCVSgPesMwMrGpi21BA==",
"dependencies": {
"@nativescript-community/ui-material-core": "^5.2.10"
}
},
"node_modules/@nativescript-community/ui-material-progress": { "node_modules/@nativescript-community/ui-material-progress": {
"version": "5.2.10", "version": "5.2.10",
"resolved": "https://registry.npmjs.org/@nativescript-community/ui-material-progress/-/ui-material-progress-5.2.10.tgz", "resolved": "https://registry.npmjs.org/@nativescript-community/ui-material-progress/-/ui-material-progress-5.2.10.tgz",
@ -13083,14 +13074,6 @@
"@nativescript/hook": "~2.0.0" "@nativescript/hook": "~2.0.0"
} }
}, },
"@nativescript-community/ui-material-floatingactionbutton": {
"version": "5.2.10",
"resolved": "https://registry.npmjs.org/@nativescript-community/ui-material-floatingactionbutton/-/ui-material-floatingactionbutton-5.2.10.tgz",
"integrity": "sha512-x3aQNS9k1oYs763jXgMchQOnOIg87k2KQA/96VX0kemUl0Oco9p21uQexsbab5BQkk1wCVSgPesMwMrGpi21BA==",
"requires": {
"@nativescript-community/ui-material-core": "^5.2.10"
}
},
"@nativescript-community/ui-material-progress": { "@nativescript-community/ui-material-progress": {
"version": "5.2.10", "version": "5.2.10",
"resolved": "https://registry.npmjs.org/@nativescript-community/ui-material-progress/-/ui-material-progress-5.2.10.tgz", "resolved": "https://registry.npmjs.org/@nativescript-community/ui-material-progress/-/ui-material-progress-5.2.10.tgz",

1
package.json
View file

@ -11,7 +11,6 @@
"@nativescript-community/ui-drawer": "^0.0.24", "@nativescript-community/ui-drawer": "^0.0.24",
"@nativescript-community/ui-material-activityindicator": "^5.2.10", "@nativescript-community/ui-material-activityindicator": "^5.2.10",
"@nativescript-community/ui-material-button": "^5.2.10", "@nativescript-community/ui-material-button": "^5.2.10",
"@nativescript-community/ui-material-floatingactionbutton": "^5.2.10",
"@nativescript-community/ui-material-progress": "^5.2.10", "@nativescript-community/ui-material-progress": "^5.2.10",
"@nativescript-community/ui-material-snackbar": "^5.2.10", "@nativescript-community/ui-material-snackbar": "^5.2.10",
"@nativescript/core": "7.3.0", "@nativescript/core": "7.3.0",