Mercurial > gemma

annotate client/src/components/ui/UIBoxHeader.vue @ 2549:9bf6b767a56a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: refactored and improved splitscreen for diagrams To make different diagrams possible, the splitscreen view needed to be decoupled from the cross profiles. Also the style has changed to make it more consistent with the rest of the app. The standard box header is now used and there are collapse and expand animations.
author Markus Kottlaender <markus@intevation.de>
date Fri, 08 Mar 2019 08:50:47 +0100
parents 02d30251d594
children 83b938bf4da9
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>
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
2 <h6 class="box-header">
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">
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
13 <span @click="collapseCallback" v-if="collapseCallback">
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
14 <font-awesome-icon icon="angle-down" />
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
15 </span>
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
16 <span @click="closeCallback" v-if="closeCallback">
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
17 <font-awesome-icon icon="times" />
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 </div>
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
20 </h6>
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
21 </template>
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
22
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
23 <style lang="sass">
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
24 .box-header
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25 display: flex
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
26 justify-content: space-between
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
27 align-items: center
2549
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
28 min-height: 34px
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29 padding-left: .5rem
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30 border-bottom: 1px solid #dee2e6
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 color: $color-info
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 margin-bottom: 0
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 padding: 0.25rem
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 font-weight: bold
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35 .box-title
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 padding-left: 0.25rem
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 .box-icon
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
38 margin-right: 0.25rem
2549
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
39 .box-controls
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
40 span
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
41 display: inline-block
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
42 margin-left: 3px
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
43 color: #888
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
44 padding: 3px 7px
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
45 border-radius: 0.25rem
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
46 cursor: pointer
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
47 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
48 &:hover
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
49 color: #666
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
50 background-color: #eee
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 </style>
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 <script>
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54 /* 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
55 * without warranty, see README.md and license for details.
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 *
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 * SPDX-License-Identifier: AGPL-3.0-or-later
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 * License-Filename: LICENSES/AGPL-3.0.txt
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 *
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 * Copyright (C) 2018 by via donau
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 * – Österreichische Wasserstraßen-Gesellschaft mbH
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 * Software engineering by Intevation GmbH
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 *
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 * Author(s):
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 * Markus Kottländer <markus.kottlaender@intevation.de>
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 */
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 export default {
2549
9bf6b767a56a client: refactored and improved splitscreen for diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2408
diff changeset
69 props: ["icon", "title", "collapseCallback", "closeCallback"]
2408
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 };
02d30251d594 client: table component for unified style
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 </script>