references/openproject
1
0
Fork 0
mirror of https://github.com/opf/openproject.git synced 2026-06-14 03:30:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

[32649] Increase visibility of toggle buttons in the right wp split screen (#8425)

Browse Source 
* Increase visibility of toggle buttons in the right wp split screen

* Delete old classes and styles

* Adapt style guide

* Add more space to the button

* Add id again; Set class -transparent again and adapt styles

[ci skip]
This commit is contained in:
Inga Mai
2020-06-12 09:04:15 +02:00
committed by GitHub
parent 1d0afad2b1
commit f74ceb8d4e
7 changed files with 17 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/content/_attributes_group.lsg
+1 -1
View File
@@ -137,7 +137,7 @@
<h3 class="attributes-group--header-text">Related To</h3>
</div>
<div class="attributes-group--header-toggle">
<a href="#" class="button -small -transparent">Group by work package type</a>
<a href="#" class="button -small -transparent -with-icon icon-group-by icon-small">Group by work package type</a>
</div>
</div>
<div class="content">
app/assets/stylesheets/content/_attributes_group.sass
+1 -1
View File
@@ -59,7 +59,7 @@
overflow-y: hidden
.button
margin: 0 0 5px 0
margin: 0 0 8px 0
// HACK. TODO: Remove H3 element rules in various places.
.attributes-group--header-text,
app/assets/stylesheets/content/_buttons.sass
+5 -10
View File
@@ -87,23 +87,18 @@ a.button
&.-transparent
@include button-style($background: $button--font-color, $style: hollow)
border-color: transparent
background: transparent
&:hover, &:focus
@include varprop(border-color, button--border-color)
&.-active
background: $button--active-background-color
&:hover, &:focus
border-color: $button--active-border-color
&:hover, &:focus, &.-active
background: $button--background-hover-color
&.-tiny
@include button-size(tiny)
&.-small
@include button-size(small)
&.-with-icon:before
vertical-align: initial
&.-large
@include button-size(large)
app/assets/stylesheets/content/work_packages/tabs/_activities.sass
+1 -1
View File
@@ -77,7 +77,7 @@ h4.comment
.work-package-details-activities-list
list-style-type: none
margin: 0
margin: 35px 0 0 0
// Position first date with comment toggler
.activity-date.-with-toggler
app/assets/stylesheets/content/work_packages/tabs/_relations.sass
+1 -7
View File
@@ -129,10 +129,4 @@
.wp-relations-input-section
margin-right: 10px
flex: 1
.detail-panel--relations
.panel-toggler .icon-small
height: 18px
display: inline-block
vertical-align: middle
flex: 1
frontend/src/app/components/wp-relations/wp-relations-group/wp-relations-group.template.html
+7 -9
View File
@@ -7,15 +7,13 @@
</div>
<div class="attributes-group--header-toggle"
*ngIf="firstGroup">
<div id="wp-relation-group-by-toggle"
#wpRelationGroupByToggler
class="panel-toggler ng-scope ng-isolate-scope hide-when-print">
<accessible-by-keyboard linkClass="button -transparent"
(execute)="toggleButton()">
<op-icon icon-classes="icon-small icon-group-by icon4"></op-icon>
<span [textContent]="togglerText"></span>
</accessible-by-keyboard>
</div>
<accessible-by-keyboard id="wp-relation-group-by-toggle"
#wpRelationGroupByToggler
(execute)="toggleButton()"
linkClass="button -small -transparent -with-icon icon-group-by icon-small hide-when-print"
[linkAriaLabel]="togglerText">
<span [textContent]="togglerText"></span>
</accessible-by-keyboard>
</div>
</div>
frontend/src/app/components/wp-single-view-tabs/activity-panel/activity-tab.html
+1 -1
View File
@@ -10,7 +10,7 @@
<span class="activity-date--label" [textContent]="inf.date"></span>
<accessible-by-keyboard (execute)="toggleComments()"
*ngIf="first && showToggler"
linkClass="activity-comments--toggler button -small -transparent"
linkClass="activity-comments--toggler button -small -transparent -with-icon icon-filter icon-small hide-when-print"
[linkAriaLabel]="togglerText">
<span [textContent]="togglerText"></span>
</accessible-by-keyboard>