Mirrors
/
nextcloud-spreed
mirror of https://github.com/nextcloud/spreed
3
0
Fork 0
Code Releases Activity
Browse Source

Move At.scss to At.css 

Signed-off-by: Joas Schilling <coding@schilljs.com>
pull/7576/head
Joas Schilling 3 years ago
parent
6aa894fee4
commit
d4519ebe55
No known key found for this signature in database GPG Key ID: 7076EA9751AACDDA
10 changed files with 180 additions and 171 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 174
      css/At.css
  2. 167
      css/At.scss
  3. 1
      css/merged-files.scss
  4. 1
      css/merged-public-share.scss
  5. 1
      css/merged-share-auth.scss
  6. 1
      css/merged.scss
  7. 1
      lib/Files/TemplateLoader.php
  8. 2
      lib/PublicShare/TemplateLoader.php
  9. 2
      lib/PublicShareAuth/TemplateLoader.php
  10. 1
      templates/index.php

174
css/At.css
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');
Write Preview
Loading…
Cancel
Save