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
Split 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 @@ @@ -4,9 +4,11 @@
<option name="autoReloadType" value="SELECTIVE" />
</component>
<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$/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$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
@ -47,7 +49,7 @@ @@ -47,7 +49,7 @@
<workItem from="1597348092890" duration="8205000" />
<workItem from="1597530844649" duration="131000" />
<workItem from="1597577497243" duration="3353000" />
<workItem from="1597583294362" duration="7162000" />
<workItem from="1597583294362" duration="9156000" />
</task>
<task id="LOCAL-00001" summary="Adds gitignore.">
<created>1597348071361</created>
@ -287,7 +289,14 @@ @@ -287,7 +289,14 @@
<option name="project" value="LOCAL" />
<updated>1597607090595</updated>
</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 />
</component>
<component name="TypeScriptGeneratedFilesManager">
@ -314,17 +323,19 @@ @@ -314,17 +323,19 @@
<MESSAGE value="Adds wildcards for chat." />
<MESSAGE value="Change wildcards in html" />
<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 name="WindowStateProjectService">
<state x="278" y="2" width="800" height="718" key="#Plugins" timestamp="1597350105557">
<screen x="0" y="0" width="1366" height="720" />
</state>
<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" />
</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">
<screen x="0" y="0" width="1366" height="720" />
</state>

7
app.css
Unescape View File

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

19
app.js
Unescape View File

@ -7,6 +7,8 @@ let kara = new Vue({ @@ -7,6 +7,8 @@ let kara = new Vue({
isTyping: false,
askedForName: false,
username: '',
themes: null,
activeTheme: 'slate',
addModal: {
includeAll: false,
keywords: '',
@ -45,6 +47,7 @@ let kara = new Vue({ @@ -45,6 +47,7 @@ let kara = new Vue({
},
mounted() {
this.getSavedData();
this.getBootswatchThemes();
this.settingsModal = {
name: this.name,
@ -281,6 +284,7 @@ let kara = new Vue({ @@ -281,6 +284,7 @@ let kara = new Vue({
updateStorage() {
localStorage.setItem('name', this.name);
localStorage.setItem('username', this.username);
localStorage.setItem('activeTheme', this.activeTheme);
localStorage.setItem('messages', JSON.stringify(this.messages));
localStorage.setItem('answers', JSON.stringify(this.answers));
},
@ -292,6 +296,9 @@ let kara = new Vue({ @@ -292,6 +296,9 @@ let kara = new Vue({
let savedUsername = localStorage.getItem('username');
this.username = savedUsername ? savedUsername : null;
let savedActiveTheme = localStorage.getItem('activeTheme');
this.activeTheme = savedActiveTheme ? savedActiveTheme : 'slate';
let savedMessages = JSON.parse(localStorage.getItem('messages'));
this.messages = savedMessages ? savedMessages : [];
@ -337,6 +344,18 @@ let kara = new Vue({ @@ -337,6 +344,18 @@ let kara = new Vue({
clearChat() {
this.messages = [];
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 @@ @@ -1,17 +1,15 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>
Kara
</title>
<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>
<body>
<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="btn btn-sm btn-secondary" data-toggle="modal" data-target="#settingsModal">
<i class="fas fa-sliders-h"></i>
@ -24,7 +22,7 @@ @@ -24,7 +22,7 @@
</div>
</div>
{{ this.name }}
</h5>
</div>
<div id="chat-box">
<template v-for="message in messages">
@ -56,9 +54,8 @@ @@ -56,9 +54,8 @@
</div>
</div>
<div id="chatbox-wrapper">
<div id="chatbox-wrapper" class="bg-dark">
<input
autofocus="true"
class="form-control"
id="chatinput"
type="text"
@ -83,10 +80,10 @@ @@ -83,10 +80,10 @@
<input type="text" id="keywords" v-model="addModal.keywords" class="form-control">
</div>
<div class="form-group">
<label for="responses">Responses</label>
<label>Responses</label>
<small>(Wildcards: $username$, $botname$)</small>
<template v-for="(key, responseOption) in addModal.responses">
<input type="text" v-model="addModal.responses[responseOption]" class="form-control response-input">
<template v-for="(responseOptionKey, responseOption) in addModal.responses">
<input type="text" v-model="addModal.responses[responseOptionKey]" class="form-control response-input">
</template>
<div class="float-right">
<button class="btn-sm btn-success" @click="addResponseToInput">+</button>
@ -116,6 +113,12 @@ @@ -116,6 +113,12 @@
<label for="username">What's your name?</label>
<input type="text" class="form-control" id="username" v-model="settingsModal.username">
</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">
<label>Data</label>
<div class="row">
@ -139,6 +142,8 @@ @@ -139,6 +142,8 @@
</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>
@ -148,10 +153,8 @@ @@ -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://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://code.jquery.com/jquery-3.5.1.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="app.js">
</script>
</body>

Write Preview
Loading…
Cancel
Save