Skip to content
Snippets Groups Projects
Commit 1a7a6950 authored by Ron Lucke's avatar Ron Lucke Committed by David Siegfried
Browse files

Step #4200 

Merge request studip/studip!3191
parent 47af9b04
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 167 additions and 124 deletions
app/controllers/course/files.php
+ 0
− 2
View file @ 1a7a6950
......@@ -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') {
......
app/controllers/course/wiki.php
+ 5
− 1
View file @ 1a7a6950
......@@ -59,7 +59,9 @@ class Course_WikiController extends AuthenticatedController
$widget->setExtra($extra);
}
$element = new WidgetElement($toc_content_empty ? _('Keine QuickLinks vorhanden') : $toc_content);
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);
}
......
app/controllers/files.php
+ 0
− 2
View file @ 1a7a6950
......@@ -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);
......
app/views/admin/plugin/upload-drag-and-drop.php
+ 9
− 7
View file @ 1a7a6950
......@@ -3,6 +3,7 @@
* @var Admin_PluginController $controller
*/
?>
<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() ?>
......@@ -11,3 +12,4 @@
<?= _('Plugin auswählen oder via Drag and Drop installieren') ?>
<input type="file" name="upload_file">
</form>
</div>
\ No newline at end of file
app/views/files/upload-drag-and-drop.php
+ 5
− 3
View file @ 1a7a6950
<div class="drag-and-drop-wrapper">
<form class="drag-and-drop files">
<?= _('Neue Dateien zum Hinzufügen per Drag & Drop in diesen Bereich ziehen.') ?>
<?= _('Lege Dateien zum Hochladen hier ab.') ?>
</form>
</div>
\ No newline at end of file
resources/assets/javascripts/bootstrap/files.js
+ 3
− 3
View file @ 1a7a6950
......@@ -17,8 +17,8 @@ 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(() => {
......
resources/assets/stylesheets/highcontrast.scss
+ 5
− 7
View file @ 1a7a6950
......@@ -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;
......
resources/assets/stylesheets/mixins/colors.scss
+ 4
− 1
View file @ 1a7a6950
......@@ -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;
......
resources/assets/stylesheets/scss/admin.scss
+ 21
− 12
View file @ 1a7a6950
.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 {
......
resources/assets/stylesheets/scss/blubber.scss
+ 5
− 31
View file @ 1a7a6950
......@@ -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 {
......
resources/assets/stylesheets/scss/sidebar.scss
+ 103
− 51
View file @ 1a7a6950
$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;
}
......
resources/assets/stylesheets/scss/variables.scss
+ 3
− 0
View file @ 1a7a6950
......@@ -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;
......
resources/vue/components/SidebarWidget.vue
+ 4
− 4
View file @ 1a7a6950
<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>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment