VladPolskiy/nextcloud-spreed
1
0
Fork 0
mirror of https://github.com/nextcloud/spreed.git synced 2025-07-22 12:01:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move At.scss to At.css

Browse Source 
Signed-off-by: Joas Schilling <coding@schilljs.com>
This commit is contained in:
Joas Schilling
2022-07-12 11:28:06 +02:00
parent 6aa894fee4
commit d4519ebe55
10 changed files with 180 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
css/At.css Normal file
View File

@ -0,0 +1,174 @@
// Copied from vue-at (https://github.com/fritx/vue-at/blob/d16d5eefdae8987c0bffe2d9c3867b7da12c808f/src/At.scss)
// and wrapped to affect only the panel for candidate mentions.
// atwho.css https://github.com/ichord/At.js
.talk.candidate-mentions .atwho-view {
// position:absolute;
// top: 0;
// left: 0;
// display: none;
// margin-top: 18px;
// background: white;
color: black;
// border: 1px solid #DDD;
border-radius: 3px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
min-width: 120px;
z-index: 11110 !important;
}
.talk.candidate-mentions .atwho-ul {
/* width: 100px; */
list-style:none;
// padding:0;
// margin:auto;
// max-height: 200px;
// overflow-y: auto;
}
.talk.candidate-mentions .atwho-li {
display: block;
// padding: 5px 10px;
// border-bottom: 1px solid #DDD;
// cursor: pointer;
/* border-top: 1px solid #C8C8C8; */
}
////// added 1
.talk.candidate-mentions .atwho-view {
// font-size: 14px;
// min-width: 140px;
// max-width: 180px;
border-radius: 6px;
// overflow: hidden;
box-shadow: 0 0 10px 0 rgba(101, 111, 122, .5);
}
.talk.candidate-mentions .atwho-ul {
max-height: 135px;
padding: 0;
margin: 0;
}
.talk.candidate-mentions .atwho-li {
box-sizing: border-box;
height: 27px;
padding: 0 12px;
white-space: nowrap;
display: flex;
align-items: center;
}
.talk.candidate-mentions .atwho-li span {
overflow: hidden;
text-overflow: ellipsis;
}
.talk.candidate-mentions .atwho-cur {
// background: #44a8f2;
background: #5BB8FF;
color: white;
}
////// added 2
.talk.candidate-mentions .atwho-wrap {
position: relative;
}
.talk.candidate-mentions.atwho-panel {
position: absolute;
}
.talk.candidate-mentions .atwho-inner {
position: relative;
}
.talk.candidate-mentions .atwho-view {
position: absolute;
bottom: 0;
left: -0.8em; // 抵消左边距
cursor: default;
background-color: rgba(255,255,255,.94);
min-width: 140px;
max-width: 180px;
max-height: 200px;
overflow-y: auto;
}
.talk.candidate-mentions .atwho-view::-webkit-scrollbar {
width: 11px;
height: 11px;
}
.talk.candidate-mentions .atwho-view::-webkit-scrollbar-track {
// background-color: rgba(127, 127, 127, .1);
background-color: #F5F5F5;
}
.talk.candidate-mentions .atwho-view::-webkit-scrollbar-thumb {
min-height: 36px;
border: 2px solid transparent;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
background-clip: padding-box;
border-radius: 7px;
// background-color: rgba(0, 0, 0, 0.2);
background-color: #C4C4C4;
}
// Override "max-width: 180px", as that makes the autocompletion panel too
// narrow.
.talk.candidate-mentions .atwho-view {
max-width: 300px;
min-width: 250px;
// mention height: 48 * visible mentions: 4.5
max-height: 216px;
}
// Override max height to show 4.5 mentions to make clear you can scroll for more options
.talk.candidate-mentions .atwho-ul {
// (padding top: 4 + avatar height: 48 + padding bottom: 4) * visible mentions: 4.5
max-height: unset;
}
// Override autocompletion panel items height, as they are too short
// for the avatars and also need some padding.
.talk.candidate-mentions .atwho-li {
height: 64px;
padding-top: 4px;
padding-bottom: 4px;
}
// Although the height of its wrapper is 32px the height of the icon
// is the default 16px. This is a temporary fix until it is fixed
// in the avatar component.
.talk.candidate-mentions .atwho-li .icon-group-forced-white {
width: 44px;
height: 44px;
}
// Override all colors with our theming and dark mode
.talk.candidate-mentions .atwho-view {
background: var(--color-main-background);
color: var(--color-main-text);
box-shadow: 0 0 5px var(--color-box-shadow);
}
.talk.candidate-mentions .atwho-view::-webkit-scrollbar-track {
background-color: var(--color-background-dark);
}
.talk.candidate-mentions .atwho-view::-webkit-scrollbar-thumb {
background-color: var(--color-background-darker);
}
.talk.candidate-mentions .atwho-view .atwho-cur {
background: var(--color-primary-light);
color: var(--color-main-text);
}
// Override conflicting rules from the comments tab.
.talk.candidate-mentions .atwho-view {
top: unset;
display: unset;
}

167
css/At.scss
View File

@ -1,167 +0,0 @@
// Copied from vue-at (https://github.com/fritx/vue-at/blob/d16d5eefdae8987c0bffe2d9c3867b7da12c808f/src/At.scss)
// and wrapped to affect only the panel for candidate mentions.
.talk.candidate-mentions {
// atwho.css https://github.com/ichord/At.js
.atwho-view {
// position:absolute;
// top: 0;
// left: 0;
// display: none;
// margin-top: 18px;
// background: white;
color: black;
// border: 1px solid #DDD;
border-radius: 3px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
min-width: 120px;
z-index: 11110 !important;
}
.atwho-ul {
/* width: 100px; */
list-style:none;
// padding:0;
// margin:auto;
// max-height: 200px;
// overflow-y: auto;
}
.atwho-li {
display: block;
// padding: 5px 10px;
// border-bottom: 1px solid #DDD;
// cursor: pointer;
/* border-top: 1px solid #C8C8C8; */
}
////// added 1
.atwho-view {
// font-size: 14px;
// min-width: 140px;
// max-width: 180px;
border-radius: 6px;
// overflow: hidden;
box-shadow: 0 0 10px 0 rgba(101, 111, 122, .5);
}
.atwho-ul {
max-height: 135px;
padding: 0;
margin: 0;
}
.atwho-li {
box-sizing: border-box;
height: 27px;
padding: 0 12px;
white-space: nowrap;
display: flex;
align-items: center;
span {
overflow: hidden;
text-overflow: ellipsis;
}
}
.atwho-cur {
// background: #44a8f2;
background: #5BB8FF;
color: white;
}
////// added 2
.atwho-wrap {
position: relative;
}
&.atwho-panel {
position: absolute;
}
.atwho-inner {
position: relative;
}
.atwho-view {
position: absolute;
bottom: 0;
left: -0.8em; // 抵消左边距
cursor: default;
background-color: rgba(255,255,255,.94);
min-width: 140px;
max-width: 180px;
max-height: 200px;
overflow-y: auto;
&::-webkit-scrollbar {
width: 11px;
height: 11px;
}
&::-webkit-scrollbar-track {
// background-color: rgba(127, 127, 127, .1);
background-color: #F5F5F5;
}
&::-webkit-scrollbar-thumb {
min-height: 36px;
border: 2px solid transparent;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
background-clip: padding-box;
border-radius: 7px;
// background-color: rgba(0, 0, 0, 0.2);
background-color: #C4C4C4;
}
}
}
.talk.candidate-mentions {
// Override "max-width: 180px", as that makes the autocompletion panel too
// narrow.
.atwho-view {
max-width: 300px;
min-width: 250px;
// mention height: 48 * visible mentions: 4.5
max-height: 216px;
}
// Override max height to show 4.5 mentions to make clear you can scroll for more options
.atwho-ul {
// (padding top: 4 + avatar height: 48 + padding bottom: 4) * visible mentions: 4.5
max-height: unset;
}
// Override autocompletion panel items height, as they are too short
// for the avatars and also need some padding.
.atwho-li {
height: 64px;
padding-top: 4px;
padding-bottom: 4px;
}
// Although the height of its wrapper is 32px the height of the icon
// is the default 16px. This is a temporary fix until it is fixed
// in the avatar component.
.atwho-li .icon-group-forced-white {
width: 44px;
height: 44px;
}
// Override all colors with our theming and dark mode
.atwho-view {
background: var(--color-main-background);
color: var(--color-main-text);
box-shadow: 0 0 5px var(--color-box-shadow);
&::-webkit-scrollbar-track {
background-color: var(--color-background-dark);
}
&::-webkit-scrollbar-thumb {
background-color: var(--color-background-darker);
}
.atwho-cur {
background: var(--color-primary-light);
color: var(--color-main-text);
}
}
}
// Override conflicting rules from the comments tab.
.talk.candidate-mentions {
.atwho-view {
top: unset;
display: unset;
}
}

1
css/merged-files.scss
View File

@ -1,2 +1 @@
@import './At';
@import './icons';

1
css/merged-public-share.scss
View File

@ -1,3 +1,2 @@
@import './At';
@import './icons';
@import './publicshare';

1
css/merged-share-auth.scss
View File

@ -1,3 +1,2 @@
@import './At';
@import './icons';
@import './publicshareauth'

1
css/merged.scss
View File

@ -1,3 +1,2 @@
@import './At';
@import './icons';
@import './app';

1
lib/Files/TemplateLoader.php
View File

@ -89,6 +89,7 @@ class TemplateLoader implements IEventListener {
}
Util::addStyle(Application::APP_ID, 'merged-files');
Util::addStyle(Application::APP_ID, 'At');
Util::addScript(Application::APP_ID, 'talk-files-sidebar');
$user = $this->userSession->getUser();

2
lib/PublicShare/TemplateLoader.php
View File

@ -26,6 +26,7 @@ declare(strict_types=1);
namespace OCA\Talk\PublicShare;
use OCA\Files_Sharing\Event\BeforeTemplateRenderedEvent;
use OCA\Talk\AppInfo\Application;
use OCA\Talk\Config;
use OCA\Talk\TInitialState;
use OCP\AppFramework\Services\IInitialState;
@ -79,6 +80,7 @@ class TemplateLoader implements IEventListener {
}
Util::addStyle('spreed', 'merged-public-share');
Util::addStyle(Application::APP_ID, 'At');
Util::addScript('spreed', 'talk-public-share-sidebar');
$this->publishInitialStateForGuest();

2
lib/PublicShareAuth/TemplateLoader.php
View File

@ -26,6 +26,7 @@ declare(strict_types=1);
namespace OCA\Talk\PublicShareAuth;
use OCA\Files_Sharing\Event\BeforeTemplateRenderedEvent;
use OCA\Talk\AppInfo\Application;
use OCA\Talk\Config;
use OCA\Talk\TInitialState;
use OCP\AppFramework\Services\IInitialState;
@ -74,6 +75,7 @@ class TemplateLoader implements IEventListener {
}
Util::addStyle('spreed', 'merged-share-auth');
Util::addStyle(Application::APP_ID, 'At');
Util::addScript('spreed', 'talk-public-share-auth-sidebar');
$this->publishInitialStateForGuest();

1
templates/index.php
View File

@ -4,3 +4,4 @@ declare(strict_types=1);
script('spreed', 'talk-main');
style('spreed', 'merged');
style('spreed', 'At');