diff --git a/app/controllers/course/files.php b/app/controllers/course/files.php
index 19c3697cbc90412ac100871cc979df0a4a115f0d..4370eea24d3ec406cf7372f7476f44eb175cdb23 100644
--- a/app/controllers/course/files.php
+++ b/app/controllers/course/files.php
@@ -90,7 +90,6 @@ class Course_FilesController extends AuthenticatedController
Icon::create('file-pic'),
[
'onClick' => "STUDIP.Files.openGallery(); return false;",
- 'style' => 'display: none',
]
);
@@ -174,7 +173,6 @@ class Course_FilesController extends AuthenticatedController
Icon::create('file-pic'),
[
'onClick' => "STUDIP.Files.openGallery(); return false;",
- 'style' => 'display: none',
]
);
if ($GLOBALS['user']->id !== 'nobody') {
diff --git a/app/controllers/course/wiki.php b/app/controllers/course/wiki.php
index 469a5da3425ef86830cab278f0230e30a962a7fe..11e691541b5e0fc95434cc1edb13332fa3bb5e4a 100644
--- a/app/controllers/course/wiki.php
+++ b/app/controllers/course/wiki.php
@@ -59,7 +59,9 @@ class Course_WikiController extends AuthenticatedController
$widget->setExtra($extra);
}
$element = new WidgetElement($toc_content_empty ? _('Keine QuickLinks vorhanden') : $toc_content);
- $element->icon = Icon::create('link-intern');
+ if (!$toc_content_empty) {
+ $element->icon = Icon::create('link-intern');
+ }
$widget->addElement($element);
}
@@ -83,6 +85,7 @@ class Course_WikiController extends AuthenticatedController
['data-dialog' => 'width=700']
);
}
+ $actions->addSeparator();
if ($GLOBALS['perm']->have_studip_perm('tutor', $this->range->id)) { //minimum perm tutor necessary
$actions->addLink(
_('Seiten aus Veranstaltung importieren'),
@@ -91,6 +94,7 @@ class Course_WikiController extends AuthenticatedController
['data-dialog' => 'width=700']
);
}
+ $actions->addLink('foo',$this->new_pageURL($this->page->id), Icon::create('export') );
$sidebar->addWidget($actions);
}
diff --git a/app/controllers/files.php b/app/controllers/files.php
index df4657c832a089d0b3364534a7ec3494dfb102ab..f5957d7d9e3ec94ea8f57e6b4ca5ab3bf235df47 100644
--- a/app/controllers/files.php
+++ b/app/controllers/files.php
@@ -144,7 +144,6 @@ class FilesController extends AuthenticatedController
Icon::create('file-pic'),
[
'onClick' => "STUDIP.Files.openGallery(); return false;",
- 'style' => 'display: none',
]
);
@@ -617,7 +616,6 @@ class FilesController extends AuthenticatedController
Icon::create('file-pic'),
[
'onClick' => "STUDIP.Files.openGallery(); return false;",
- 'style' => 'display: none',
]
);
$sidebar->addWidget($actions);
diff --git a/app/views/admin/plugin/upload-drag-and-drop.php b/app/views/admin/plugin/upload-drag-and-drop.php
index 1cdac24b5120ef934a69ce6fd7a4c8dda5b7c77d..efa99235b86b42a370722f07ca4935f2ddf32836 100644
--- a/app/views/admin/plugin/upload-drag-and-drop.php
+++ b/app/views/admin/plugin/upload-drag-and-drop.php
@@ -3,11 +3,13 @@
* @var Admin_PluginController $controller
*/
?>
-<form action="<?= $controller->url_for('admin/plugin/install') ?>"
- method="post" enctype="multipart/form-data" class="drag-and-drop">
- <?= CSRFProtection::tokenTag() ?>
- <input type="hidden" name="studip_ticket" value="<?= get_ticket() ?>">
+<div class="drag-and-drop-wrapper">
+ <form action="<?= $controller->url_for('admin/plugin/install') ?>"
+ method="post" enctype="multipart/form-data" class="drag-and-drop">
+ <?= CSRFProtection::tokenTag() ?>
+ <input type="hidden" name="studip_ticket" value="<?= get_ticket() ?>">
- <?= _('Plugin auswählen oder via Drag and Drop installieren') ?>
- <input type="file" name="upload_file">
-</form>
+ <?= _('Plugin auswählen oder via Drag and Drop installieren') ?>
+ <input type="file" name="upload_file">
+ </form>
+</div>
\ No newline at end of file
diff --git a/app/views/files/upload-drag-and-drop.php b/app/views/files/upload-drag-and-drop.php
index bf4b06c3624e5777e30138e92ea6baa26051b4cc..0eb0adeab9a67b688c3ffb062eb9982507906b63 100644
--- a/app/views/files/upload-drag-and-drop.php
+++ b/app/views/files/upload-drag-and-drop.php
@@ -1,3 +1,5 @@
-<form class="drag-and-drop files">
- <?= _('Neue Dateien zum Hinzufügen per Drag & Drop in diesen Bereich ziehen.') ?>
-</form>
\ No newline at end of file
+<div class="drag-and-drop-wrapper">
+ <form class="drag-and-drop files">
+ <?= _('Lege Dateien zum Hochladen hier ab.') ?>
+ </form>
+</div>
\ No newline at end of file
diff --git a/resources/assets/javascripts/bootstrap/files.js b/resources/assets/javascripts/bootstrap/files.js
index 6caef6d1d76ce57b9e53d33a0bef8fce200c2d9e..62ae6cfd78c30f2b8eb548e43700f33771d288be 100644
--- a/resources/assets/javascripts/bootstrap/files.js
+++ b/resources/assets/javascripts/bootstrap/files.js
@@ -17,9 +17,9 @@ function searchMoreFiles (button) {
return false;
}
-STUDIP.eventBus.on('files-vue-app-updated', ({hasImages}) => {
- $('#sidebar-actions a[onclick*="Files.openGallery"]').toggle(hasImages);
-});
+STUDIP.eventBus.on("files-vue-app-updated", ({ hasImages }) => {
+ $('#sidebar-actions a[onclick*="Files.openGallery"]').parent().toggle(hasImages);
+ });
STUDIP.domReady(() => {
diff --git a/resources/assets/stylesheets/highcontrast.scss b/resources/assets/stylesheets/highcontrast.scss
index d081c2c0d6e71ade92b3357f2437d99a308a9beb..57eafb4a5db28538a1ff40a4ca8c9e3a6531d133 100644
--- a/resources/assets/stylesheets/highcontrast.scss
+++ b/resources/assets/stylesheets/highcontrast.scss
@@ -202,8 +202,7 @@ button.button[disabled]:hover {
/* SIDEBAR AND WIDGETS */
-.studip-widget .widget-header,
-.sidebar-widget-header {
+.studip-widget .widget-header {
background-color: $black !important;
color: $white !important;
}
@@ -249,16 +248,14 @@ button.button[disabled]:hover {
.widget-links.sidebar-navigation > li.active {
- background-color: $black !important;
- color: $white !important;
- box-shadow: unset;
-
+ background-color: var(--black);
+ border-color: var(--black);
}
.widget-links.sidebar-navigation > li.active,
.widget-links.sidebar-navigation > li.active a {
-
+ color: var(--white);
&::before,
&::after {
border-left-color: $black;
@@ -272,6 +269,7 @@ button.button[disabled]:hover {
box-shadow: unset;
border-top: 2px solid $black;
border-bottom: 2px solid $black;
+ border-left: solid 4px $medium-gray;
a {
color: $black;
diff --git a/resources/assets/stylesheets/mixins/colors.scss b/resources/assets/stylesheets/mixins/colors.scss
index 041bc626cb7769f93410ff9a61ea7eb03936afc8..21039f60ffaf08b25669348c20a1102883bf8054 100644
--- a/resources/assets/stylesheets/mixins/colors.scss
+++ b/resources/assets/stylesheets/mixins/colors.scss
@@ -244,10 +244,13 @@ $color--font-inverted: $color--white;
$color--main-navigation-background: $color--gray-7;
$color--main-navigation-border: $color--gray-5;
+$color--sidebar-marker-active: $color--gray-5;
$color--sidebar-marker-focus: $color--gray-5;
$color--sidebar-marker-hover: $color--gray-5;
+$color--sidebar-active: $color--gray-6;
$color--sidebar-focus: $color--gray-6;
$color--sidebar-hover: $color--gray-6;
+$color--sidebar-divider: $color--gray-6;
$color--dialog-overlay: $color--gray-1;
@@ -282,4 +285,4 @@ $color--focus: $color--gray-4;
$color--warning: $color--red-1;
$color--attention: $color--yellow-1;
-$color--good: $color--green-1;
\ No newline at end of file
+$color--good: $color--green-1;
diff --git a/resources/assets/stylesheets/scss/admin.scss b/resources/assets/stylesheets/scss/admin.scss
index 67b87924c3588fba80e6b16911ece6e0dfaad8bd..634c4e8394198461cc998bf998abe13e7fec30a1 100644
--- a/resources/assets/stylesheets/scss/admin.scss
+++ b/resources/assets/stylesheets/scss/admin.scss
@@ -1,17 +1,27 @@
.drag-and-drop { display: none; }
+.drag-and-drop-wrapper {
+ background-color: var(--color--tile-background);
+ border: solid thin var(--color--tile-border);
+ border-radius: 5px;
+ padding: 5px;
+
+ &:hover {
+ background-color: var(--color--tile-background-hover);
+ border-color: var(--color--tile-border-hover);
+ }
+}
.js .drag-and-drop {
display: block;
- margin: 5px;
+ margin: 0;
overflow: hidden;
- padding: 10px;
- padding-left: 0px;
+ padding: 15px 15px 15px 80px;
position: relative;
- text-align: center;
- background-color: var(--content-color-20);
- @include background-icon(upload, clickable, 50);
+ text-align: left;
+ background-color: transparent;
+ border: solid thin transparent;
+ @include background-icon(upload, clickable, 48);
background-repeat: no-repeat;
- background-position: center 10px;
- padding-top: 70px;
+ background-position: 15px center;
color: var(--base-color);
cursor: pointer;
@@ -26,10 +36,9 @@
top: 0;
}
- &.hovered {
- background-color: var(--base-color);
- @include background-icon(upload, info_alt, 50);
- color: var(--white);
+ &:hover {
+ border: dashed thin var(--color--tile-border-hover);
+ border-radius: 5px;
}
}
.js .widget-links .drag-and-drop {
diff --git a/resources/assets/stylesheets/scss/blubber.scss b/resources/assets/stylesheets/scss/blubber.scss
index 1e96554d0da39edcdeddb9cc5af4ca025e94114b..8c5f599406320c9eabf772487c4b43b9d8b4610c 100644
--- a/resources/assets/stylesheets/scss/blubber.scss
+++ b/resources/assets/stylesheets/scss/blubber.scss
@@ -342,8 +342,6 @@
padding-left: 0px;
li {
- border-bottom: thin solid var(--content-color-40);
-
height: 50px;
max-height: 50px;
overflow: hidden;
@@ -351,12 +349,10 @@
cursor: pointer;
color: var(--base-color);
font-weight: bold;
- &:last-child {
- border-bottom: none;
- }
+ border-left: solid 4px transparent;
&.unseen {
- border-left: 3px solid var(--active-color);
+ border-color: var(--active-color);
padding-left: 7px;
}
@@ -371,31 +367,9 @@
justify-content: center;
}
- &.active {
- background-color: var(--yellow-40);
-
- &::before {
- content: '';
- position: absolute;
- height: 0px;
- width: 0px;
- border-top: 35px transparent solid;
- border-bottom: 35px transparent solid;
- border-left: 10px var(--content-color-40) solid;
- right: -2px;
- margin-top: -10px;
- }
- &::after {
- content: '';
- position: absolute;
- height: 0px;
- width: 0px;
- border-top: 35px transparent solid;
- border-bottom: 35px transparent solid;
- border-left: 10px var(--yellow-40) solid;
- right: -1px;
- margin-top: -70px;
- }
+ &.active, &:hover {
+ background-color: var(--color--sidebar-active);
+ border-color: var(--color--sidebar-marker-active);
}
a {
diff --git a/resources/assets/stylesheets/scss/sidebar.scss b/resources/assets/stylesheets/scss/sidebar.scss
index 9b25dfe1d7293eb88f8e5439f7645a14e24c5066..d27418b66396a438d239549df9f463b52e52b7d0 100644
--- a/resources/assets/stylesheets/scss/sidebar.scss
+++ b/resources/assets/stylesheets/scss/sidebar.scss
@@ -1,3 +1,5 @@
+$icon-size: 16px;
+
#sidebar {
background: var(--white);
border-left: 0;
@@ -49,31 +51,51 @@
}
.sidebar-widget,
.sidebar-widget-placeholder {
- background: var(--white);
- border: 1px solid var(--content-color-40);
+ background-color: var(--white);
+ border: none;
margin: 15px 0 0;
- width: $sidebar-width - 5px;
+ width: $sidebar-width;
}
- .sidebar-widget-header,
- .sidebar-widget-extra {
- background: var(--content-color-20);
- color: var(--base-color);
+ .sidebar-widget-header {
+ background-color: var(--white);
+ color: var(--black);
font-weight: bold;
padding: 4px;
word-break: break-word;
}
+ .sidebar-widget-extra {
+ background-color: var(--white);
+ a {
+ display: inline-block;
+ height: $icon-size;
+ width: $icon-size;
+ padding: 4px;
+ border: solid thin var(--base-color);
+ border-radius: 5px;
+ margin-bottom: 4px;
+
+ &:hover {
+ background-color: var(--base-color);
+
+ img {
+ filter: brightness(100);
+ }
+ }
+ }
+ }
+
// Links inside the sidebar
a.link-intern {
- @include icon(before, link-intern, clickable, 16px, 2px);
+ @include icon(before, link-intern, clickable, $icon-size, 2px);
}
a.link-extern {
- @include icon(before, link-extern, clickable, 16px, 2px);
+ @include icon(before, link-extern, clickable, $icon-size, 2px);
}
// Prevent selects from growing too large
select {
- max-width: 100%;
+ max-width: calc(100% - 1ex);
}
}
@@ -83,16 +105,52 @@ ul.widget-list {
padding: 0;
> li {
background-repeat: no-repeat;
- background-position: 0 1px;
- background-size: 16px 16px;
- padding-left: 20px;
+ background-position: 2px center;
+ background-size: $icon-size $icon-size;
word-wrap: break-word;
+ margin-left: -4px;
+ padding: 2px 0;
+ background-color: var(--white);
+ border-left: solid 4px var(--white);
+
+ > *:not(label) {
+ padding: 4px 0 4px 24px;
+ line-height: $icon-size + 1;
+ }
+
+ &:has(>button:not(.options-radio, .options-checkbox)), &:has(>a):not(:last-child) {
+ border-bottom: solid thin var(--color--sidebar-divider);
+ }
+
+ &:last-child {
+ button, a {
+ border-bottom: none;
+ }
+ }
+
+ &:hover {
+ background-color: var(--color--sidebar-active);
+ border-left: solid 4px var(--color--sidebar-marker-active);
+
+ a, button {
+ color: var(--color--font-primary);
+ }
+ }
+
+ &:has(>hr) {
+ margin-left: -10px;
+ &:hover {
+ background-color: transparent;
+ border-color: transparent;
+ }
+ }
}
hr {
border-style: none;
- border-top: thin solid var(--content-color-40);
- margin: 4px 0px 4px -20px;
+ border-top: 2px solid var(--white);
+ margin: 4px 0px;
+ margin-top: -3px;
}
button {
@@ -100,14 +158,18 @@ ul.widget-list {
text-align: left;
width: 100%;
}
+
+ &.sidebar-navigation,
+ &.sidebar-views {
+ > li a {
+ padding: 4px 0;
+ }
+ }
}
div#sidebar-navigation {
div.sidebar-widget-header {
display: none;
}
- div.sidebar-widget-content {
- border-top: 0px;
- }
}
.widget-links {
margin: 5px;
@@ -128,20 +190,22 @@ div#sidebar-navigation {
font-weight: lighter;
}
&.sidebar-navigation > li.active {
- background-color: var(--base-color);
+ background-color: var(--color--sidebar-active);
+ border-left: solid 4px var(--color--sidebar-marker-active);
margin-left: -4px;
- //#arrow > .right-border(14px, $content-color-20, 1px, $content-color-40, -5px);
- @include arrow-right-border(14px, $base-color, 1px, $base-color, -5px);
+ padding-left: 1px;
+
a {
- color: var(--white);
+ color: var(--black);
padding-left: 4px;
}
}
&.sidebar-views > li.active {
- background: var(--activity-color-40);
- margin-left: -5px;
- box-shadow: inset 0 0 0 1px var(--activity-color);
- @include arrow-right-border(14px, $activity-color-40, 1px, $activity-color, -5px);
+ background-color: var(--color--sidebar-active);
+ border-left: solid 4px var(--color--sidebar-marker-active);
+ margin-left: -4px;
+ padding-left: 1px;
+
a, button {
color: var(--base-color);
padding-left: 5px;
@@ -150,23 +214,6 @@ div#sidebar-navigation {
&.sidebar-navigation > li,
&.sidebar-views > li {
padding-left: 5px;
-
- &.active {
-
- line-height: 2em;
- &:before, &:after {
- margin-left: -1px;
- }
- display: block;
-
- // Obtuse angle looks kinda ugly with borders
- &:before {
- border-left-width: floor(calc(14px * 2 / 3));
- }
- &:after {
- border-left-width: floor(calc(14px * 2 / 3 - 1px));
- }
- }
}
}
@@ -197,16 +244,15 @@ div#sidebar-navigation {
padding: 0;
> li {
- line-height: 1.5em;
margin-left: 0;
- padding-left: 0;
+ padding-left: 2px;
}
.options-checkbox {
background-repeat: no-repeat;
- background-position: left 2px;
+ background-position: 2px center;
display: block;
- padding-left: 20px;
+ padding-left: 24px;
&.options-checked {
@include background-icon(checkbox-checked);
@@ -214,13 +260,16 @@ div#sidebar-navigation {
&.options-unchecked {
@include background-icon(checkbox-unchecked);
}
+ &:hover {
+ color: var(--color--font-primary);
+ }
}
.options-radio {
background-repeat: no-repeat;
- background-position: left 2px;
+ background-position: 2px center;
display: block;
- padding-left: 20px;
+ padding-left: 24px;
&.options-checked {
@include background-icon(radiobutton-checked);
@@ -228,13 +277,16 @@ div#sidebar-navigation {
&.options-unchecked {
@include background-icon(radiobutton-unchecked);
}
+ &:hover {
+ color: var(--color--font-primary);
+ }
}
}
}
.sidebar-widget-content {
- border-top: 1px solid var(--content-color-40);
overflow-wrap: break-word;
- padding: 4px;
+ padding: 0;
+ margin-left: 4px;
transition: all 0.5s;
}
diff --git a/resources/assets/stylesheets/scss/variables.scss b/resources/assets/stylesheets/scss/variables.scss
index f95e7e79860ec0e9a420f33bde4ef722b0d87e9b..ca0fd9b5dad57c048c70d39ec311f68bcadbba79 100644
--- a/resources/assets/stylesheets/scss/variables.scss
+++ b/resources/assets/stylesheets/scss/variables.scss
@@ -206,10 +206,13 @@ $grid-gap: 0;
#{"--"}color--main-navigation-background: $color--main-navigation-background;
#{"--"}color--main-navigation-border: $color--main-navigation-border;
+ #{"--"}color--sidebar-marker-active: $color--sidebar-marker-active;
#{"--"}color--sidebar-marker-focus: $color--sidebar-marker-focus;
#{"--"}color--sidebar-marker-hover: $color--sidebar-marker-hover;
+ #{"--"}color--sidebar-active:$color--sidebar-active;
#{"--"}color--sidebar-focus: $color--sidebar-focus;
#{"--"}color--sidebar-hover: $color--sidebar-hover;
+ #{"--"}color--sidebar-divider: $color--sidebar-divider;
#{"--"}color--dialog-overlay: $color--dialog-overlay;
diff --git a/resources/vue/components/SidebarWidget.vue b/resources/vue/components/SidebarWidget.vue
index 88c283469aa91625d40847b85c2749f6a22fd437..692f4f904b245bcf5968cd4e3643bcaab22ab72f 100644
--- a/resources/vue/components/SidebarWidget.vue
+++ b/resources/vue/components/SidebarWidget.vue
@@ -1,14 +1,14 @@
<template>
- <div class="sidebar-widget">
+ <div class="sidebar-widget" :class="{'sidebar-widget-has-extra' : this.$slots.actions }">
<div class="sidebar-widget-header" v-if="title">
{{ title }}
- <div class="actions" v-if="this.$slots.actions">
- <slot name="actions"></slot>
- </div>
</div>
<div class="sidebar-widget-content" ref="scrollable">
<slot name="content" />
</div>
+ <div class="sidebar-widget-extra" v-if="this.$slots.actions">
+ <slot name="actions"></slot>
+ </div>
</div>
</template>