- Composant d'UI dans /test (1a729969) · Commits · open-source / oscar

module/Oscar/src/Oscar/Controller/PublicController.php

+0 −6

Original line number	Diff line number	Diff line
		@@ -229,12 +229,6 @@ class PublicController extends AbstractOscarController implements UseTimesheetSe
		*/
		public function testAction()
		{
		/** @var OscarEventService $service */
		$service = $this->getOscarConfigurationService()->getServiceLocator()->get(OscarEventService::class);
		$service->emit(OscarEvent::ACTIVITY_STATUS_CHANGED, [
		'id' => 666,
		'statusBefore' => null
		]);
		return [];
		}

module/Oscar/view/oscar/project-grant/item-list.phtml

+27 −11

Original line number	Diff line number	Diff line
		@@ -25,16 +25,37 @@ $show = $this->grant()->privilege(\Oscar\Provider\Privileges::ACTIVITY_SHOW, $ac
		<article
		class="card <?= $size ?> activity status-<?= $activity->getStatus() ?> <?= $show ? '' : 'lock' ?> <?= strtolower($activity->getFinancialImpact()) ?>"
		data-selectable data-id="<?= $activity->getId() ?>">
		<h4 class="card-subtitle">
		<span>
		<i class="icon-tags"></i>
		<?= $activity->getActivityType() ?>
		</span>

		<div class="onright">
		<?php if ($activity->getCodeEOTP()): ?>
		<strong class="number onright">
		<span class="number-label">
		<?= $this->options()->getConfiguration()->getFinancialLabel() ?>
		</span>
		<span class="number-value">
		<?= $activity->getCodeEOTP() ?>
		</span>
		</strong>
		<?php endif; ?>
		<strong class="number">
		<span class="number-value">
		<?= $activity->getOscarNum() ?>
		</span>
		</strong>
		</div>

		</h4>
		<h3 class="card-title">
		<?php if ($show): ?>
		<span class="picto status-<?= $activity->getStatus() ?>">
		<i class="icon"></i>
		<span class="text"><?= $activity->getStatusLabel() ?></span>
		</span>
		<small class="activity-type">
		<?= $activity->getActivityType() ?>
		</small>

		<?php else: ?>
		<i class="icon-lock picto"></i>
		<?php endif; ?>
		@@ -44,10 +65,6 @@ $show = $this->grant()->privilege(\Oscar\Provider\Privileges::ACTIVITY_SHOW, $ac
		<strong class="project-acronym acronym">[<?= $activity->getProject()->getAcronym() ?>] / </strong>
		<?php endif; ?>

		<?php if ($activity->getOscarNum()): ?>
		<strong class="oscarnum number number-value"><?= $activity->getOscarNum() ?></strong> :
		<?php endif; ?>

		<?= $activity->getLabel() ?>
		<?php if ($show): ?>
		<a href="<?= $this->url('contract/show', ['id'=>$activity->getId()]) ?>"
		@@ -108,8 +125,7 @@ $show = $this->grant()->privilege(\Oscar\Provider\Privileges::ACTIVITY_SHOW, $ac
		<i class="icon-tags"></i>
		<?= $this->oscarText("disciplines") ?>
		<?php foreach ($activity->getDisciplines() as $discipline): ?>
		<span
		class="discipline tag"><?= $discipline ?></span>
		<span class="discipline cartouche"><?= $discipline ?></span>
		<?php endforeach; ?>
		</div>
		<?php endif; ?>
		@@ -119,7 +135,7 @@ $show = $this->grant()->privilege(\Oscar\Provider\Privileges::ACTIVITY_SHOW, $ac
		<?= $this->oscarText("motscles") ?>
		<?php foreach ($activity->getMotscles() as $motclef): ?>
		<span
		class="discipline tag"><?= $motclef->getLabel() ?></span>
		class="cartouche info"><?= $motclef->getLabel() ?></span>
		<?php endforeach; ?>
		</div>
		<?php endif; ?>

module/Oscar/view/oscar/public/test.phtml

+3 −4

Original line number	Diff line number	Diff line
		<div class="container">
		<div id="admin-activity-date-flow" data-locale="fr_DJ"></div>
		<?= $this->Vite()->addJs('src/AdminActivityDateFlow.js'); ?>
		<div id="oscar-ui-dev" data-locale="fr_FR"></div>
		<?= $this->Vite()->addJs('src/OscarUIDev.js'); ?>
		</div>
		No newline at end of file

ui/src/OscarUIDev.js

0 → 100644

+21 −0

Original line number	Diff line number	Diff line
		import { createApp } from "vue";
		import momentFilter from "./utils/MomentFilter.js";
		import OscarUIDev from "./views/OscarUiDev.vue";
		import {oscarText} from "./utils/OscarText.js";
		let id = '#oscar-ui-dev';

		// Récupération des données dans le DOM
		let elemDatas = document.querySelector(id);
		const app = createApp(OscarUIDev, {
		"url": elemDatas.dataset.url,
		"title": elemDatas.dataset.title,
		});

		app.config.globalProperties.$filters = {
		oscarText,
		timeAgo(date){ return momentFilter.timeAgo(date); },
		date(date){ return momentFilter.date(date); },
		dateFull(date){ return momentFilter.dateFull(date); }
		};

		app.mount(id);
		No newline at end of file

ui/src/oscar-css.scss

+159 −13

Original line number	Diff line number	Diff line
		@@ -52,6 +52,7 @@ body {

		/ Fond de base /
		background: $colorGreyUltraLight;
		// background: linear-gradient(to top, #8a8074, #a5a17a);
		background: linear-gradient(to top, #d6ccc0, #fbfaf0);
		background-attachment: fixed;
		background-repeat: no-repeat;
		@@ -109,7 +110,7 @@ li {
		}

		$mainMenuHeight: 66px;
		$footerHeight: 150px;
		$footerHeight: 80px;

		#contenu-principal {
		margin-top: 66px;
		@@ -143,7 +144,7 @@ body > footer {
		}

		.container {
		padding-top: 2em;
		padding-top: .5em;
		}

		.row {
		@@ -164,7 +165,7 @@ body > footer {
		// ICONS

		span[class*="status"] {
		font-weight: 100;
		font-weight: 400;
		padding: 8px;
		color: #999;
		position: relative;
		@@ -177,15 +178,15 @@ span[class*="status"] {
		cursor: default;
		transition: opacity linear .3s;
		opacity: 0;
		font-size: .8em;
		font-size: .9em;
		display: block;
		margin-top: 2px;
		position: absolute;
		background-color: white;
		background-color: $color-white;
		box-shadow: 0 0 8px rgba(0, 0, 0, .5);
		pointer-events: none;
		color: #999;
		padding: 2px 4px;
		color: $colorGreyDark;
		padding: 2px 1em;
		z-index: 1000;
		&:before {
		display: block;
		@@ -436,6 +437,7 @@ a.cartouche {
		color: $color-white;
		text-decoration: none;
		}

		&:has(.addon){
		padding: 0 0 0 .5em;
		}
		@@ -471,8 +473,39 @@ a.cartouche {
		color: $primary;
		}
		}
		&.secondary {
		font-weight: 500;
		background: $secondary;
		.addon {
		background: lighten($secondary, 30%);
		color: $secondary;
		}
		}
		&.warning {
		font-weight: 500;
		background: $brand-warning;
		.addon {
		background: lighten($brand-warning, 30%);
		color: $brand-warning;
		}
		}
		&.success {
		font-weight: 500;
		background: $brand-success;
		.addon {
		background: lighten($brand-success, 30%);
		color: $brand-success;
		}
		}
		&.danger {
		font-weight: 500;
		background: $brand-danger;
		.addon {
		background: lighten($brand-danger, 30%);
		color: $brand-danger;
		}
		}
		&.info {
		font-weight: 700;
		background: $brand-info;
		.addon {
		background: lighten($brand-info, 30%);
		@@ -502,13 +535,23 @@ a.cartouche {
		&.closed {
		border-left-color: $colorGreyMedium;
		}
		.card-subtitle {
		border-bottom: thin solid $colorGreyUltraLight;
		font-size: .9em;
		color: $colorGreyMedium;
		margin-bottom: .5em;
		display: flex;
		.onright {
		flex: 0 0 auto;
		margin-left: auto;
		}
		}
		.card-title {
		display: flex;
		font-size: 1.25em;
		line-height: 1em;
		padding: 0;
		margin: 0;
		border-bottom: thin solid $colorGreyUltraLight;
		padding-bottom: .6em;
		align-items: center;
		.thumb32 {
		@@ -522,10 +565,20 @@ a.cartouche {
		flex: 1 0 auto;
		display: flex;
		}
		.onright {
		flex: 0 1 auto;
		.onright, .buttons {
		flex: 0 0 auto;
		text-align: right;
		margin-left: auto;
		// background: $colorGreyUltraLight;
		}

		.buttons {
		.btn {
		opacity: .5;
		&:hover {
		opacity: 1;
		}
		}
		}
		}
		.card-content {
		@@ -533,6 +586,64 @@ a.cartouche {
		padding: .6em;
		}

		.card-buttons, .card-buttons.btn-group {
		@extend .btn-group;
		display: flex;
		flex-direction: row;
		align-items: stretch;
		justify-content: center;
		align-content: center;
		border-top: thin solid $colorGreyUltraLight;
		padding: .5em 0 .3em;

		>.btn {
		flex: 0 0 auto;
		&:first{
		border-radius: 4px 0 0 4px;
		}
		}

		&.sm {
		>.btn {
		font-size: .8em;
		}
		}

		/ Boutons "light" /
		&.shadow {
		transition: opacity .3s;
		opacity: .3;
		}
		}


		&:has(.card-content){
		.card-title {
		border-bottom: thin solid $colorGreyUltraLight;
		}
		}

		&:has(.shadow):hover {
		.shadow {
		opacity: 1;
		}
		}

		&.state {
		border-left: 4px $colorGreyMedium solid;
		}

		&.disabled {
		background-color: rgba(255,255,255,.75);
		> * {
		opacity: .5;
		}
		.card-title .title{
		text-decoration: line-through;
		}
		margin-left: 1em;
		}

		&.card-list-item {
		h5 {
		color: $colorGreyMedium;
		@@ -557,20 +668,30 @@ a.cartouche {
		.text-right {
		text-align: right;
		}
		.number-value {

		.number-value, .acronym {
		font-family: monospace;
		font-weight: bolder;
		// border-bottom: dotted thin $colorGreyDark;
		}

		.number {
		@extend .cartouche;
		border-radius: 0;
		border: thin solid darken($colorGreyUltraLight, 10%);
		background-color: $colorGreyUltraLight;
		text-shadow: none;
		.key, .number-label {
		user-select: none;
		color: $colorGreyDark;
		&:after {
		content: " : ";
		}
		}
		.value, .number-value {
		font-family: monospace;
		color: $colorGreyDark;
		font-weight: 700;
		color: darken($colorGreyDark, 20%);
		padding: 0 .3em;
		}
		}
		@@ -882,8 +1003,31 @@ a.usage {
		}




		// Fiche ACTIVITY
		#activity {
		.navbar {
		border-bottom: solid thin #ccc;
		box-shadow: 0 1em 1em rgba(0,0,0,.2);
		}
		}

		.activity-header {
		border: solid 1px $colorGreyMedium;
		padding: 60px 1em;

		.activity-project {
		font-size: 0.9em;
		border-bottom: solid thin $colorGreyMedium;
		}

		h1 {
		border-top: thin solid $colorGreyMedium;
		border-bottom: thin solid $colorGreyMedium;
		font-weight: 800;
		font-size: 1.4em;
		}

		.activity-description {
		&:before {
		@@ -1418,6 +1562,7 @@ time.date-missing {
		}
		}

		/**
		.number {
		background: $colorGreyLight;
		border-radius: 2px;
		@@ -1439,6 +1584,7 @@ time.date-missing {
		font-weight: 700;
		}
		}
		/*****/

		// Formulaire
		.keyvalue-line {