fixed tabs refresh issue

This commit is contained in:
Vishnu Raghav B 2020-11-29 00:51:57 +05:30
parent ef215c7321
commit 1f55ae51b5
16 changed files with 310 additions and 444 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 519 B

After

Width:  |  Height:  |  Size: 488 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 312 B

After

Width:  |  Height:  |  Size: 303 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 341 B

After

Width:  |  Height:  |  Size: 363 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 550 B

After

Width:  |  Height:  |  Size: 552 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 930 B

After

Width:  |  Height:  |  Size: 979 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 928 B

After

Width:  |  Height:  |  Size: 1,020 B

View file

@ -42,7 +42,8 @@ Page,
Page,
ActionBar,
SearchBar,
TabView,
Tabs,
TabStripItem,
ListPicker {
color: $gray9;
background: $gray1;
@ -51,11 +52,6 @@ Page,
MDButton {
ripple-color: rgba($gray6, 0.2);
}
TabView {
tab-background-color: $gray1;
selected-tab-text-color: $gray9;
}
.hr {
border-color: $gray3;
}
@ -63,13 +59,15 @@ Page,
.fieldLabel {
background: $gray1;
}
.referenceItem,
.recipeText,
.urlCard,
.textCard,
.overviewItem,
.recipeItem,
TextField.combinationToken {
.recipeItem {
background: white;
}
TextField.combinationToken {
background: $gray3;
}
.sd-item,
.sd-group-header,
@ -108,15 +106,16 @@ Page,
Page,
ActionBar,
SearchBar,
TabView,
Tabs,
TabStripItem,
ListPicker {
color: $gray1;
background: $gray9;
}
TabView {
tab-background-color: $gray9;
selected-tab-text-color: $gray1;
}
// TabView {
// tab-background-color: $gray9;
// selected-tab-text-color: $gray1;
// }
MDRipple,
MDButton {
ripple-color: rgba($gray4, 0.1);
@ -129,8 +128,8 @@ Page,
.fieldLabel {
background: $gray9;
}
.referenceItem,
.recipeText,
.urlCard,
.textCard,
.overviewItem,
.recipeItem,
TextField.combinationToken {
@ -194,7 +193,7 @@ TabView {
tab-text-color: $gray6;
}
.inputField {
margin-bottom: 14;
margin-bottom: 4;
}
.fieldLabel {
font-size: 12;
@ -218,8 +217,8 @@ MDProgress {
// ActionBar
ActionBar {
margin: 0;
padding: 0 8;
height: 64;
padding: 6 8;
// height: 64;
GridLayout {
padding: 0;
margin: 0;
@ -227,6 +226,9 @@ ActionBar {
MDButton.bx {
padding: 0;
margin: 0;
&.flip {
transform: scaleX(-1);
}
}
.title {
padding-left: 12;
@ -268,7 +270,7 @@ ActionBar {
}
.sd-group-header {
width: 100%;
padding: 8 0 8 8;
padding: 8;
}
MDRipple {
border-radius: 4;
@ -318,9 +320,6 @@ MDButton {
vertical-alignment: center;
}
}
&.noResult {
margin-top: 32;
}
}
// -----------------------------
// Recipe Items
@ -375,18 +374,18 @@ RadListView {
padding: 8;
}
.main-container {
padding: 8 8 128;
padding: 8 8 88;
.option {
font-size: 16;
.bx {
margin: 16 24 16 16;
margin: 11 24 11 16;
}
.info {
font-size: 12;
line-height: 4;
}
StackLayout {
margin: 16 24 16 0;
margin: 9 24 9 0;
}
}
}
@ -406,8 +405,7 @@ RadListView {
.viewRecipe {
.category,
.time,
.ingredient,
.ingredient-check {
.ingredient {
font-size: 16;
}
.category {
@ -440,12 +438,8 @@ RadListView {
}
}
}
.ingredient,
.ingredient-check {
.ingredient {
line-height: 6;
padding-bottom: 12;
}
.ingredient-check {
padding-bottom: 0;
}
.count {
@ -455,54 +449,37 @@ RadListView {
margin: 0 0 0 8;
text-align: center;
border-radius: 99;
&.square {
clip-path: polygon(
5% 0,
95% 0,
100% 5%,
100% 65%,
65% 100%,
5% 100%,
0 95%,
0 5%
);
}
}
.instruction,
.note,
.reference {
.instruction {
font-size: 16;
line-height: 6;
padding: 2 0 14 36;
padding: 1 0 24 36;
margin: 0 0 0 19;
border-width: 0 0 0 2;
}
.instruction.noBorder {
border-color: transparent;
}
.note {
border-width: 0;
}
.referenceItem {
.urlCard {
margin: 8 16;
border-radius: 4;
font-size: 16;
.bx {
font-size: 24;
}
.recipeLink {
padding: 16;
.link {
padding: 13 16 13 11;
margin: 0;
line-height: 6;
}
.linkIcon {
padding: 0 16 0 0;
padding: 0 0 0 12;
}
}
.recipeText {
.textCard {
font-size: 16;
line-height: 6;
padding: 16;
padding: 13 16;
margin: 8 16;
border-radius: 4;
}
@ -510,6 +487,7 @@ RadListView {
// -----------------------------
// FAB
#btnFabContainer {
z-index: 100;
width: 100%;
height: 100%;
}
@ -539,13 +517,10 @@ MDButton.closeBtn {
min-width: 0;
vertical-alignment: top;
}
TextField.combinationToken {
border-width: 0;
}
// -----------------------------
// MEAL PLANNER
.dayPlan {
padding: 0;
padding: 0 0 88;
width: 100%;
.plansContainer {
padding: 8 4;
@ -614,7 +589,7 @@ TextField.combinationToken {
letter-spacing: 0;
text-transform: none;
line-height: 6;
padding: 16 24;
padding: 13 24;
margin: 0;
}
.actionsContainer {

View file

@ -1,6 +1,6 @@
<template>
<Page @loaded="onPageLoad">
<ActionBar :flat="viewIsScrolled ? false : true">
<ActionBar :androidElevation="viewIsScrolled ? 4 : 0">
<GridLayout rows="*" columns="auto, *">
<MDButton
variant="text"
@ -13,7 +13,7 @@
<Label class="title orkm" text="About" col="1" />
</GridLayout>
</ActionBar>
<ScrollView scrollBarIndicatorVisible="true" @scroll="onScroll">
<ScrollView @scroll="onScroll">
<StackLayout class="main-container">
<StackLayout
horizontalAlignment="center"
@ -118,9 +118,7 @@ export default {
utils.showDrawer()
},
onScroll(args) {
args.scrollY
? (this.viewIsScrolled = true)
: (this.viewIsScrolled = false)
this.viewIsScrolled = args.scrollY ? true : false
},
openURL(url) {
Utils.openUrl(url)

View file

@ -169,20 +169,20 @@ export default {
MealPlanner: MealPlanner,
topmenu: [
{
title: "Home",
title: "EnRecipes",
component: "EnRecipes",
icon: "home",
},
{
title: "Favorites",
component: "Favorites",
icon: "heart",
},
{
title: "Try Later",
component: "Try Later",
icon: "trylater",
},
{
title: "Favorites",
component: "Favorites",
icon: "heart",
},
],
bottommenu: [
{

View file

@ -1,6 +1,6 @@
<template>
<Page @loaded="onPageLoad" @unloaded="releaseBackEvent">
<ActionBar :flat="viewIsScrolled ? false : true">
<ActionBar :androidElevation="viewIsScrolled ? 4 : 0">
<GridLayout rows="*" columns="auto, *, auto">
<MDButton
variant="text"
@ -22,13 +22,8 @@
<MDActivityIndicator col="2" v-if="saving" :busy="saving" />
</GridLayout>
</ActionBar>
<ScrollView
width="100%"
height="100%"
@scroll="onScroll"
scrollBarIndicatorVisible="true"
>
<StackLayout width="100%" padding="0 0 128">
<ScrollView width="100%" height="100%" @scroll="onScroll">
<StackLayout width="100%" padding="0 0 88">
<AbsoluteLayout>
<StackLayout
width="100%"
@ -133,7 +128,7 @@
returnKeyType="next"
/>
<TextField
width="68"
width="60"
col="2"
v-model="recipeContent.ingredients[index].quantity"
hint="1.00"
@ -141,7 +136,7 @@
returnKeyType="next"
/>
<TextField
width="68"
width="76"
col="4"
v-model="recipeContent.ingredients[index].unit"
hint="Unit"
@ -198,66 +193,6 @@
</StackLayout>
<StackLayout margin="0 16">
<Label text="Notes" class="sectionTitle" />
<GridLayout
columns="*,8,auto"
v-for="(note, index) in recipeContent.notes"
:key="index"
>
<TextView
@loaded="focusField($event, 'multiLine')"
col="0"
:hint="`Note ${index + 1}`"
v-model="recipeContent.notes[index]"
/>
<MDButton
variant="text"
col="2"
class="bx closeBtn"
:text="icon.close"
@tap="removeNote(index)"
/>
</GridLayout>
<MDButton
variant="text"
class="text-btn orkm"
text="+ ADD NOTE"
@tap="addNote"
/>
<StackLayout class="hr" margin="24 16"></StackLayout>
</StackLayout>
<StackLayout margin="0 16">
<Label text="References" class="sectionTitle" />
<GridLayout
columns="*,8,auto"
v-for="(reference, index) in recipeContent.references"
:key="index"
>
<TextView
@loaded="focusField($event, 'multiLine')"
col="0"
v-model="recipeContent.references[index]"
hint="Text or Website/Video URL"
/>
<MDButton
variant="text"
col="2"
class="bx closeBtn"
:text="icon.close"
@tap="removeReference(index)"
/>
</GridLayout>
<MDButton
variant="text"
class="text-btn orkm"
text="+ ADD REFERENCE"
@tap="addReference"
/>
<StackLayout class="hr" margin="24 16"></StackLayout>
</StackLayout>
<StackLayout margin="0 16 24">
<Label text="Combinations" class="sectionTitle" />
<GridLayout
columns="*,8,auto"
@ -284,6 +219,36 @@
text="+ ADD COMBINATION"
@tap="showCombinations"
/>
<StackLayout class="hr" margin="24 16"></StackLayout>
</StackLayout>
<StackLayout margin="0 16">
<Label text="Notes" class="sectionTitle" />
<GridLayout
columns="*,8,auto"
v-for="(note, index) in recipeContent.notes"
:key="index"
>
<TextView
@loaded="focusField($event, 'multiLine')"
col="0"
hint="Text or URL"
v-model="recipeContent.notes[index]"
/>
<MDButton
variant="text"
col="2"
class="bx closeBtn"
:text="icon.close"
@tap="removeNote(index)"
/>
</GridLayout>
<MDButton
variant="text"
class="text-btn orkm"
text="+ ADD NOTE"
@tap="addNote"
/>
</StackLayout>
</StackLayout>
</ScrollView>
@ -310,6 +275,8 @@ import * as Filepicker from "nativescript-plugin-filepicker"
import { ImageCropper } from "nativescript-imagecropper"
import { mapState, mapActions } from "vuex"
import ViewRecipe from "./ViewRecipe.vue"
import ActionDialog from "./modal/ActionDialog.vue"
import ActionDialogWithSearch from "./modal/ActionDialogWithSearch.vue"
import ConfirmDialog from "./modal/ConfirmDialog.vue"
@ -319,7 +286,13 @@ import ListPicker from "./modal/ListPicker.vue"
import * as utils from "~/shared/utils"
export default {
props: ["recipeID", "selectedCategory", "filterFavorites", "filterTrylater"],
props: [
"recipeID",
"selectedCategory",
"filterFavorites",
"filterTrylater",
"navigationFromView",
],
data() {
return {
title: "New recipe",
@ -335,9 +308,8 @@ export default {
},
ingredients: [],
instructions: [],
notes: [],
references: [],
combinations: [],
notes: [],
isFavorite: false,
tried: true,
lastTried: null,
@ -460,9 +432,7 @@ export default {
})
},
onScroll(args) {
args.scrollY
? (this.viewIsScrolled = true)
: (this.viewIsScrolled = false)
this.viewIsScrolled = args.scrollY ? true : false
},
// DATA LIST
@ -576,6 +546,17 @@ export default {
},
// NAVIGATION HANDLERS
navigateBackController() {
if (this.navigationFromView) {
this.$navigateTo(ViewRecipe, {
props: {
filterTrylater: this.filterTrylater,
recipeID: this.recipeID,
},
backstackVisible: false,
})
} else this.$navigateBack()
},
navigateBack() {
if (this.hasChanges) {
this.blockModal = true
@ -590,12 +571,12 @@ export default {
}).then((action) => {
this.blockModal = false
if (action != null && !action) {
this.$navigateBack()
this.navigateBackController()
this.releaseBackEvent()
}
})
} else {
this.$navigateBack()
this.navigateBackController()
this.releaseBackEvent()
}
},
@ -722,12 +703,12 @@ export default {
},
// INPUT FIELD HANDLERS
fieldDeletionConfirm(item) {
fieldDeletionConfirm(title) {
return this.$showModal(ConfirmDialog, {
props: {
title: `Delete ${item}?`,
title,
cancelButtonText: "CANCEL",
okButtonText: "DELETE",
okButtonText: "REMOVE",
},
})
},
@ -740,7 +721,7 @@ export default {
},
removeIngredient(index) {
if (this.recipeContent.ingredients[index].item.length) {
this.fieldDeletionConfirm("ingredient").then((res) => {
this.fieldDeletionConfirm("Remove ingredient").then((res) => {
if (res) {
this.recipeContent.ingredients.splice(index, 1)
}
@ -753,7 +734,7 @@ export default {
},
removeInstruction(index) {
if (this.recipeContent.instructions[index].length) {
this.fieldDeletionConfirm("instruction").then((res) => {
this.fieldDeletionConfirm("Remove instruction").then((res) => {
res && this.recipeContent.instructions.splice(index, 1)
})
} else this.recipeContent.instructions.splice(index, 1)
@ -783,7 +764,7 @@ export default {
},
removeCombination(id) {
let index = this.recipeContent.combinations.indexOf(id)
this.fieldDeletionConfirm("combination").then((res) => {
this.fieldDeletionConfirm("Remove combination").then((res) => {
if (res) {
this.recipeContent.combinations.splice(index, 1)
this.unSyncCombinations.push(id)
@ -796,25 +777,12 @@ export default {
},
removeNote(index) {
if (this.recipeContent.notes[index].length) {
this.fieldDeletionConfirm("note").then((res) => {
this.fieldDeletionConfirm("Remove note").then((res) => {
if (res) this.recipeContent.notes.splice(index, 1)
})
} else this.recipeContent.notes.splice(index, 1)
},
addReference() {
this.recipeContent.references.push("")
},
removeReference(index) {
if (this.recipeContent.references[index].length) {
this.fieldDeletionConfirm("reference").then((res) => {
if (res) {
this.recipeContent.references.splice(index, 1)
}
})
} else this.recipeContent.references.splice(index, 1)
},
// SAVE OPERATION
clearEmptyFields() {
if (!this.recipeContent.title)
@ -830,10 +798,9 @@ export default {
}
clearEmpty("instructions")
clearEmpty("notes")
clearEmpty("references")
},
saveOperation() {
this.saving = true
this.saving = this.modalOpen = true
this.clearEmptyFields()
this.recipeContent.lastModified = new Date()
if (this.cacheImagePath) {
@ -881,7 +848,7 @@ export default {
setTimeout(() => {
this.saving = false
}, 100)
this.$navigateBack()
this.navigateBackController()
},
},
created() {

View file

@ -1,6 +1,6 @@
<template>
<Page @loaded="onPageLoad">
<ActionBar :flat="viewIsScrolled ? false : true">
<ActionBar :androidElevation="viewIsScrolled ? 4 : 0">
<!-- Search Actionbar -->
<GridLayout
v-if="showSearch"
@ -114,12 +114,11 @@
</GridLayout>
</v-template>
<v-template name="footer">
<StackLayout height="128"></StackLayout>
<StackLayout height="80"></StackLayout>
</v-template>
</RadListView>
<GridLayout rows="*, auto, *, 88" columns="*" class="emptyStateContainer">
<StackLayout
col="0"
row="1"
class="emptyState"
v-if="
@ -143,20 +142,6 @@
</StackLayout>
</StackLayout>
<StackLayout
col="0"
row="1"
class="emptyState"
v-if="!filteredRecipes.length && filterFavorites && !searchQuery"
>
<Label class="bx icon" :text="icon.heartOutline" textWrap="true" />
<Label class="title orkm" text="No favorites yet" textWrap="true" />
<Label
text="Recipes you mark as favorite will be listed here"
textWrap="true"
/>
</StackLayout>
<StackLayout
col="0"
row="1"
class="emptyState"
v-if="!filteredRecipes.length && filterTrylater && !searchQuery"
@ -169,15 +154,21 @@
/>
</StackLayout>
<StackLayout
col="0"
row="1"
class="emptyState"
v-if="
!filteredRecipes.length &&
!filterFavorites &&
!filterTrylater &&
selectedCategory
"
v-if="!filteredRecipes.length && filterFavorites && !searchQuery"
>
<Label class="bx icon" :text="icon.heartOutline" textWrap="true" />
<Label class="title orkm" text="No favorites yet" textWrap="true" />
<Label
text="Recipes you mark as favorite will be listed here"
textWrap="true"
/>
</StackLayout>
<StackLayout
row="1"
class="emptyState"
v-if="!filteredRecipes.length && !searchQuery && selectedCategory"
>
<Label class="bx icon" :text="icon.labelOutline" textWrap="true" />
<Label
@ -192,20 +183,15 @@
</StackLayout>
</StackLayout>
<StackLayout
col="0"
row="0"
class="emptyState noResult"
row="1"
class="emptyState"
v-if="!filteredRecipes.length && searchQuery"
>
<Label class="bx icon" :text="icon.search" textWrap="true" />
<Label class="title orkm" text="No recipes found" textWrap="true" />
<Label
:text="
`Your search &quot;${searchQuery}&quot; did not match any recipes${
filterFavorites || filterTrylater || selectedCategory
? ' in this category'
: ''
}`
`Your search &quot;${searchQuery}&quot; did not match any recipes${noResultFor}`
"
textWrap="true"
/>
@ -287,6 +273,12 @@ export default {
)
}
},
noResultFor() {
if (this.selectedCategory) return " in this category"
if (this.filterFavorites) return " in your favorites"
if (this.filterTrylater) return " in your try later list"
return ""
},
},
methods: {
...mapActions(["setCurrentComponentAction", "deleteRecipeAction"]),
@ -337,9 +329,7 @@ export default {
}
},
onScroll(args) {
args.scrollOffset
? (this.viewIsScrolled = true)
: (this.viewIsScrolled = false)
this.viewIsScrolled = args.scrollOffset ? true : false
},
// NAVIGATION HANDLERS
@ -379,6 +369,7 @@ export default {
filterTrylater: this.filterTrylater,
recipeID,
},
backstackVisible: false,
})
},
@ -389,7 +380,7 @@ export default {
props: {
title: "Sort by",
list: ["Natural order", "Title", "Duration", "Last modified"],
height: "225",
height: "192",
},
}).then((action) => {
if (action && action !== "Cancel" && this.sortType !== action) {

View file

@ -1,6 +1,6 @@
<template>
<Page @loaded="onPageLoad">
<ActionBar :flat="viewIsScrolled ? false : true">
<ActionBar flat="true">
<GridLayout rows="*" columns="auto, *, auto">
<MDButton
class="bx left"
@ -23,6 +23,7 @@
</ActionBar>
<GridLayout rows="280, *">
<RadCalendar
:androidElevation="viewIsScrolled ? 4 : 0"
class="orkm"
row="0"
ref="calendar"
@ -35,12 +36,7 @@
:eventsViewMode="eventsViewMode"
:eventSource="getMealPlans"
></RadCalendar>
<ScrollView
row="1"
width="100%"
height="100%"
scrollBarIndicatorVisible="true"
>
<ScrollView row="1" width="100%" height="100%" @scroll="onScroll">
<StackLayout class="dayPlan">
<StackLayout
v-for="(mealType, index) in mealTimes"
@ -186,7 +182,7 @@ export default {
dayNameCellStyle.cellBorderColor = this.isLightMode
? this.color.gray2
: this.color.black
dayNameCellStyle.cellTextSize = 12
dayNameCellStyle.cellTextSize = 10
dayNameCellStyle.cellAlignment = CalendarCellAlignment.Center
dayNameCellStyle.cellTextFontName = this.appFontMedium
monthViewStyle.dayNameCellStyle = dayNameCellStyle
@ -200,7 +196,7 @@ export default {
dayCellStyle.cellTextSize = 16
dayCellStyle.cellTextColor = this.isLightMode
? this.color.gray9
: this.color.gray2
: this.color.gray1
dayCellStyle.cellAlignment = CalendarCellAlignment.Bottom
dayCellStyle.cellBackgroundColor = this.isLightMode
? this.color.gray1
@ -328,9 +324,7 @@ export default {
utils.showDrawer()
},
onScroll(args) {
args.scrollY
? (this.viewIsScrolled = true)
: (this.viewIsScrolled = false)
this.viewIsScrolled = args.scrollY ? true : false
},
getDate(index) {
let date = new Date()

View file

@ -1,6 +1,6 @@
<template>
<Page @loaded="onPageLoad">
<ActionBar :flat="viewIsScrolled ? false : true">
<ActionBar :androidElevation="viewIsScrolled ? 4 : 0">
<GridLayout rows="*" columns="auto, *">
<MDButton
class="bx left"
@ -13,7 +13,7 @@
<Label class="title orkm" text="Settings" col="1" />
</GridLayout>
</ActionBar>
<ScrollView scrollBarIndicatorVisible="true" @scroll="onScroll">
<ScrollView @scroll="onScroll">
<StackLayout class="main-container">
<Label text="Interface" class="group-header orkm" />
<GridLayout columns="auto, *" class="option">
@ -128,9 +128,7 @@ export default {
utils.showDrawer()
},
onScroll(args) {
args.scrollY
? (this.viewIsScrolled = true)
: (this.viewIsScrolled = false)
this.viewIsScrolled = args.scrollY ? true : false
},
// THEME SELECTION
@ -139,7 +137,7 @@ export default {
props: {
title: "Theme",
list: ["Light", "Dark"],
height: "113",
height: "96",
},
}).then((action) => {
if (action && action !== "Cancel" && this.appTheme !== action) {

View file

@ -1,7 +1,7 @@
<template>
<Page @loaded="onPageLoad" @unloaded="onPageUnload">
<ActionBar height="112" margin="0" flat="true">
<GridLayout rows="64, 48" columns="auto, *, auto,auto, auto">
<ActionBar flat="true">
<GridLayout rows="48" columns="auto, *, auto">
<MDButton
variant="text"
row="0"
@ -11,10 +11,10 @@
automationText="Back"
@tap="$navigateBack()"
/>
<ScrollView
row="1"
col="0"
colSpan="4"
<!-- <ScrollView
row="0"
col="1"
:colSpan="hideActionBar ? 2 : 1"
orientation="horizontal"
scrollBarIndicatorVisible="false"
>
@ -23,22 +23,8 @@
:text="recipe.title"
verticalAlignment="bottom"
/>
</ScrollView>
</ScrollView> -->
<FlexboxLayout row="0" col="2" alignItems="center">
<MDButton
variant="text"
v-if="!busy"
class="bx"
:text="icon.edit"
@tap="editRecipe"
/>
<MDActivityIndicator v-else :busy="busy" />
<MDButton
variant="text"
class="bx"
:text="recipe.isFavorite ? icon.heart : icon.heartOutline"
@tap="toggleFavorite"
/>
<MDButton
v-if="!filterTrylater"
variant="text"
@ -50,23 +36,54 @@
v-else
variant="text"
class="bx"
:text="icon.share"
@tap="shareHandler"
:text="icon.check"
@tap="recipeTried"
/>
<MDButton
variant="text"
class="bx"
:text="recipe.isFavorite ? icon.heart : icon.heartOutline"
@tap="toggleFavorite"
/>
<MDButton
variant="text"
v-if="!busy"
class="bx"
:text="icon.edit"
@tap="editRecipe"
/>
<MDActivityIndicator v-else :busy="busy" />
</FlexboxLayout>
</GridLayout>
</ActionBar>
<AbsoluteLayout>
<TabView
:selectedIndex="selectedTabIndex"
@selectedIndexChange="selectedIndexChange"
androidElevation="0"
<Tabs
width="100%"
height="100%"
:selectedIndex="selectedTabIndex"
@selectedIndexChange="selectedIndexChange"
class="viewRecipe"
>
<TabViewItem title="Overview">
<ScrollView scrollBarIndicatorVisible="true">
<TabStrip :androidElevation="viewIsScrolled ? 4 : 0">
<TabStripItem>
<Label text="Overview"></Label>
</TabStripItem>
<TabStripItem>
<Label text="Ingredients"></Label>
</TabStripItem>
<TabStripItem>
<Label text="Instructions"></Label>
</TabStripItem>
<TabStripItem>
<Label text="Combinations"></Label>
</TabStripItem>
<TabStripItem>
<Label text="Notes"></Label>
</TabStripItem>
</TabStrip>
<TabContentItem>
<ScrollView @scroll="onScroll">
<StackLayout>
<StackLayout
width="100%"
@ -89,7 +106,7 @@
:text="icon.image"
/>
</StackLayout>
<StackLayout margin="16 8 144">
<StackLayout margin="16 8 80">
<Label class="category orkm" :text="recipe.category" />
<Label
margin="0 8"
@ -102,7 +119,7 @@
<Label :text="` ${formattedTime(recipe.timeRequired)}`" />
</StackLayout>
<GridLayout
rows="auto, auto, auto"
rows="auto, auto"
columns="*, *"
class="overviewContainer"
>
@ -150,7 +167,6 @@
textWrap="true"
/>
</GridLayout>
<GridLayout
class="overviewItem"
row="1"
@ -159,48 +175,6 @@
columns="*"
>
<MDRipple rowSpan="2" @tap="selectedTabIndex = 3" />
<Label row="0" class="bx" :text="icon.note" />
<Label
row="1"
class="itemCount"
:text="
`${recipe.notes.length} ${
recipe.notes.length == 1 ? 'Note' : 'Notes'
}`
"
textWrap="true"
/>
</GridLayout>
<GridLayout
class="overviewItem"
row="1"
col="1"
rows="auto, auto"
columns="*"
>
<MDRipple rowSpan="2" @tap="selectedTabIndex = 4" />
<Label row="0" class="bx" :text="icon.source" />
<Label
row="1"
class="itemCount"
:text="
`${recipe.references.length} ${
recipe.references.length == 1
? 'Reference'
: 'References'
}`
"
textWrap="true"
/>
</GridLayout>
<GridLayout
class="overviewItem"
row="2"
col="0"
rows="auto, auto"
columns="*"
>
<MDRipple rowSpan="2" @tap="selectedTabIndex = 5" />
<Label row="0" class="bx" :text="icon.outline" />
<Label
row="1"
@ -215,13 +189,33 @@
textWrap="true"
/>
</GridLayout>
<GridLayout
class="overviewItem"
row="1"
col="1"
rows="auto, auto"
columns="*"
>
<MDRipple rowSpan="2" @tap="selectedTabIndex = 4" />
<Label row="0" class="bx" :text="icon.note" />
<Label
row="1"
class="itemCount"
:text="
`${recipe.notes.length} ${
recipe.notes.length == 1 ? 'Note' : 'Notes'
}`
"
textWrap="true"
/>
</GridLayout>
</GridLayout>
</StackLayout>
</StackLayout>
</ScrollView>
</TabViewItem>
<TabViewItem title="Ingredients">
<ScrollView scrollBarIndicatorVisible="true">
</TabContentItem>
<TabContentItem>
<ScrollView @scroll="onScroll">
<GridLayout
v-if="!recipe.ingredients.length"
rows="*, auto, *, 88"
@ -238,7 +232,7 @@
<Label text="to add some ingredients" textWrap="true" />
</StackLayout>
</GridLayout>
<StackLayout v-else padding="32 16 134">
<StackLayout v-else padding="24 16 72">
<AbsoluteLayout class="inputField">
<TextField
width="50%"
@ -265,7 +259,7 @@
:key="index"
>
<check-box
class="ingredient-check"
class="ingredient"
checkPadding="16"
fillColor="#ff5200"
:text="
@ -281,9 +275,9 @@
</StackLayout>
</StackLayout>
</ScrollView>
</TabViewItem>
<TabViewItem title="Instructions">
<ScrollView scrollBarIndicatorVisible="true">
</TabContentItem>
<TabContentItem>
<ScrollView @scroll="onScroll">
<GridLayout
v-if="!recipe.instructions.length"
rows="*, auto, *, 88"
@ -300,7 +294,7 @@
<Label text="to add some instructions" textWrap="true" />
</StackLayout>
</GridLayout>
<StackLayout v-else padding="32 16 132">
<StackLayout v-else padding="28 16 62">
<GridLayout
columns="auto ,*"
v-for="(instruction, index) in recipe.instructions"
@ -326,104 +320,9 @@
</GridLayout>
</StackLayout>
</ScrollView>
</TabViewItem>
<TabViewItem title="Notes">
<ScrollView scrollBarIndicatorVisible="true">
<GridLayout
v-if="!recipe.notes.length"
rows="*, auto, *, 88"
columns="*"
class="emptyStateContainer"
>
<StackLayout col="0" row="1" class="emptyState">
<Label class="bx icon" :text="icon.note" textWrap="true" />
<StackLayout orientation="horizontal" class="title orkm">
<Label text="Use the " />
<Label class="bx" :text="icon.edit" />
<Label text=" button" />
</StackLayout>
<Label text="to add some notes" textWrap="true" />
</StackLayout>
</GridLayout>
<StackLayout v-else padding="32 16 132">
<GridLayout
columns="auto ,*"
v-for="(note, index) in recipe.notes"
:key="index"
>
<Label
col="0"
colSpan="2"
class="note"
:text="note"
textWrap="true"
/>
<Label
verticalAlignment="top"
horizontalAlignment="center"
class="count square orkm"
col="0"
:text="index + 1"
/>
</GridLayout>
</StackLayout>
</ScrollView>
</TabViewItem>
<TabViewItem title="References">
<ScrollView scrollBarIndicatorVisible="true">
<GridLayout
v-if="!recipe.references.length"
rows="*, auto, *, 88"
columns="*"
class="emptyStateContainer"
>
<StackLayout col="0" row="1" class="emptyState">
<Label class="bx icon" :text="icon.source" textWrap="true" />
<StackLayout orientation="horizontal" class="title orkm">
<Label text="Use the " />
<Label class="bx" :text="icon.edit" />
<Label text=" button" />
</StackLayout>
<Label text="to add some references" textWrap="true" />
</StackLayout>
</GridLayout>
<StackLayout v-else padding="10 0 132">
<StackLayout
v-for="(reference, index) in recipe.references"
:key="index"
>
<GridLayout
v-if="isValidURL(reference)"
columns="*, auto"
class="referenceItem"
androidElevation="1"
>
<MDRipple
colSpan="2"
@longPress="copyURL(reference)"
@tap="openURL(reference)"
/>
<Label
col="0"
verticalAlignment="center"
class="recipeLink"
:text="reference"
textWrap="false"
/>
<Label col="1" class="bx linkIcon" :text="icon.source" />
</GridLayout>
<Label
v-else
class="recipeText"
:text="reference"
textWrap="true"
/>
</StackLayout>
</StackLayout>
</ScrollView>
</TabViewItem>
<TabViewItem title="Combinations">
<ScrollView scrollBarIndicatorVisible="true">
</TabContentItem>
<TabContentItem>
<ScrollView @scroll="onScroll">
<GridLayout
v-if="!recipe.combinations.length"
rows="*, auto, *, 88"
@ -440,42 +339,81 @@
<Label text="to add some combinations" textWrap="true" />
</StackLayout>
</GridLayout>
<StackLayout v-else padding="10 0 132">
<StackLayout v-else padding="8 0 80">
<GridLayout
columns="*"
columns="auto, *"
v-for="(combination, index) in recipe.combinations"
:key="index"
androidElevation="1"
class="referenceItem"
class="urlCard"
>
<MDRipple col="0" @tap="viewCombination(combination)" />
<MDRipple colSpan="2" @tap="viewCombination(combination)" />
<Label col="0" class="bx linkIcon" :text="icon.food" />
<Label
col="0"
col="1"
verticalAlignment="center"
class="recipeLink"
class="link"
:text="getCombinationTitle(combination)"
textWrap="true"
/>
</GridLayout>
</StackLayout>
</ScrollView>
</TabViewItem>
</TabView>
<GridLayout id="btnFabContainer" rows="*, auto" columns="*, auto">
<MDFloatingActionButton
row="1"
col="1"
src="res://check"
@tap="recipeTried"
v-if="filterTrylater"
</TabContentItem>
<TabContentItem>
<ScrollView @scroll="onScroll">
<GridLayout
v-if="!recipe.notes.length"
rows="*, auto, *, 88"
columns="*"
class="emptyStateContainer"
>
<StackLayout col="0" row="1" class="emptyState">
<Label class="bx icon" :text="icon.note" textWrap="true" />
<StackLayout orientation="horizontal" class="title orkm">
<Label text="Use the " />
<Label class="bx" :text="icon.edit" />
<Label text=" button" />
</StackLayout>
<Label text="to add some notes" textWrap="true" />
</StackLayout>
</GridLayout>
<StackLayout v-else padding="8 0 80">
<StackLayout v-for="(note, index) in recipe.notes" :key="index">
<GridLayout
v-if="isValidURL(note)"
columns="auto, *"
class="urlCard"
androidElevation="1"
>
<MDRipple
colSpan="2"
@longPress="copyURL(note)"
@tap="openURL(note)"
/>
<Label col="0" class="bx linkIcon" :text="icon.source" />
<Label
col="1"
verticalAlignment="center"
class="link"
:text="note"
textWrap="false"
/>
</GridLayout>
<Label v-else class="textCard" :text="note" textWrap="true" />
</StackLayout>
</StackLayout>
</ScrollView>
</TabContentItem>
</Tabs>
<GridLayout id="btnFabContainer" rows="*, auto" columns="*, auto">
<transition name="dolly" appear>
<MDFloatingActionButton
row="1"
col="1"
src="res://share"
@tap="shareHandler"
v-if="!filterTrylater && showFab"
v-if="showFab"
/>
</transition>
</GridLayout>
@ -494,6 +432,8 @@ import {
ImageSource,
Screen,
Utils,
GestureTypes,
Tabs,
} from "@nativescript/core"
import { Feedback, FeedbackType, FeedbackPosition } from "nativescript-feedback"
import * as Toast from "nativescript-toast"
@ -517,6 +457,9 @@ export default {
showFab: false,
selectedTabIndex: 0,
currentRecipeID: this.recipeID,
viewIsScrolled: false,
isScrolled: [false, false, false, false, false, false],
hideActionBar: false,
}
},
computed: {
@ -525,7 +468,9 @@ export default {
return Screen.mainScreen.widthDIPs
},
positiveYieldMultiplier() {
return this.yieldMultiplier > 0 ? parseFloat(this.yieldMultiplier) : 1
return Math.abs(this.yieldMultiplier) > 0
? Math.abs(parseFloat(this.yieldMultiplier))
: 1
},
isLightMode() {
return Application.systemAppearance() === "light"
@ -543,8 +488,8 @@ export default {
setTimeout((e) => {
this.setCurrentComponentAction("ViewRecipe")
}, 500)
this.yieldMultiplier = this.recipe.yield.quantity
this.showFab = true
this.yieldMultiplier = this.recipe.yield.quantity
this.keepScreenOn(true)
this.syncCombinations()
},
@ -572,6 +517,7 @@ export default {
},
selectedIndexChange(args) {
this.selectedTabIndex = args.object.selectedIndex
this.viewIsScrolled = this.isScrolled[this.selectedTabIndex]
},
showLastTried() {
feedback.show({
@ -583,7 +529,7 @@ export default {
})
},
roundedQuantity(quantity) {
return (
return Math.abs(
Math.round(
(quantity / this.recipe.yield.quantity) *
this.positiveYieldMultiplier *
@ -612,7 +558,7 @@ export default {
return h ? (m ? `${h} hr ${m} min` : `${h} hr`) : `${m} min`
},
isValidURL(string) {
let pattern = new RegExp("^https?|www", "ig")
let pattern = new RegExp("^https?|^www", "ig")
return pattern.test(string)
},
getCombinationTitle(id) {
@ -634,13 +580,20 @@ export default {
},
// NAVIGATION HANDLERS
onScroll(args) {
this.viewIsScrolled = this.isScrolled[this.selectedTabIndex] =
args.scrollY > 8 ? true : false
},
editRecipe() {
this.showFab = false
this.busy = true
this.$navigateTo(EditRecipe, {
props: {
navigationFromView: true,
filterTrylater: this.filterTrylater,
recipeID: this.currentRecipeID,
},
backstackVisible: false,
})
},
viewCombination(combination) {
@ -720,13 +673,6 @@ export default {
})
shareContent += notes
}
if (this.recipe.references.length) {
let references = `\nReferences:\n\n`
this.recipe.references.forEach((e, i) => {
references += `${i + 1}. ${e}\n\n`
})
shareContent += references
}
let sharenote = "\nCreated and shared via EnRecipes. Get it on F-Droid."
shareContent += sharenote
@ -775,7 +721,7 @@ export default {
const clipboard = Utils.ad
.getApplicationContext()
.getSystemService(android.content.Context.CLIPBOARD_SERVICE)
const clip = android.content.ClipData.newPlainText("Reference URl", url)
const clip = android.content.ClipData.newPlainText("URl", url)
clipboard.setPrimaryClip(clip)
Toast.makeText("URL Copied").show()
},

View file

@ -2,7 +2,7 @@
<Page>
<StackLayout class="dialogContainer" :class="appTheme">
<Label class="dialogTitle orkm" :text="title" />
<ScrollView width="100%" :height="height ? height : screenHeight - 320">
<ScrollView width="100%" :height="height ? height : screenHeight - 256">
<StackLayout>
<MDButton
v-for="(item, index) in list"

View file

@ -104,9 +104,6 @@ export default new Vuex.Store({
// notes: [
// "Nutrition Facts: 3/4 cup: 409 calories, 22g fat (12g saturated fat), 61mg cholesterol, 667mg sodium, 41g carbohydrate (3g sugars, 2g fiber), 11g protein.",
// ],
// references: [
// "https://www.tasteofhome.com/recipes/mushroom-spinach-risotto/",
// ],
// isFavorite: false,
// tried: false,
// lastTried: "2020-10-28T18:19:06.528Z",
@ -180,7 +177,7 @@ export default new Vuex.Store({
trylaterOutline: "\ue94a",
note: "\ueb04",
copy: "\ue9e6",
check: "\ue9ab",
check: "\ue9a4",
telegram: "\ueec7",
time: "\ueba2",
item: "\ue99d",