Mercurial > gemma

annotate client/src/components/ui/UIBoxHeader.vue @ 2629:85927d27c84e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: box header: rounded corners style fix
author Markus Kottlaender <markus@intevation.de>
date Wed, 13 Mar 2019 16:32:32 +0100
parents 83b938bf4da9
children 7a0e468d3832
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
2566
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
2 <h6 :class="['box-header', { 'rounded border-0 shadow-xs': collapsed }]">
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
3 <span class="box-title">
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
4 <font-awesome-icon
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
5 :icon="icon"
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
6 class="box-icon"
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
7 v-if="icon"
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
8 fixed-width
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
9 />
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
10 {{ $gettext(title) }}
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
11 </span>
2549
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
12 <div class="box-controls">
2566
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
13 <span @click="collapseCallback" v-if="!collapsed && collapseCallback">
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
14 <font-awesome-icon :icon="['far', 'window-minimize']" />
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
15 </span>
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
16 <span @click="expandCallback" v-if="collapsed && expandCallback">
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
17 <font-awesome-icon :icon="['far', 'window-maximize']" />
2549
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
18 </span>
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
19 <span @click="closeCallback" v-if="closeCallback">
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
20 <font-awesome-icon icon="times" />
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
21 </span>
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
22 </div>
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
23 </h6>
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
24 </template>
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
26 <style lang="sass">
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
27 .box-header
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
28 display: flex
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29 justify-content: space-between
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30 align-items: center
2549
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
31 min-height: 34px
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 padding-left: .5rem
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 border-bottom: 1px solid #dee2e6
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 color: $color-info
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35 margin-bottom: 0
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 padding: 0.25rem
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 font-weight: bold
2566
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
38 background: white
2629
85927d27c84e client: box header: rounded corners style fix
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
39 border-top-left-radius: .25rem
85927d27c84e client: box header: rounded corners style fix
Markus Kottlaender <markus@intevation.de>
parents: 2566
diff changeset
40 border-top-right-radius: .25rem
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41 .box-title
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42 padding-left: 0.25rem
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
43 .box-icon
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
44 margin-right: 0.25rem
2549
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
45 .box-controls
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
46 span
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
47 display: inline-block
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
48 margin-left: 3px
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
49 color: #888
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
50 padding: 3px 7px
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
51 border-radius: 0.25rem
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
52 cursor: pointer
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
53 transition: background-color 0.3s, color 0.3s
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
54 &:hover
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
55 color: #666
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
56 background-color: #eee
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 </style>
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 <script>
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 /* This is Free Software under GNU Affero General Public License v >= 3.0
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 * without warranty, see README.md and license for details.
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 *
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 * SPDX-License-Identifier: AGPL-3.0-or-later
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 * License-Filename: LICENSES/AGPL-3.0.txt
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 *
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 * Copyright (C) 2018 by via donau
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 * – Österreichische Wasserstraßen-Gesellschaft mbH
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 * Software engineering by Intevation GmbH
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 *
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 * Author(s):
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 * Markus Kottländer <markus.kottlaender@intevation.de>
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 */
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 export default {
2566
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
75 props: [
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
76 "icon",
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
77 "title",
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
78 "collapseCallback",
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
79 "closeCallback",
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
80 "expandCallback",
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
81 "collapsed"
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
82 ]
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
83 };
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
84 </script>