Mercurial > gemma

comparison 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
comparison
equal deleted inserted replaced
2548:6b34d0fb4498 2549:9bf6b767a56a
7 v-if="icon" 7 v-if="icon"
8 fixed-width 8 fixed-width
9 /> 9 />
10 {{ $gettext(title) }} 10 {{ $gettext(title) }}
11 </span> 11 </span>
12 <span class="box-close" @click="closeCallback" v-if="closeCallback"> 12 <div class="box-controls">
13 <font-awesome-icon icon="times" /> 13 <span @click="collapseCallback" v-if="collapseCallback">
14 </span> 14 <font-awesome-icon icon="angle-down" />
15 </span>
16 <span @click="closeCallback" v-if="closeCallback">
17 <font-awesome-icon icon="times" />
18 </span>
19 </div>
15 </h6> 20 </h6>
16 </template> 21 </template>
17 22
18 <style lang="sass"> 23 <style lang="sass">
19 .box-header 24 .box-header
20 display: flex 25 display: flex
21 justify-content: space-between 26 justify-content: space-between
22 align-items: center 27 align-items: center
23 min-height: 35px 28 min-height: 34px
24 padding-left: .5rem 29 padding-left: .5rem
25 border-bottom: 1px solid #dee2e6 30 border-bottom: 1px solid #dee2e6
26 color: $color-info 31 color: $color-info
27 margin-bottom: 0 32 margin-bottom: 0
28 padding: 0.25rem 33 padding: 0.25rem
29 font-weight: bold 34 font-weight: bold
30 .box-title 35 .box-title
31 padding-left: 0.25rem 36 padding-left: 0.25rem
32 .box-icon 37 .box-icon
33 margin-right: 0.25rem 38 margin-right: 0.25rem
34 .box-close 39 .box-controls
35 color: #888 40 span
36 padding: 3px 7px 41 display: inline-block
37 border-radius: 0.25rem 42 margin-left: 3px
38 cursor: pointer 43 color: #888
39 transition: background-color 0.3s, color 0.3s 44 padding: 3px 7px
40 &:hover 45 border-radius: 0.25rem
41 color: #666 46 cursor: pointer
42 background-color: #eee 47 transition: background-color 0.3s, color 0.3s
48 &:hover
49 color: #666
50 background-color: #eee
43 </style> 51 </style>
44 52
45 <script> 53 <script>
46 /* This is Free Software under GNU Affero General Public License v >= 3.0 54 /* This is Free Software under GNU Affero General Public License v >= 3.0
47 * without warranty, see README.md and license for details. 55 * without warranty, see README.md and license for details.
56 * Author(s): 64 * Author(s):
57 * Markus Kottländer <markus.kottlaender@intevation.de> 65 * Markus Kottländer <markus.kottlaender@intevation.de>
58 */ 66 */
59 67
60 export default { 68 export default {
61 props: ["icon", "title", "closeCallback"] 69 props: ["icon", "title", "collapseCallback", "closeCallback"]
62 }; 70 };
63 </script> 71 </script>