Skip to content

Commit

Permalink
Split list to navigation for the left sidebar
Browse files Browse the repository at this point in the history
Signed-off-by: julia.kirschenheuter <[email protected]>
  • Loading branch information
JuliaKirschenheuter committed Sep 28, 2023
1 parent 45cac16 commit 5693092
Show file tree
Hide file tree
Showing 7 changed files with 73 additions and 70 deletions.
100 changes: 51 additions & 49 deletions apps/settings/templates/settings/frame.php
Original file line number Diff line number Diff line change
Expand Up @@ -29,58 +29,60 @@

?>

<div id="app-navigation" role="navigation">
<ul tabindex="0">
<?php if (!empty($_['forms']['admin'])) { ?>
<li class="app-navigation-caption"><?php p($l->t('Personal')); ?></li>
<?php
}
foreach ($_['forms']['personal'] as $form) {
if (isset($form['anchor'])) {
$anchor = \OC::$server->getURLGenerator()->linkToRoute('settings.PersonalSettings.index', ['section' => $form['anchor']]);
$class = 'nav-icon-' . $form['anchor'];
$sectionName = $form['section-name']; ?>
<li <?php print_unescaped($form['active'] ? ' class="active"' : ''); ?> data-section-id="<?php print_unescaped($form['anchor']); ?>" data-section-type="personal">
<a href="<?php p($anchor); ?>"<?php print_unescaped($form['active'] ? ' aria-current="page"' : ''); ?>>
<?php if (!empty($form['icon'])) { ?>
<img alt="" src="<?php print_unescaped($form['icon']); ?>">
<span><?php p($form['section-name']); ?></span>
<?php } else { ?>
<span class="no-icon"><?php p($form['section-name']); ?></span>
<?php } ?>
</a>
</li>
<?php
<div id="app-navigation">
<?php if (!empty($_['forms']['admin'])): ?>
<div id="app-navigation-caption-personal" class="app-navigation-caption"><?php p($l->t('Personal')); ?></div>
<?php endif; ?>
<nav class="app-navigation-personal" aria-labelledby="app-navigation-caption-personal">
<ul tabindex="0">
<?php foreach ($_['forms']['personal'] as $form) {
if (isset($form['anchor'])) {
$anchor = \OC::$server->getURLGenerator()->linkToRoute('settings.PersonalSettings.index', ['section' => $form['anchor']]);
$class = 'nav-icon-' . $form['anchor'];
$sectionName = $form['section-name']; ?>
<li <?php print_unescaped($form['active'] ? ' class="active"' : ''); ?> data-section-id="<?php print_unescaped($form['anchor']); ?>" data-section-type="personal">
<a href="<?php p($anchor); ?>"<?php print_unescaped($form['active'] ? ' aria-current="page"' : ''); ?>>
<?php if (!empty($form['icon'])) { ?>
<img alt="" src="<?php print_unescaped($form['icon']); ?>">
<span><?php p($form['section-name']); ?></span>
<?php } else { ?>
<span class="no-icon"><?php p($form['section-name']); ?></span>
<?php } ?>
</a>
</li>
<?php
}
}
}
?>

<?php
if (!empty($_['forms']['admin'])) {
?>
<li class="app-navigation-caption"><?php p($l->t('Administration')); ?></li>
<?php
}
foreach ($_['forms']['admin'] as $form) {
if (isset($form['anchor'])) {
$anchor = \OC::$server->getURLGenerator()->linkToRoute('settings.AdminSettings.index', ['section' => $form['anchor']]);
$class = 'nav-icon-' . $form['anchor'];
$sectionName = $form['section-name']; ?>
<li <?php print_unescaped($form['active'] ? ' class="active"' : ''); ?> data-section-id="<?php print_unescaped($form['anchor']); ?>" data-section-type="admin">
<a href="<?php p($anchor); ?>"<?php print_unescaped($form['active'] ? ' aria-current="page"' : ''); ?>>
<?php if (!empty($form['icon'])) { ?>
<img alt="" src="<?php print_unescaped($form['icon']); ?>">
<span><?php p($form['section-name']); ?></span>
<?php } else { ?>
<span class="no-icon"><?php p($form['section-name']); ?></span>
<?php } ?>
</a>
</li>
<?php
</ul>
</nav>

<?php if (!empty($_['forms']['admin'])): ?>
<div id="app-navigation-caption-administration" class="app-navigation-caption"><?php p($l->t('Administration')); ?></div>
<?php endif; ?>
<nav class="app-navigation-administration" aria-labelledby="app-navigation-caption-administration">
<ul tabindex="0">
<?php foreach ($_['forms']['admin'] as $form) {
if (isset($form['anchor'])) {
$anchor = \OC::$server->getURLGenerator()->linkToRoute('settings.AdminSettings.index', ['section' => $form['anchor']]);
$class = 'nav-icon-' . $form['anchor'];
$sectionName = $form['section-name']; ?>
<li <?php print_unescaped($form['active'] ? ' class="active"' : ''); ?> data-section-id="<?php print_unescaped($form['anchor']); ?>" data-section-type="admin">
<a href="<?php p($anchor); ?>"<?php print_unescaped($form['active'] ? ' aria-current="page"' : ''); ?>>
<?php if (!empty($form['icon'])) { ?>
<img alt="" src="<?php print_unescaped($form['icon']); ?>">
<span><?php p($form['section-name']); ?></span>
<?php } else { ?>
<span class="no-icon"><?php p($form['section-name']); ?></span>
<?php } ?>
</a>
</li>
<?php
}
}
}
?>
</ul>
?>
</ul>
</nav>
</div>
<div id="app-content" tabindex="0" data-active-section-id="<?php print_unescaped($_['activeSectionId']) ?>">
<?php print_unescaped($_['content']); ?>
Expand Down
2 changes: 1 addition & 1 deletion core/css/apps.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion core/css/apps.css.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

33 changes: 17 additions & 16 deletions core/css/apps.scss
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,22 @@ kbd {
flex-direction: column;
flex-grow: 0;
flex-shrink: 0;
}
.app-navigation-caption,
.app-navigation-caption {
font-weight: bold;
line-height: 44px;
padding: 10px 44px 0 44px;
white-space: nowrap;
text-overflow: ellipsis;
box-shadow: none !important;
user-select: none;
pointer-events:none;
margin-left: 10px;
}

.app-navigation-personal,
.app-navigation-administration {

/* 'New' button */
.app-navigation-new {
Expand Down Expand Up @@ -239,21 +255,6 @@ kbd {
}
}

&.app-navigation-caption {
font-weight: bold;
line-height: 44px;
padding: 0 44px;
white-space: nowrap;
text-overflow: ellipsis;
box-shadow: none !important;
user-select: none;
pointer-events:none;

&:not(:first-child) {
margin-top: 22px;
}
}

/* Second level nesting for lists */
> ul {
flex: 0 1 auto;
Expand Down Expand Up @@ -344,7 +345,7 @@ kbd {
}
}
&:first-child img {
margin-right: 11px;
margin-right: 11px!important;
width: 16px;
height: 16px;
// Legacy invert if bright background
Expand Down
2 changes: 1 addition & 1 deletion core/css/server.css

Large diffs are not rendered by default.

Loading

0 comments on commit 5693092

Please sign in to comment.