LunaDev
/
kara
1
1
Fork 0
Code Issues 14 Releases 1 Wiki Activity
Browse Source

Adds setting for themes

master
Nero Ignis 5 years ago
parent
945939cf9e
commit
f3510305ab
4 changed files with 56 additions and 26 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 23
      .idea/workspace.xml
  2. 7
      app.css
  3. 19
      app.js
  4. 33
      index.html

23
.idea/workspace.xml
Unescape View File

@ -4,9 +4,11 @@
<option name="autoReloadType" value="SELECTIVE" /> <option name="autoReloadType" value="SELECTIVE" />
</component> </component>
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="e3f098f0-e98c-435a-af04-d153c9525633" name="Default Changelist" comment=""> <list default="true" id="e3f098f0-e98c-435a-af04-d153c9525633" name="Default Changelist" comment="Adds setting for themes">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/app.css" beforeDir="false" afterPath="$PROJECT_DIR$/app.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/app.js" beforeDir="false" afterPath="$PROJECT_DIR$/app.js" afterDir="false" /> <change beforePath="$PROJECT_DIR$/app.js" beforeDir="false" afterPath="$PROJECT_DIR$/app.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" /> <option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -47,7 +49,7 @@
<workItem from="1597348092890" duration="8205000" /> <workItem from="1597348092890" duration="8205000" />
<workItem from="1597530844649" duration="131000" /> <workItem from="1597530844649" duration="131000" />
<workItem from="1597577497243" duration="3353000" /> <workItem from="1597577497243" duration="3353000" />
<workItem from="1597583294362" duration="7162000" /> <workItem from="1597583294362" duration="9156000" />
</task> </task>
<task id="LOCAL-00001" summary="Adds gitignore."> <task id="LOCAL-00001" summary="Adds gitignore.">
<created>1597348071361</created> <created>1597348071361</created>
@ -287,7 +289,14 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1597607090595</updated> <updated>1597607090595</updated>
</task> </task>
<option name="localTasksCounter" value="35" /> <task id="LOCAL-00035" summary="Adds answers for telling the time, day of the week and the date.">
<created>1597607586663</created>
<option name="number" value="00035" />
<option name="presentableId" value="LOCAL-00035" />
<option name="project" value="LOCAL" />
<updated>1597607586663</updated>
</task>
<option name="localTasksCounter" value="36" />
<servers /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <component name="TypeScriptGeneratedFilesManager">
@ -314,17 +323,19 @@
<MESSAGE value="Adds wildcards for chat." /> <MESSAGE value="Adds wildcards for chat." />
<MESSAGE value="Change wildcards in html" /> <MESSAGE value="Change wildcards in html" />
<MESSAGE value="Adds js for bootstrap &amp; moment.js;" /> <MESSAGE value="Adds js for bootstrap &amp; moment.js;" />
<option name="LAST_COMMIT_MESSAGE" value="Adds js for bootstrap &amp; moment.js;" /> <MESSAGE value="Adds answers for telling the time, day of the week and the date." />
<MESSAGE value="Adds setting for themes" />
<option name="LAST_COMMIT_MESSAGE" value="Adds setting for themes" />
</component> </component>
<component name="WindowStateProjectService"> <component name="WindowStateProjectService">
<state x="278" y="2" width="800" height="718" key="#Plugins" timestamp="1597350105557"> <state x="278" y="2" width="800" height="718" key="#Plugins" timestamp="1597350105557">
<screen x="0" y="0" width="1366" height="720" /> <screen x="0" y="0" width="1366" height="720" />
</state> </state>
<state x="278" y="2" width="800" height="718" key="#Plugins/0.0.1366.720@0.0.1366.720" timestamp="1597350105557" /> <state x="278" y="2" width="800" height="718" key="#Plugins/0.0.1366.720@0.0.1366.720" timestamp="1597350105557" />
<state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2" timestamp="1597607090553"> <state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2" timestamp="1597609457255">
<screen x="0" y="0" width="1366" height="720" /> <screen x="0" y="0" width="1366" height="720" />
</state> </state>
<state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2/0.0.1366.720@0.0.1366.720" timestamp="1597607090553" /> <state x="222" y="0" width="912" height="720" key="CommitChangelistDialog2/0.0.1366.720@0.0.1366.720" timestamp="1597609457255" />
<state x="466" y="118" width="424" height="490" key="FileChooserDialogImpl" timestamp="1597353496276"> <state x="466" y="118" width="424" height="490" key="FileChooserDialogImpl" timestamp="1597353496276">
<screen x="0" y="0" width="1366" height="720" /> <screen x="0" y="0" width="1366" height="720" />
</state> </state>

7
app.css
Unescape View File

@ -7,7 +7,6 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: auto; width: auto;
color: white;
} }
.message { .message {
@ -19,12 +18,12 @@ body {
} }
.bot-message { .bot-message {
border-radius: 0px 15px 15px 15px; border-radius: 0 15px 15px 15px;
background-color: lightgreen; background-color: lightgreen;
} }
.user-message { .user-message {
border-radius: 15px 0px 15px 15px; border-radius: 15px 0 15px 15px;
background-color: lightblue; background-color: lightblue;
} }
@ -41,7 +40,6 @@ body {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
background-color: #515960;
} }
#kara-banner { #kara-banner {
@ -52,7 +50,6 @@ body {
right: 0; right: 0;
text-align: center; text-align: center;
padding: 0.7em; padding: 0.7em;
background-color: #515960;
} }
#kara-banner .btn, .add-response-input-button { #kara-banner .btn, .add-response-input-button {

19
app.js
Unescape View File

@ -7,6 +7,8 @@ let kara = new Vue({
isTyping: false, isTyping: false,
askedForName: false, askedForName: false,
username: '', username: '',
themes: null,
activeTheme: 'slate',
addModal: { addModal: {
includeAll: false, includeAll: false,
keywords: '', keywords: '',
@ -45,6 +47,7 @@ let kara = new Vue({
}, },
mounted() { mounted() {
this.getSavedData(); this.getSavedData();
this.getBootswatchThemes();
this.settingsModal = { this.settingsModal = {
name: this.name, name: this.name,
@ -281,6 +284,7 @@ let kara = new Vue({
updateStorage() { updateStorage() {
localStorage.setItem('name', this.name); localStorage.setItem('name', this.name);
localStorage.setItem('username', this.username); localStorage.setItem('username', this.username);
localStorage.setItem('activeTheme', this.activeTheme);
localStorage.setItem('messages', JSON.stringify(this.messages)); localStorage.setItem('messages', JSON.stringify(this.messages));
localStorage.setItem('answers', JSON.stringify(this.answers)); localStorage.setItem('answers', JSON.stringify(this.answers));
}, },
@ -292,6 +296,9 @@ let kara = new Vue({
let savedUsername = localStorage.getItem('username'); let savedUsername = localStorage.getItem('username');
this.username = savedUsername ? savedUsername : null; this.username = savedUsername ? savedUsername : null;
let savedActiveTheme = localStorage.getItem('activeTheme');
this.activeTheme = savedActiveTheme ? savedActiveTheme : 'slate';
let savedMessages = JSON.parse(localStorage.getItem('messages')); let savedMessages = JSON.parse(localStorage.getItem('messages'));
this.messages = savedMessages ? savedMessages : []; this.messages = savedMessages ? savedMessages : [];
@ -337,6 +344,18 @@ let kara = new Vue({
clearChat() { clearChat() {
this.messages = []; this.messages = [];
this.botMessage('Chat cleared.'); this.botMessage('Chat cleared.');
},
getBootswatchThemes() {
let vue = this;
axios.get('https://bootswatch.com/api/4.json')
.then(function (response) {
console.log(response.data.themes);
vue.themes = response.data.themes;
})
.catch(function (error) {
console.log(error);
})
} }
} }
}) })

33
index.html
Unescape View File

@ -1,17 +1,15 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<title> <title>
Kara Kara
</title> </title>
<link href="https://bootswatch.com/4/slate/bootstrap.min.css" rel="stylesheet" type="text/css"/> <link href="https://bootswatch.com/4/slate/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="app.css" rel="stylesheet" type="text/css"/> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no" name="viewport">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no"
name="viewport">
</head> </head>
<body> <body>
<div class="container-fluid" id="kara"> <div class="container-fluid" id="kara">
<h5 id="kara-banner"> <div id="kara-banner" class="bg-dark text-light">
<div class="float-right"> <div class="float-right">
<div class="btn btn-sm btn-secondary" data-toggle="modal" data-target="#settingsModal"> <div class="btn btn-sm btn-secondary" data-toggle="modal" data-target="#settingsModal">
<i class="fas fa-sliders-h"></i> <i class="fas fa-sliders-h"></i>
@ -24,7 +22,7 @@
</div> </div>
</div> </div>
{{ this.name }} {{ this.name }}
</h5> </div>
<div id="chat-box"> <div id="chat-box">
<template v-for="message in messages"> <template v-for="message in messages">
@ -56,9 +54,8 @@
</div> </div>
</div> </div>
<div id="chatbox-wrapper"> <div id="chatbox-wrapper" class="bg-dark">
<input <input
autofocus="true"
class="form-control" class="form-control"
id="chatinput" id="chatinput"
type="text" type="text"
@ -83,10 +80,10 @@
<input type="text" id="keywords" v-model="addModal.keywords" class="form-control"> <input type="text" id="keywords" v-model="addModal.keywords" class="form-control">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="responses">Responses</label> <label>Responses</label>
<small>(Wildcards: $username$, $botname$)</small> <small>(Wildcards: $username$, $botname$)</small>
<template v-for="(key, responseOption) in addModal.responses"> <template v-for="(responseOptionKey, responseOption) in addModal.responses">
<input type="text" v-model="addModal.responses[responseOption]" class="form-control response-input"> <input type="text" v-model="addModal.responses[responseOptionKey]" class="form-control response-input">
</template> </template>
<div class="float-right"> <div class="float-right">
<button class="btn-sm btn-success" @click="addResponseToInput">+</button> <button class="btn-sm btn-success" @click="addResponseToInput">+</button>
@ -116,6 +113,12 @@
<label for="username">What's your name?</label> <label for="username">What's your name?</label>
<input type="text" class="form-control" id="username" v-model="settingsModal.username"> <input type="text" class="form-control" id="username" v-model="settingsModal.username">
</div> </div>
<div class="form-group">
<label for="theme">Pick a theme</label>
<select name="theme" class="form-control" id="theme" v-model="activeTheme" @change="updateStorage()">
<option v-for="theme in themes" :value="theme.name.toLowerCase()" v-text="theme.name"></option>
</select>
</div>
<div class="form-group"> <div class="form-group">
<label>Data</label> <label>Data</label>
<div class="row"> <div class="row">
@ -139,6 +142,8 @@
</div> </div>
</div> </div>
</div> </div>
<link rel="stylesheet" :href="'https://maxcdn.bootstrapcdn.com/bootswatch/4.3.1/' + activeTheme + '/bootstrap.min.css'">
<link href="app.css" rel="stylesheet" type="text/css"/>
</div> </div>
@ -148,10 +153,8 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"> <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<script src="app.js"> <script src="app.js">
</script> </script>
</body> </body>

Write Preview
Loading…
Cancel
Save