Commit 9e031b3c authored by Nick Stenning's avatar Nick Stenning

Merge pull request #2606 from robertknight/t112-center_post_dropdown

Let the annotation post button resize to fit its content
parents 6d1eccd9 35af9e63
......@@ -153,6 +153,12 @@ $group-list-width: 270px;
}
}
// the name of a group in the groups drop-down list
// and 'Post to <Group>' button for saving annotations
.group-name-link {
white-space: nowrap;
}
/* The user account dropdown menu */
.user-picker {
.avatar {
......
......@@ -164,14 +164,12 @@ html {
}
.dropdown-menu {
@include rotateX(90deg);
visibility: hidden;
background: $white;
border: solid 1px $gray-lighter;
margin-top: .8em;
top: 100%;
float: left;
opacity: 0;
pointer-events: none;
position: absolute;
z-index: 2;
......@@ -248,14 +246,22 @@ html {
right: 0;
}
}
// Aligns the dropdown menu's '▲' indicator to the center,
// the menu itself has to be aligned by the user
&.pull-center {
// Align the tail
&:before, &:after {
left: auto;
right: 50%;
}
}
}
.open {
& > .dropdown-menu {
@include smallshadow;
@include rotateX(0);
opacity: 1;
pointer-events: auto;
visibility: visible;
}
}
......
......@@ -2,14 +2,32 @@
display: flex;
&__btn {
width: 250px;
position: relative;
}
// a container which wraps the dropdown menu
// in order to allow it to be positioned
// relative to its own width
&__dropdown-container {
position: absolute;
left: 100%;
}
// the content of the dropdown menu
&__dropdown-menu {
width: 100%;
// align the ▼ arrow in the dropdown button
// with the ▲ arrow in the dropdown menu
position: relative;
left: calc(-50% - 6px);
}
}
// .dropdown-menu initially hides the dropdown via
// `visibility`. Show it when the dropdown is open
.open .publish-annotation-btn__dropdown-menu {
visibility: visible;
}
.publish-annotation-cancel-btn {
@extend .btn--cancel;
......
......@@ -7,7 +7,8 @@
dropdown-menu-label="Change annotation sharing setting"
is-disabled="!canPost">
</dropdown-menu-btn>
<ul class="dropdown-menu pull-right group-list publish-annotation-btn__dropdown-menu" role="menu">
<div class="publish-annotation-btn__dropdown-container">
<ul class="dropdown-menu pull-center group-list publish-annotation-btn__dropdown-menu" role="menu">
<li ng-click="vm.setPrivacy('shared')">
<div class="group-item">
<div class="group-icon-container">
......@@ -33,6 +34,7 @@
</div>
</li>
</ul>
</div>
</div>
<button class="publish-annotation-cancel-btn btn-clean"
ng-click="vm.cancel()"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment