Styles for board controls and remove old stylesheet
Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl
40
css/globalstyles.scss
Normal file
40
css/globalstyles.scss
Normal file
@@ -0,0 +1,40 @@
|
||||
/*
|
||||
* @copyright Copyright (c) 2016 Julius Härtl <jus@bitgrid.net>
|
||||
*
|
||||
* @author Julius Härtl <jus@bitgrid.net>
|
||||
* @author Artem Anufrij <artem.anufrij@live.de>
|
||||
* @author Marin Treselj <marin@pixelipo.com>
|
||||
* @author Oskar Kurz <oskar.kurz@gmail.com>
|
||||
* @author Ryan Fletcher <ryan.fletcher@codepassion.ca>
|
||||
*
|
||||
* @license GNU AGPL version 3 or any later version
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*
|
||||
*/
|
||||
|
||||
// colors
|
||||
$color-warning-light: nc-lighten($color-warning, 15%);
|
||||
$color-lightgrey: nc-darken($color-main-background, 4%);
|
||||
$color-grey: nc-darken($color-main-background, 7%);
|
||||
$color-darkgrey: nc-darken($color-main-background, 32%);
|
||||
|
||||
// margins/paddings
|
||||
$board-item-margin: 10px 10px 20px 10px;
|
||||
$board-last-item-margin: 10px;
|
||||
|
||||
$compact-board-item-margin: 5px 10px 10px 10px;
|
||||
$compact-board-last-item-margin: 5px 10px 10px;
|
||||
|
||||
@import 'icons';
|
||||
@@ -32,6 +32,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="board" class="crumb svg">
|
||||
<div class="board-bullet"></div>
|
||||
<a href="#todo">{{ board.title }}</a>
|
||||
<span style="display: inline;" class="icon-shared" />
|
||||
</div>
|
||||
@@ -41,21 +42,15 @@
|
||||
<label for="new-stack-input-main" class="hidden-visually">Add a new stack</label>
|
||||
<input id="new-stack-input-main" type="text" class="no-close"
|
||||
placeholder="Add a new stack">
|
||||
<button class="button-inline icon icon-add" type="submit" title="Submit">
|
||||
<span class="hidden-visually">Submit</span>
|
||||
</button>
|
||||
<input class="icon-confirm" type="button" title="Submit" />
|
||||
</form>
|
||||
</div>
|
||||
<button title="Show archived cards">
|
||||
<i class="icon icon-archive" />
|
||||
<span class="hidden-visually">Show archived cards</span>
|
||||
</button>
|
||||
<button title="Toggle compact mode">
|
||||
<i class="icon icon-toggle-compact-expanded" />
|
||||
<span class="hidden-visually">Toggle compact mode</span>
|
||||
</button>
|
||||
<router-link v-tooltip="t('deck', 'Board settings')" :to="{name: 'board.details'}" class="icon-settings"
|
||||
tag="button" />
|
||||
<div class="board-action-buttons">
|
||||
<button title="Show archived cards" class="icon icon-archive" />
|
||||
<button title="Toggle compact mode" class="icon icon-toggle-compact-expanded" />
|
||||
<router-link v-tooltip="t('deck', 'Board settings')" :to="{name: 'board.details'}" class="icon-settings-dark"
|
||||
tag="button" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -83,6 +78,45 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.controls {
|
||||
.crumb {
|
||||
order: 0;
|
||||
|
||||
a:nth-child(2),
|
||||
a:nth-child(3) {
|
||||
padding-left: 0;
|
||||
margin-left: -5px;
|
||||
}
|
||||
|
||||
a .icon {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.board-bullet {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background-color: #aaa;
|
||||
margin: 12px;
|
||||
margin-left: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
#stack-add form {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
#app-navigation-toggle-custom {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
display: inline-block !important;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
@@ -98,8 +132,21 @@ export default {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
button.icon-settings {
|
||||
width: 44px;
|
||||
|
||||
.board-action-buttons {
|
||||
display: flex;
|
||||
padding: 3px 4px 7px 4px;
|
||||
button {
|
||||
border-radius: 0;
|
||||
width: 44px;
|
||||
margin: 0 0 0 -1px;
|
||||
}
|
||||
button:first-child {
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
button:last-child {
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -21,7 +21,9 @@
|
||||
-->
|
||||
|
||||
<template>
|
||||
<div id="app-sidebar">
|
||||
<router-view name="sidebar" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
|
||||
use OCP\Util;
|
||||
|
||||
style('deck', 'style');
|
||||
style('deck', 'globalstyles');
|
||||
script('deck', 'deck');
|
||||
|
||||
\OC::$server->getEventDispatcher()->dispatch('\OCP\Collaboration\Resources::loadAdditionalScripts');
|
||||
|
||||
Reference in New Issue
Block a user