Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Enable responsive search results if the new design is used (fixes #2839) #2855

Merged
merged 7 commits into from
Oct 23, 2021
Merged

Enable responsive search results if the new design is used (fixes #2839) #2855

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6084bfe
Enable responsive search results if the new design is used (fixes #2839)
Yorwba Sep 27, 2021
c5a5870
Reorganize sentence menu for nicer wrapping
Yorwba Sep 29, 2021
08b2bb2
Allow sentence menu to wrap below description
Yorwba Oct 1, 2021
b8b8099
Always display id and username subheader
Yorwba Oct 17, 2021
911eabf
Keep sentence menu on top/to the right of id+user subheader
Yorwba Oct 17, 2021
4f1de16
Move flex-direction from style attribute to separate CSS
Yorwba Oct 22, 2021
93ab608
Remove background color from sentence header and menu-wrapper
Yorwba Oct 22, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions src/Template/Element/sentences/sentence_and_translations.ctp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +87,18 @@ $sentenceUrl = $this->Url->build([
<div flex><?= $duplicateWarning ?></div>
</div>
<div layout="column">
<div layout="row" class="header">
<md-subheader flex ng-if="!vm.isMenuExpanded">
<div layout="row" layout-wrap class="header">
<?php
if (CurrentUser::isMember()) {
echo $this->element('sentences/sentence_menu', [
'expanded' => $menuExpanded,
]);
} else {
echo $this->element('sentences/transcription_button');
}
?>

<md-subheader flex="auto">
<span ng-if="vm.sentence.user && vm.sentence.user.username">
<?php
$linkText = $this->Pages->formatSentenceIdWithSharp('{{vm.sentence.id}}');
Expand All @@ -112,16 +122,6 @@ $sentenceUrl = $this->Url->build([
?>
</span>
</md-subheader>

<?php
if (CurrentUser::isMember()) {
echo $this->element('sentences/sentence_menu', [
'expanded' => $menuExpanded,
]);
} else {
echo $this->element('sentences/transcription_button');
}
?>
</div>

<div class="sentence" ng-class="{'not-reliable' : vm.sentence.correctness === -1}" ng-if="!vm.visibility.sentence_form">
Expand Down
104 changes: 52 additions & 52 deletions src/Template/Element/sentences/sentence_menu.ctp
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,66 @@
<div class="menu-wrapper" sentence-menu flex="{{vm.isMenuExpanded ? '100' : 'none'}}"
ng-init="vm.initMenu(<?= (int)$expanded ?>, vm.sentence.permissions)">
<div class="menu" layout="row" layout-align="space-between center">
<div>
<md-button class="md-icon-button" ng-click="vm.translate(vm.sentence.id)"
ng-disabled="vm.sentence.correctness === -1 || vm.sentence.license === ''">
<md-icon>translate</md-icon>
<?php /* @translators: translate button on sentence menu (verb) */ ?>
<md-tooltip><?= __('Translate') ?></md-tooltip>
</md-button>

<md-button ng-if="vm.menu.canEdit || vm.menu.canTranscribe" class="md-icon-button" ng-click="vm.edit()">
<md-icon>edit</md-icon>
<?php /* @translators: edit button on sentence menu (verb) */ ?>
<md-tooltip><?= __('Edit') ?></md-tooltip>
</md-button>

<md-button class="md-icon-button" ng-click="vm.list()">
<md-icon>list</md-icon>
<md-tooltip><?= __('Add sentence to list') ?></md-tooltip>
</md-button>
<div flex="{{vm.isMenuExpanded ? '80' : 'none'}}" layout="row" layout-align="space-between center" layout-wrap>
<div>
<md-button class="md-icon-button" ng-click="vm.translate(vm.sentence.id)"
ng-disabled="vm.sentence.correctness === -1 || vm.sentence.license === ''">
<md-icon>translate</md-icon>
<?php /* @translators: translate button on sentence menu (verb) */ ?>
<md-tooltip><?= __('Translate') ?></md-tooltip>
</md-button>

<icon-with-progress is-loading="vm.iconsInProgress.favorite">
<md-button class="md-icon-button" ng-if="vm.isMenuExpanded" ng-click="vm.favorite()">
<md-icon>{{vm.sentence.is_favorite ? 'favorite' : 'favorite_border'}}</md-icon>
<md-tooltip ng-if="!vm.sentence.is_favorite"><?= __('Add to favorites') ?></md-tooltip>
<md-tooltip ng-if="vm.sentence.is_favorite"><?= __('Remove from favorites') ?></md-tooltip>
<md-button ng-if="vm.menu.canEdit || vm.menu.canTranscribe" class="md-icon-button" ng-click="vm.edit()">
<md-icon>edit</md-icon>
<?php /* @translators: edit button on sentence menu (verb) */ ?>
<md-tooltip><?= __('Edit') ?></md-tooltip>
</md-button>
</icon-with-progress>

<md-button class="md-icon-button" ng-if="vm.isMenuExpanded && vm.menu.canDelete"
onclick="return confirm('<?= __('Are you sure?') ?>');"
ng-href="<?= $this->Url->build(['controller' => 'sentences', 'action' => 'delete']) ?>/{{vm.sentence.id}}">
<md-icon>delete</md-icon>
<?php /* @translators: delete button on sentence menu (verb) */ ?>
<md-tooltip><?= __('Delete') ?></md-tooltip>
</md-button>
</div>
<md-button class="md-icon-button" ng-click="vm.list()">
<md-icon>list</md-icon>
<md-tooltip><?= __('Add sentence to list') ?></md-tooltip>
</md-button>

<div ng-if="vm.isMenuExpanded && vm.menu.canReview" class="correctness-info">
<edit-review sentence-id="{{vm.sentence.id}}"
correctness="vm.sentence.current_user_review">
</edit-review>
</div>
<icon-with-progress is-loading="vm.iconsInProgress.favorite">
<md-button class="md-icon-button" ng-if="vm.isMenuExpanded" ng-click="vm.favorite()">
<md-icon>{{vm.sentence.is_favorite ? 'favorite' : 'favorite_border'}}</md-icon>
<md-tooltip ng-if="!vm.sentence.is_favorite"><?= __('Add to favorites') ?></md-tooltip>
<md-tooltip ng-if="vm.sentence.is_favorite"><?= __('Remove from favorites') ?></md-tooltip>
</md-button>
</icon-with-progress>

<div>
<icon-with-progress is-loading="vm.iconsInProgress.adopt">
<md-button class="md-icon-button" ng-if="vm.isMenuExpanded && vm.menu.canAdopt" ng-click="vm.adopt()">
<md-icon>{{vm.sentence.is_owned_by_current_user ? 'person' : 'person_outline'}}</md-icon>
<md-tooltip ng-if="!vm.sentence.is_owned_by_current_user"><?= __('Click to adopt') ?></md-tooltip>
<md-tooltip ng-if="vm.sentence.is_owned_by_current_user"><?= __('Click to unadopt') ?></md-tooltip>
<md-button class="md-icon-button" ng-if="vm.isMenuExpanded && vm.menu.canDelete"
onclick="return confirm('<?= __('Are you sure?') ?>');"
ng-href="<?= $this->Url->build(['controller' => 'sentences', 'action' => 'delete']) ?>/{{vm.sentence.id}}">
<md-icon>delete</md-icon>
<?php /* @translators: delete button on sentence menu (verb) */ ?>
<md-tooltip><?= __('Delete') ?></md-tooltip>
</md-button>
</icon-with-progress>
</div>

<md-button ng-if="!vm.isMenuExpanded" class="md-icon-button" ng-click="vm.toggleMenu()">
<md-icon>unfold_more</md-icon>
<md-tooltip><?= __('Show more features') ?></md-tooltip>
</md-button>
<div ng-if="vm.isMenuExpanded && vm.menu.canReview" class="correctness-info">
<edit-review sentence-id="{{vm.sentence.id}}"
correctness="vm.sentence.current_user_review">
</edit-review>
</div>
</div>

<md-button ng-if="vm.isMenuExpanded" class="md-icon-button" ng-click="vm.toggleMenu()">
<md-icon>unfold_less</md-icon>
<md-tooltip><?= __('Show fewer features') ?></md-tooltip>
<icon-with-progress is-loading="vm.iconsInProgress.adopt">
<md-button class="md-icon-button" ng-if="vm.isMenuExpanded && vm.menu.canAdopt" ng-click="vm.adopt()">
<md-icon>{{vm.sentence.is_owned_by_current_user ? 'person' : 'person_outline'}}</md-icon>
<md-tooltip ng-if="!vm.sentence.is_owned_by_current_user"><?= __('Click to adopt') ?></md-tooltip>
<md-tooltip ng-if="vm.sentence.is_owned_by_current_user"><?= __('Click to unadopt') ?></md-tooltip>
</md-button>
</div>
</icon-with-progress>

<md-button ng-if="!vm.isMenuExpanded" class="md-icon-button" ng-click="vm.toggleMenu()">
<md-icon>unfold_more</md-icon>
<md-tooltip><?= __('Show more features') ?></md-tooltip>
</md-button>

<md-button ng-if="vm.isMenuExpanded" class="md-icon-button" ng-click="vm.toggleMenu()">
<md-icon>unfold_less</md-icon>
<md-tooltip><?= __('Show fewer features') ?></md-tooltip>
</md-button>
</div>
</div>
5 changes: 3 additions & 2 deletions src/Template/Sentences/search.ctp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,10 @@
*/
use App\Model\CurrentUser;

if (!CurrentUser::isMember()) {
if (!CurrentUser::isMember() || CurrentUser::getSetting('use_new_design')) {
$this->set('isResponsive', true);
}

if ($is_advanced_search) {
$title = __x('title', 'Advanced search');
} else if (!empty($query)) {
Expand Down Expand Up @@ -207,4 +208,4 @@ if ($ignored) {
]); ?>
</md-sidenav>

</section>
</section>
5 changes: 1 addition & 4 deletions webroot/css/layouts/elements.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1308,12 +1308,9 @@ div.hideLink {
}

.sentence-and-translations .header {
background: #fafafa;
flex-direction: row-reverse;
}

.sentence-and-translations .menu-wrapper {
background: #fff;
}
.sentence-and-translations .menu {
background: #fafafa;
border-bottom-left-radius: 15px;
Expand Down