lightcordwarez
/
BetterDiscordApp-v2
mirror of https://github.com/JsSucks/BetterDiscordApp
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

Start baking material icons straight in

This commit is contained in:
Jiiks 2018-02-03 01:45:00 +02:00
parent 20c9dacf71
commit f18c594744
11 changed files with 206 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
client/src/styles/partials/bdsettings/sidebarview.scss
View File

@ -64,20 +64,14 @@
cursor: pointer;
&:hover {
.material-design-icon {
.bd-material-design-icon {
fill: #FFF;
}
}
}
.material-design-icon {
.bd-material-design-icon {
fill: #414245;
svg {
width: 16px;
height: 16px;
}
&:hover {
fill: #FFF;
}

11
client/src/ui/components/BdSettings.vue
View File

@ -20,10 +20,10 @@
<div class="bd-info">
<span class="bd-vtext">v2.0.0a by Jiiks/JsSucks</span>
<div @click="openGithub" v-tooltip="'Github'" class="bd-material-button">
<MiGithub/>
<MaterialIcon name="github-circle" size="16"/>
</div>
<div @click="openWebsite" v-tooltip="'BetterDiscord'" class="bd-material-button">
<MiWeb/>
<MaterialIcon name="web" size="16"/>
</div>
</div>
</Sidebar>
@ -53,7 +53,7 @@
import { Settings } from 'modules';
import { SidebarView, Sidebar, SidebarItem, ContentColumn } from './sidebar';
import { CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView } from './bd';
import { SvgX } from './common';
import { SvgX, MaterialIcon } from './common';
import MiGithub from 'vue-material-design-icons/github-circle.vue';
import MiWeb from 'vue-material-design-icons/web.vue';
@ -88,9 +88,8 @@
},
components: {
SidebarView, Sidebar, SidebarItem, ContentColumn,
CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView,
SvgX,
MiGithub, MiWeb
CoreSettings, UISettings, EmoteSettings, CssEditorView, PluginsView, MaterialIcon,
SvgX
},
methods: {
itemOnClick(id) {

17
client/src/ui/components/bd/PluginCard.vue
View File

@ -25,16 +25,16 @@
<div class="bd-controls">
<ButtonGroup>
<Button v-tooltip="'Settings'" v-if="plugin.hasSettings" :onClick="() => showSettings(plugin)">
<MiSettings />
<MaterialIcon name="settings" size="18"/>
</Button>
<Button v-tooltip="'Reload'" :onClick="() => reloadPlugin(plugin)">
<MiReload />
<MaterialIcon name="refresh" size="18" />
</Button>
<Button v-tooltip="'Edit'" :onClick="editPlugin">
<MiEdit />
<MaterialIcon name="pencil" size="18" />
</Button>
<Button v-tooltip="'Uninstall'" type="err">
<MiDelete />
<MaterialIcon name="delete" size="18" />
</Button>
</ButtonGroup>
</div>
@ -45,11 +45,7 @@
<script>
// Imports
import { shell } from 'electron';
import { Button, ButtonGroup, SettingSwitch } from '../common';
import MiSettings from 'vue-material-design-icons/settings.vue';
import MiReload from 'vue-material-design-icons/refresh.vue';
import MiEdit from 'vue-material-design-icons/pencil.vue';
import MiDelete from 'vue-material-design-icons/delete.vue';
import { Button, ButtonGroup, SettingSwitch, MaterialIcon } from '../common';
export default {
data() {
@ -59,8 +55,7 @@
},
props: ['plugin', 'togglePlugin', 'reloadPlugin', 'showSettings'],
components: {
Button, ButtonGroup, SettingSwitch,
MiSettings, MiReload, MiEdit, MiDelete
Button, ButtonGroup, SettingSwitch, MaterialIcon
},
methods: {
editPlugin() {

30
client/src/ui/components/common/MaterialIcon.vue Normal file
View File

@ -0,0 +1,30 @@
<template>
<Settings v-if="name === 'settings'" :size="size"/>
<Refresh v-else-if="name === 'refresh'" :size="size" />
<Pencil v-else-if="name === 'pencil'" :size="size"/>
<Delete v-else-if="name === 'delete'" :size="size" />
<GithubCircle v-else-if="name === 'github-circle'" :size="size" />
<Web v-else-if="name === 'web'" :size="size" />
<span v-else></span>
</template>
<script>
// Imports
import Settings from './materialicons/Settings.vue';
import Refresh from './materialicons/Refresh.vue';
import Pencil from './materialicons/Pencil.vue';
import Delete from './materialicons/Delete.vue';
import GithubCircle from './materialicons/GithubCircle.vue';
import Web from './materialicons/Web.vue';
export default {
props: ['name', 'size'],
components: {
Settings,
Refresh,
Pencil,
Delete,
GithubCircle,
Web
}
}
</script>

1
client/src/ui/components/common/index.js
View File

@ -5,3 +5,4 @@ export { default as ButtonGroup } from './ButtonGroup.vue';
export { default as Button } from './Button.vue';
export { default as Modal } from './Modal.vue';
export { default as SvgX } from './SvgX.vue';
export { default as MaterialIcon } from './MaterialIcon.vue';

27
client/src/ui/components/common/materialicons/Delete.vue Normal file
View File

@ -0,0 +1,27 @@
/**
* BetterDiscord Material Design Icon
* Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
* All rights reserved.
* https://betterdiscord.net
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* Material Design Icons
* Copyright (c) 2014 Google
* Apache 2.0 LICENSE
* https://www.apache.org/licenses/LICENSE-2.0.txt
*/
<template>
<span class="bd-material-design-icon">
<svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
<path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19C6,20.1 6.9,21 8,21H16C17.1,21 18,20.1 18,19V7H6V19Z"></path>
</svg>
</span>
</template>
<script>
export default {
props: ['size']
}
</script>

27
client/src/ui/components/common/materialicons/GithubCircle.vue Normal file
View File

@ -0,0 +1,27 @@
/**
* BetterDiscord Material Design Icon
* Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
* All rights reserved.
* https://betterdiscord.net
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* Material Design Icons
* Copyright (c) 2014 Google
* Apache 2.0 LICENSE
* https://www.apache.org/licenses/LICENSE-2.0.txt
*/
<template>
<span class="bd-material-design-icon">
<svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
<path d="M12,2C6.48,2 2,6.48 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12C22,6.48 17.52,2 12,2Z"></path>
</svg>
</span>
</template>
<script>
export default {
props: ['size']
}
</script>

27
client/src/ui/components/common/materialicons/Pencil.vue Normal file
View File

@ -0,0 +1,27 @@
/**
* BetterDiscord Material Design Icon
* Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
* All rights reserved.
* https://betterdiscord.net
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* Material Design Icons
* Copyright (c) 2014 Google
* Apache 2.0 LICENSE
* https://www.apache.org/licenses/LICENSE-2.0.txt
*/
<template>
<span class="bd-material-design-icon">
<svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
<path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z"></path>
</svg>
</span>
</template>
<script>
export default {
props: ['size']
}
</script>

27
client/src/ui/components/common/materialicons/Refresh.vue Normal file
View File

@ -0,0 +1,27 @@
/**
* BetterDiscord Material Design Icon
* Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
* All rights reserved.
* https://betterdiscord.net
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* Material Design Icons
* Copyright (c) 2014 Google
* Apache 2.0 LICENSE
* https://www.apache.org/licenses/LICENSE-2.0.txt
*/
<template>
<span class="bd-material-design-icon">
<svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
<path d="M17.65,6.35C16.2,4.9 14.21,4 12,4C7.58,4 4,7.58 4,12C4,16.42 7.58,20 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18C8.69,18 6,15.31 6,12C6,8.69 8.69,6 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z"></path>
</svg>
</span>
</template>
<script>
export default {
props: ['size']
}
</script>

27
client/src/ui/components/common/materialicons/Settings.vue Normal file
View File

@ -0,0 +1,27 @@
/**
* BetterDiscord Material Design Icon
* Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
* All rights reserved.
* https://betterdiscord.net
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* Material Design Icons
* Copyright (c) 2014 Google
* Apache 2.0 LICENSE
* https://www.apache.org/licenses/LICENSE-2.0.txt
*/
<template>
<span class="bd-material-design-icon">
<svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
<path d="M12,15.5C10.07,15.5 8.5,13.93 8.5,12C8.5,10.07 10.07,8.5 12,8.5C13.93,8.5 15.5,10.07 15.5,12C15.5,13.93 13.93,15.5 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"></path>
</svg>
</span>
</template>
<script>
export default {
props: ['size']
}
</script>

27
client/src/ui/components/common/materialicons/Web.vue Normal file
View File

@ -0,0 +1,27 @@
/**
* BetterDiscord Material Design Icon
* Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
* All rights reserved.
* https://betterdiscord.net
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* Material Design Icons
* Copyright (c) 2014 Google
* Apache 2.0 LICENSE
* https://www.apache.org/licenses/LICENSE-2.0.txt
*/
<template>
<span class="bd-material-design-icon">
<svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
<path d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2Z"></path>
</svg>
</span>
</template>
<script>
export default {
props: ['size']
}
</script>