1.07

* Accepted [PR from loljoshie](#1). Which changed around the color scheme of the ui, logo to svg, added sounds, and locale support.
* Changed close button to a reset button
* Moved around order of items in the ui to make more sense
* Updated README

Author: ItsANoBrainer

README.md

@@ -1,9 +1,11 @@
+
 # QBCore Scenes
-Original ui, util code, and inspiration from [loljoshie's nuidrawtext](https://github.com/loljoshie/nui_drawtext).
+Original ui, util code, and inspiration from [loljoshie's nui_drawtext](https://github.com/loljoshie/nui_drawtext).
 
 I really liked LJ's scenes implementation, but I wanted to do a lot of refactor on it, as well as add some custom work from myself, so I did!
 
-Scenes lets you place drawtext anywhere in the world, through the NUI menu, and laser pointers.
+Scenes lets you place drawtext anywhere in the world, through the NUI menu, and laser pointers. This drawtext can include emojis, be multiple lines, and supports markdown! If you don't like the way a scene looks before you place it, you can easily edit it!
+
 # Setup
 1. Import scenes.sql into your database
 2. Adjust values in the `shared/config.lua` file to your likings.
@@ -18,10 +20,9 @@ Scenes lets you place drawtext anywhere in the world, through the NUI menu, and
 * Markdown, emojis, and multiple lines supported
 * Configurable logo
 
-
 # Example Usage
 ## Interface Examples
-![Interface](https://i.imgur.com/hdYdn0i.png)
+![Interface](https://i.imgur.com/MfbG070.png)
 ### Creation Laser
 ![Creation Laser](https://i.imgur.com/NtQZp8p.png)
 ### Deletion Laser
@@ -31,5 +32,19 @@ Scenes lets you place drawtext anywhere in the world, through the NUI menu, and
 
 
 # Change Log
+### 1.07
+* Accepted [PR from loljoshie](https://github.com/ItsANoBrainer/qb-scenes/pull/1). Which changed around the color scheme of the ui, logo to svg, added sounds, and locale support.
+* Changed close button to a reset button
+* Moved around order of items in the ui to make more sense
+* Updated README
+
 ### 1.0
 * Initial release
+
+# Future ToDos
+* Refactor VUE code to allow for resetting values after placement
+* Add config option to only allow posting scenes if you have an item (Poster?)
+* Add more scene settings (maybe an advanced tab?) (text outline)
+* Add background settings (Type, height/width, color, opacity, x/y location, rotation)
+* Add interaction function when E is pressed nearby. This will let users bind any command on press.
+* Be able to preview your changes live on the screen instead of having to submit and check

fxmanifest.lua

@@ -3,7 +3,7 @@ games { 'gta5' }
 
 author 'ItsANoBrainer'
 description 'QB-Core Scenes'
-version '1.0.0'
+version '1.0.7'
 
 ui_page 'html/index.html'
 

html/app.js

@@ -53,8 +53,7 @@ const app = Vue.createApp({
 				SendPostRequest('DeleteLaser')
 				CloseMenu()
 			},
-			onCancel() {
-				CloseMenu()
+			onReset() {
 				text.value = null
 				color.value = '#ffffff'
 				expiration.value = '1 hour'

html/index.html

@@ -24,7 +24,7 @@
 						</template>
 					</q-input>
 
-					<q-input dark hint="Color of text" v-model="color" class="my-input"
+					<q-input dark hint="Text Color" v-model="color" class="my-input"
 						color="field" label="Color">
 						<template v-slot:prepend>
 							<q-icon name="palette"/>
@@ -49,6 +49,16 @@
 					</q-item>
 					<q-item-label class="slidertext">Font Size</q-item-label>
 
+					<q-item class="slideritem">
+						<q-item-section avatar>
+							<q-icon color="slider" name="title"/>
+						</q-item-section>
+						<q-item-section>
+							<q-slider dark label-always v-model="fontstyle" :min="1" :max="5" label color="sliderb"/>
+						</q-item-section>
+					</q-item>
+					<q-item-label class="slidertext">Font style</q-item-label>
+
 					<q-item class="slideritem">
 						<q-item-section avatar>
 							<q-icon color="slider" name="social_distance"/>
@@ -59,30 +69,20 @@
 					</q-item>
 					<q-item-label class="slidertext">View Distance</q-item-label>
 
-					<q-select hint="Time before expiration." dark v-model="expiration" :options="expirationOptions" color="field"
+					<q-select hint="Expiration Time" dark v-model="expiration" :options="expirationOptions" color="field"
 						label="Expiration Time">
 						<template v-slot:prepend>
 							<q-icon name="schedule"/>
 						</template>
 					</q-select>
 
-					<q-item class="slideritem">
-						<q-item-section avatar>
-							<q-icon color="slider" name="title"/>
-						</q-item-section>
-						<q-item-section>
-							<q-slider dark label-always v-model="fontstyle" :min="1" :max="5" label color="sliderb"/>
-						</q-item-section>
-					</q-item>
-					<q-item-label class="slidertext">Font style</q-item-label>
-
 					<div class="row justify-center">
 						<q-btn style="margin-right: 1vh;" class="Close" label="Create" type="submit" text-color="black"
 							color="button"></q-btn>
 						<q-btn v-on:click="onDelete()" style="margin-right: 1vh;" class="delete" label="Delete"
 							text-color="black" color="buttondel"></q-btn>
-						<q-btn v-on:click="onCancel()" style="margin-right: 1vh;" class="cancel" label="Cancel"
-							text-color="black" color="buttoncancel"></q-btn>
+						<q-btn v-on:click="onReset()" style="margin-right: 1vh;" class="cancel" label="Reset"
+							text-color="black" color="buttonreset"></q-btn>
 					</div>
 				</q-form>
 			</div>

html/styles.css

@@ -5,7 +5,7 @@
 .text-slider { color: #ffffffb3!important; }
 .bg-button { background: #70f145!important; }
 .bg-buttondel { background: rgb(220 20 60)!important; }
-.bg-buttoncancel { background: rgb(106, 106, 106)!important; }
+.bg-buttonreset { background: rgb(106, 106, 106)!important; }
 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none!important; margin: 0; }
 div#q-loading-bar { display: none!important; }
 ::-webkit-scrollbar { display: none!important; }